Website Animations Using ONLY Figma
Вставка
- Опубліковано 11 лип 2024
- Build alongside Ran by downloading the starter file here 👉 bit.ly/3n7hcVs
Master Figma for web design with our latest in-depth course 👉 bit.ly/3TpzgtG
Need a new Figma account? 👉 psxid.figma.com/s8z3306bhq0h
The goal today is to create fancy preloading animation and hero animation for our Figma Website. This will help you impress your clients and also prepare for when you're going to hand off or develop this website yourself so you understand what kind of animations and interactions you want to use. Figma does it all, no After Effects or other design software is needed, not even plugins. Let's get started.
📽️ CHAPTERS
00:00 - Intro
00:24 - Component variants Technique
02:30 - Reveal Animation
09:04 - Preloading Animation
14:30 - Final Thoughts
⬇ Would you like to see other Figma related videos? Let us know in the comments. ⬇
Don't forget to subscribe to our channel for more Design Content. Click here 👉 bit.ly/33byV7L
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 / ransegall
Ran's X (Twitter) 👉 / ransegall
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy
Thanks for watching our video!
#Figma #WebDesign #FluxAcademy
Flux Academy always coming in with the gold stuff. Thanks for this, GREAT starting point for more complex animations which I can already imagine doing. Like for example, putting more variants in the loading bar, making it look like it is actually loading instead of just going through. Animating the illustrated elements as well, and then the icons, etc. Thank you again!
thanks so much for this! started using Figma transitioning from XD and still learning how best to navigate with components quickly. That replace function is new and saves time!
I would like you to know that the way you explain is very easy to understand and follow. Really appreciate your hard work here. Thank you so much!
Amazing tutorial, I had been having trouble understanding the logic behind the animations, but no more! Thanks a lot!
Oh my god, this video was an eye-opener. Never knew this was possible. Thank you so much for sharing.
This is gold. Can't thank you enough, you're bringing my designs to a new level
I’ve been using Figma since the beginning of this year and I have to say I really enjoy using it so far. I haven’t done any prototyping work yet but I have been using After Effects only for 9 years. I’m so used to animating keyframes on a timeline so this will take some getting used to
It seems to me like when it cones to prototyping figma just isnt the right tool for the job.
@@minnow1337 How so? What do you use?
WOW! That was really cool. Loved how you have explained such complex animations in such an easy way!!!!
Thank you so much. You posted this video at the right time!!!
it's gonna make my design to be another next level. thank you so much
Of all the animation tutorials, this is packed full
Thank you
literally awesome and helpful. this is my first time using figma. i’m trying to make a fun and interesting portfolio and this simple video is a game changer!! when i got it to work the first time i felt so accomplished!! thank you so much
Great! As much as I do not believe you can somehow teach people how to pick fonts - your figma tutorials are the top notch youtube tutorials.
Let me explain my bias - I have spent 20 years watching and talking to plethora of typeface designers allover the world. You cannot teach this to someone who just started his / her adventure with fonts. You have to become a god damn wikipedia to be able to work with typefaces without a doubt.
I loved this, Taught me a lot! Thank you so much!
Love this!
Great tutorial as usual. Thank you 😊
best technic for animation in Figma, thank you very much for good lesson
Amazing video man, very insightfull. Thanks for sharing
Love Figma more and more every day, great great vid
This is great, thank you!
you are very good @ explaining and demonstrating - big thank you
Nice! Thanks for new information for me!
I loved it...This was everything I needed..
Next level ❤🔥& Thankyou
This is the best tutorial you ever made here 🙌🏼
mind blown.
There is one more easier approach to mask! - just turn the text container into frame (with clip content enabled)
And in 1st state drag the text down/up and in next state center it again ❤️
It works! thx
Nice video i really enjoy. It's gonna help me a lot
Thanks. This is great
Thank you for your video!
This is awesome
Thanks for tutorials, sorry im late wathc this video, but its so amazing 🔥💪👍
Really great great tutor......Learned a lot....Thanx
Wow 😮 thanks you , really great this video
TToTT this helps me so much thank youuuuuuuu
awesome, thank you
thankyou very much for the useful tutorial plz make these types of videos more
Short and usefull thxs
Thank you!
Ran, the GOAT!
Thanks G!
Top class content thanks a lot :)
great. thanks
The best 💖
Impressive!!!
very helpful
Nice Tutorial
nice work
Flux Academy is my favorite UA-cam channel it's really helps me to learn something new always thanks a lot 😍😍😍
Love that, so glad that it has helped you 🙌
Great video! Thank you very much :)
I have a question though. How can I export those animations into react? I'm familiar with the locofy plugin but it seems like it can't generate the animations from it. (it can only generate simple fade effects and such)
Awesome tutorial. Can you make one tutorial on Drag and Drop in Figma ( vertically and horizontally too) please?
You’re a Genius Ran thank you ❤️
Question. Is the preloader necessary? Without the preloader will there be a long delay depending on the user's loading time?
Yo are so brilliant
just a few things that will also help guys. Go to F, go down to Preferences, then check CTRL + Click opens right click menu. Another Helpful Tip: Command click on mac allows to direct select similar to the direct selection tool on Illustrator. Otherwise you will have to double click every nested item which can be annoying.
So when making these components you can use the same one for another button just changing the text BUT to keep it working you have to NOT delete the original component on the art board?
I wonder if you can export these animations and import them into webflow or export as css/javascript for use with frameworks or vanilla
How did you get the effects chain on the left side of the setuper?
You are a master! How are you using "0ms" for timing in "after delay"? When I try this, it uses 1ms instead.
Can I ask a question about Figma Animation that has been questioned by my Dev Team.....Can the Figma Smart Animate that you show here in the video been coded for them - and where can I get that code in Figma for them please from the prototype. Thanks!: Daryl
Hii,
I understood that we can add animations to first screen but can we do it to the next slides? Bcos all the screens load at once.
I hope u got my doubt 😅😅
hey! this is an older video and I doubt that you will see this comment but I wanted to ask if it's also possible in Figma to play videos in the background of the website without having to start the video itself?
Why did my components and all that turn invisible? When I want to export them over webflow they are still invisible? Do you know what I should do to make them visible and still have their transition function?
hi, one question here. whats the difference between autodelay at 0s. and None?
HELLO SIR I am using Figma starter .I just want to ask Is there ant restriction not to use hover or text or picture animation because After so many trial I was unable to put hover effect on button .I am grateful If you consider it .
Thank you .
Best Regards
Shanza
this does not seem to work for me. I tried doing exactly this with a dropdown component upon clicking. When I select change to, it only gives me the option to select the original component. I looked up this problem, but nobody seems to know what's wrong.
One thing I didn’t catch is that in real world project for a company should we do animation in the same file or we should do it in a separate file?
Because this make the design inconsistent and developer may not catch why we put the components outside the art board.
Hey Ran, great tutorial! I have tried all these animations out, they work very well but how can you then export your animations made in Figma to HTML?
You can generate css natively but for html exports you will probably need a plugin
here is what you looking for, amigo :) -->
ua-cam.com/video/kxW62eMsw0k/v-deo.html&pp=ygUwZnJlZSBmaWdtYSBwbHVpbiB0byBleHBvcnQgZm9nbWEgaW50byBIVE1MICYgQ1NT.
love from Iran ❤
Can Figma create Image and video overlays/masks I can export using shapes and frames? ... I want a white box with transparent shapes I can lay over the top of images and videos.
What is the purpose of the load bar? Is it only cosmetic?
❤❤🎉
Great job, I must commend.
But, how do you export the animation from figma?
are you masking the rectangle? or the words? sooo confused
Wonderful tutorial,. Just a question, what if I wanted to record this as a high quality video though for portfolios? Screen recording tools usually don't record at a good resolution unless there are some tools you recommend ?
nvidia's recording you can record at 4k and then just crop it in premiere
After making animation in figma just like these, how do I use them in WordPress
Awesome tutorials! Are the resources still available? The link is gone. Thanks!
Hi I tried to download your free courses to check the content. But it seems doesn't respond and just pulling me back upwards (on the site).
My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft
How do you export this though?
After creating a website animation in Figma what is the best approach to then bring that into a website platform like Wordpress or would that have to be done in a different software? Thank you :)
I have the same question
Is it possible to set up tokens for easily applying animations?
How to convert this animated website into code? I am trying to convert animated websites using locofy, but when I am running, the animation is not working.
Fun
This is pretty cool. How does this compare to using Squarespace and using light coding which is what I do.
How can you reliably and accurately export Figma into Html and Css without using webflow?
👌🏼
🤘🤘🤘
Why this effect appears after restarting preview
How to change your change your channel rack from Dub back to the original channel rack you have
Bro, why wouldn't you use Invision which is much better... ?
Thank you for the effort, but I have a prob, I do apply the same thing with the animation but it doesn’t work for me
I had the same. Try pressing R on your keyboard whilst you are in preview (play')
Sir , can you please add keyboard buttons on display
how do you use that animation made in figma on your website, can you export it?
Good question. I also would like to know how you can export your animation made in Figma to HTML?
I have to say that Figma (or XD) is not a great prototyping tool. I use Protopie which is relatively easy to learn and can produce spectacular prototypes
Protopie is AMAZING!
Interesting!
Protopie and Framer are definitely on another level.
Let's us all meet here and agree that protopie is the king 👑
@@mschrimmer631 please explain
Thank you bro. You are awesome.
It would also be really nice if you write the shortcuts for each work plan in the annotation or make them visual so it's easier to follow, amigo.
love from Iran ❤
Do not mix government policies with people's responsibilities, we are all human beings and long live humanity. The media is also an instrument of government manipulation.
😍
I just want text to come from the bottom of the screen when the mouse hovers over it. I don’t understand.
i am not getting the change to property
Hahahaha sae dudee
Not working for me 😢😭
All this animating in Figma is great and all, but what happens to it when you try and turn it into an actual, fully functioning website? I've seen a lot of plug-ins and other services that claim to convert Figma designs to websites, except that many of them say nothing (or very little) about preserving animations?
It would really suck having to recreate all these cool animations after exporting. That would be like giving yourself twice the work! Am I missing something?
Hello. Now I want to know the answer to this question. Did you learn? What's the point if you can't export all these beautiful animations? I can also make animation with premiere pro :)
Any idea why my prototype arrows go straight down instead of with a curve from the right?
Maybe you don't use the same version of Figma, maybe your variants are not spaced the same amount of pixels, maybe something else. But my guess is: it is purely how Figma draws the arrow that represents your transition, not a sign something is wrong with your transition. As long as your transition's settings are correct (source, destination, delay, type of animation...) everything should work fine.
@@EmmaQUB this is my problem too, but when i start to play it wont work? Its weird