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
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 ❤️
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.
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!
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 :)
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.
here is what you looking for, amigo :) --> th-cam.com/video/kxW62eMsw0k/w-d-xo.html&pp=ygUwZnJlZSBmaWdtYSBwbHVpbiB0byBleHBvcnQgZm9nbWEgaW50byBIVE1MICYgQ1NT. love from Iran ❤
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
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 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)
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.
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?
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 😅😅
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?
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.
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.
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?
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.
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 ?
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 :)
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.
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
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’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?
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
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!
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.
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!
This is gold. Can't thank you enough, you're bringing my designs to a new level
WOW! That was really cool. Loved how you have explained such complex animations in such an easy way!!!!
Amazing tutorial, I had been having trouble understanding the logic behind the animations, but no more! Thanks a lot!
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
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.
This is the best tutorial you ever made here 🙌🏼
mind blown.
Of all the animation tutorials, this is packed full
Thank you
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 :) -->
th-cam.com/video/kxW62eMsw0k/w-d-xo.html&pp=ygUwZnJlZSBmaWdtYSBwbHVpbiB0byBleHBvcnQgZm9nbWEgaW50byBIVE1MICYgQ1NT.
love from Iran ❤
I wonder if you can export these animations and import them into webflow or export as css/javascript for use with frameworks or vanilla
Oh my god, this video was an eye-opener. Never knew this was possible. Thank you so much for sharing.
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
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 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 are very good @ explaining and demonstrating - big thank you
Flux Academy is my favorite TH-cam channel it's really helps me to learn something new always thanks a lot 😍😍😍
Love that, so glad that it has helped you 🙌
it's gonna make my design to be another next level. thank you so much
Question. Is the preloader necessary? Without the preloader will there be a long delay depending on the user's loading time?
best technic for animation in Figma, thank you very much for good lesson
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.
thankyou very much for the useful tutorial plz make these types of videos more
Thank you so much. You posted this video at the right time!!!
You are a master! How are you using "0ms" for timing in "after delay"? When I try this, it uses 1ms instead.
I loved this, Taught me a lot! Thank you so much!
I loved it...This was everything I needed..
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?
Amazing video man, very insightfull. Thanks for sharing
are you masking the rectangle? or the words? sooo confused
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 😅😅
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?
Love Figma more and more every day, great great vid
Love this!
What is the purpose of the load bar? Is it only cosmetic?
Nice video i really enjoy. It's gonna help me a lot
hi, one question here. whats the difference between autodelay at 0s. and None?
Thanks for tutorials, sorry im late wathc this video, but its so amazing 🔥💪👍
After making animation in figma just like these, how do I use them in WordPress
Really great great tutor......Learned a lot....Thanx
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?
Is it possible to set up tokens for easily applying animations?
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
Wow 😮 thanks you , really great this video
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.
Awesome tutorials! Are the resources still available? The link is gone. Thanks!
Nice! Thanks for new information for me!
Great tutorial as usual. Thank you 😊
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.
I just want text to come from the bottom of the screen when the mouse hovers over it. I don’t understand.
How did you get the effects chain on the left side of the setuper?
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')
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).
How can you reliably and accurately export Figma into Html and Css without using webflow?
Next level ❤🔥& Thankyou
Thank you for your video!
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?
How do you export this though?
This is great, thank you!
awesome, thank you
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.
Top class content thanks a lot :)
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
This is awesome
TToTT this helps me so much thank youuuuuuuu
Thank you!
Not working for me 😢😭
Sir , can you please add keyboard buttons on display
How to change your change your channel rack from Dub back to the original channel rack you have
Short and usefull thxs
My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft
❤❤🎉
Great job, I must commend.
But, how do you export the animation from figma?
Bro, why wouldn't you use Invision which is much better... ?
Thanks. This is great
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 :)
How do you export this though?
Ran, the GOAT!
nice work
great. thanks
i am not getting the change to property
very helpful
Nice Tutorial
Thanks G!
But how do I transfer those animations to Webflow for example?
Do you figure it out till now, if yes please tell me
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
Why this effect appears after restarting preview
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
You’re a Genius Ran thank you ❤️
I don't have hover state after clicking change 2, and I am on while hovering.
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.
Impressive!!!
This is pretty cool. How does this compare to using Squarespace and using light coding which is what I do.
The best 💖
Yo are so brilliant
Hi, some steps are very fast, and assuming that the viewer knows the options
Where is accessibility in all of these?