Website Animations Using ONLY Figma
July 9, 2024 2024-07-09 2:27
Website Animations Using ONLY Figma
Build alongside Ran by downloading the starter file here 👉 https://bit.ly/3n7hcVs
Master Figma for web design with our latest in-depth course 👉 https://bit.ly/3TpzgtG
Need a new Figma account? 👉 https://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 👉 https://bit.ly/33byV7L
📱 Find us on SOCIAL MEDIA
Ran’s Instagram 👉 https://www.instagram.com/ransegall/
Ran’s X (Twitter) 👉 https://twitter.com/ransegall
Flux Academy’s Instagram 👉 https://www.instagram.com/flux.academy/
Flux Academy’s TikTok 👉 https://www.tiktok.com/@fluxacademy
Thanks for watching our video!
#Figma #WebDesign #FluxAcademy
source
Comments (34)
@rijaslyan6376
Flux Academy is my favorite YouTube channel it's really helps me to learn something new always thanks a lot 😍😍😍
@Someone26809
I loved it…This was everything I needed..
@sittingonmysofa
Figma is terrible for exporting animations
@WilsonCollantesAponte
How do you export this though?
@scribbling.panda_
WOW! That was really cool. Loved how you have explained such complex animations in such an easy way!!!!
@shreetimohapatra4142
i am not getting the change to property
@moxitaparekh868
it looks like you're doing this for yourself instead of teaching someone. The explanation is ridiculously fast and complicated. You're not interactive, you don't breathe. As if you wish to finish showing everything in this one video. The steps are skipped, leaves one confused as to how did you get to the next step.
@Ralphhy
I just want text to come from the bottom of the screen when the mouse hovers over it. I don’t understand.
@skylarveruca
14:28
@GGGG-oj3pg
Thanks G!
@imshinchan4800
Top class content thanks a lot 🙂
@oygapparel5212
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.
@shadrachemmanuel5355
❤❤🎉
Great job, I must commend.
But, how do you export the animation from figma?
@InkiestOfInks
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
@user-qj4lm1rn2n
sir create some case study on scrap ,
you enspire me
@coolgirlcat4485
can someone please explain to me how on earth he is BREAKING DOWN THE text in a Component!!!! I've looked in the comments and no one has said anything!!!! I DON'T KNOW THE KEY BOARD SHORT OUT SO SOMEONE PLEASE LET ME BECAUSE THIS BOZO TALKS TO FAST
@thebrunoserge
When you copy the first it doesn't animate at all…
@germanungo9435
Ok.. but is NOT for website, is for WebDESIGN.
@Pixelandborder
Nice Tutorial
@AndrewMcSpadden
Is it possible to set up tokens for easily applying animations?
@gabrielburgos2533
Love Figma more and more every day, great great vid
@rowdyleon318
Oh my god, this video was an eye-opener. Never knew this was possible. Thank you so much for sharing.
@0x0081
I wonder if you can export these animations and import them into webflow or export as css/javascript for use with frameworks or vanilla
@nathan-sg7cu
How do you export this though?
@Natureshoot312
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.
@dinezra3816
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)
@ReactiveGaming7
After making animation in figma just like these, how do I use them in WordPress
@DanielJimenez-tp8bc
are you masking the rectangle? or the words? sooo confused
@DanielJimenez-tp8bc
Why cant I get this damn masking to work?! hahaha
@LETRONZ
What is the purpose of the load bar? Is it only cosmetic?
@minouxchat486
Awesome tutorials! Are the resources still available? The link is gone. Thanks!
@user-mq1jb6zg1m
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 🙂
@KhaledMoAdel
awesome, thank you
@user-rk1dp7td5y
TToTT this helps me so much thank youuuuuuuu <3<3<3<3<3