"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about smart animate in Figma: help.figma.com/hc/en-us/articles/360039818874-Smart-animate-layers-between-frames"
Figma Team, you folks are incredible. I rarely comment on anything but this is THE BEST design tool I've ever used. Period. And, you keep making it better and better. Fantastic work as always. Thank-you!
For a couple of days was suffering with the choice of a slightly more advanced tool for interface animation. And here Figma releases an update with Smart Animate. Thanks for awesome work!
This is amazing guys, I was struggling with the complexity of my project and importing things to Principle and then all of the sudden I get the pop up message that this has just been released, Amazing!
I cannot begin to explain how frustrated I was trying to do this prior to watching this video. This team is amazing and am SO relieved you took this step by step and explained simply enough. Thank you sooooo much!!!
It really is amazing what you guys have achieved in such a short amount of time. This is making the case for me to cut yet another tool out of my toolkit: Principle for Mac. If we can get some basic drivers and more in-depth timeline controls for power users, I won't have to leave Figma for anything anymore. That's literally the last design/prototyping tool that I currently use outside of Figma. I haven't touched PhotoShop unless I'm doing heavy graphical work, and I haven't missed Sketch because of the live collaboration, multi-platform compatibility, insane component system, prototyping, etc etc etc that Figma gives me. Truly incredible job. Your team should be proud of such a revolutionary, one of a kind product.
I love you, guys!!! Figma is the best!!! RIP Sketch, RIP Xd. Can't wait for auto-layout and custom transition animations (like bounce)! Greetings from Siberia!!!
Making extra revenue from the same amount of traffic is something that most publishers overlook! All you need is additional ad network and various ad formats - for example, I use MonadPlug Push Notifications, In-page Push and Native ads in combination with Google AdSense Ads... Revenue boosted by 500% in easy few steps!
The only reason I was still using XD that it had the auto-animate feature. Now Figma has got the smart animate feature, which is in fact far better than the auto animate feature. Now I can switch to Figma without any worries. Good job guys.
Figma is the best UI/UX design tool of the designers/developers by the designers/developers for the designers/developers , can't wait to see micro-interaction within components.
Thanks for the great tutorial! I have a question- How do I add both, a left and a right swipe on one object in the frame? Say I want the delete object to show up with a left swipe and an archive object to show up with a right swipe.
Great stuff, again...Thanks alot for all your hard work, you guys are truly contributing to making our life as designers both easier and more efficient, but equally important; a lot more enjoyable 💕
You seem to be the only one remebering to point out the layers to be animated through Smart Animate HAVE to have the same name. Quite a few people stress with this, not knowing why the one element just fades into another. Respect! ;)
Wow, ya'll are crushing it... very helpful and well done tutorial. Super excited to discover all the new possibilities afforded by this feature! Thanks for the work you all do.
There is a terrible confusion rising with regards to the two phenomenas "Smart Animate" and "Animate Matching Layers" with other animations, especially since you dropped the "Smart" prefix in the latter. I fully understand the intended goals of each approach: [1] using Smart Animation as the selected animation type will allow all layers with the same name to animate in their own ways, depending on their differences in properties, while non-matching layers will adopt a plain Dissolve animation. This is easy to understand and achieve. [2] using Matching Layers as an additional option within the other animation types with their preset direction, to allow matching layers to use a smart animation for their (if any) differences in certain properties, excluding them from the selected animation type. The confusion rises due to the checkbox that now says: "Animate matching layers". It unmistakably gives the impression that it will ONLY animate the matching layers with the selected animation, excluding non matching ones. While the result is actually doing almost the opposite: leaving them static, if there's no difference in properties ! I think it's time to overhaul the interface and labelling for these two intended and useful approaches and involved features, and update/improve the Help files and videos about it.
Hey Abhilash, we don't cover it in a video, but you can get the design File here: bit.ly/356nMRx where you can view the second page to see how we've built it.
this is a great tutorial but i am looking for another part of it if there is any, also need to add another action if swipe right, like swipe left deletes, swipe right archives, is there. any video for that ?
Just watched a video on RUclips by @dev_ed and he mentioned figma as one of the technologies to use, and I thought to see what it was about. Even though I had seen notification with a RUclips talking about it as being an Adobe XD alternative, I never took it seriously. That is until today. This is brilliant and I will be downloading it ASAp 😁
How did you record prototypes for this video? What software did you use? Figma realy needs a prototype recording function. We can create cool prototypes with animations, but we don't have the ability to record a video or gif and export it to be inserted into a presentation.
Very cool. I'm just a beginner to figma. How did you do the splash screen animation? which shows letter icon in the beginning then disappeared and appearance of login screen? Actually what trigger has been used for first screen to have auto animate?
Awesome! Anyone knows if it's possible to export the animated prototype? Not the "share link", I mean the actual animated prototype so I can upload to my portfolio, Dribble, Behance and so on.
Hey @Ceylon, Figma doesn't have the ability to do this natively. I like to use screen recording software for this (not much different from how these videos are recorded).
Hello, looks really nice, but I got a question. Why in this file you can change margin in component group, but if I create my own file with my components I cannot do it there?
Can you make a tutorial on the actual loading screen animation to sign in screen at 0:12? That was what I’m actually trying to do and thought since you showed it in your video, you should also show how it’s done. It’s my first time using figma and I’m feeling like the prototype animations are just much too basic. (I’m VERY new to the tool and Im used to doing intricate animation with After Effects) I’m trying to move elements in one after another by simply scrolling and I just can’t quite figure it out.
Hey there, no immediate plans, but we can definitely consider creating a tutorial for that in the future. If you click the link in the video description, you can duplicate a copy of the tutorial file which has all of the animations shown in the video. You can then see the settings from that File and see how it was created.
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about smart animate in Figma: help.figma.com/hc/en-us/articles/360039818874-Smart-animate-layers-between-frames"
Figma Team, you folks are incredible. I rarely comment on anything but this is THE BEST design tool I've ever used. Period. And, you keep making it better and better. Fantastic work as always. Thank-you!
this team absolutely deserves likes
agree?
sure!
For a couple of days was suffering with the choice of a slightly more advanced tool for interface animation. And here Figma releases an update with Smart Animate. Thanks for awesome work!
This is amazing guys, I was struggling with the complexity of my project and importing things to Principle and then all of the sudden I get the pop up message that this has just been released, Amazing!
I cannot begin to explain how frustrated I was trying to do this prior to watching this video. This team is amazing and am SO relieved you took this step by step and explained simply enough. Thank you sooooo much!!!
This is brilliant! Being able to pin the nav bar is subtle but goes a long way to making a convincing prototype.
It really is amazing what you guys have achieved in such a short amount of time. This is making the case for me to cut yet another tool out of my toolkit: Principle for Mac. If we can get some basic drivers and more in-depth timeline controls for power users, I won't have to leave Figma for anything anymore. That's literally the last design/prototyping tool that I currently use outside of Figma. I haven't touched PhotoShop unless I'm doing heavy graphical work, and I haven't missed Sketch because of the live collaboration, multi-platform compatibility, insane component system, prototyping, etc etc etc that Figma gives me. Truly incredible job. Your team should be proud of such a revolutionary, one of a kind product.
I guess it's been 3 year. Now you won't have to go anywhere outside for prototyping:)
I love you, guys!!!
Figma is the best!!!
RIP Sketch, RIP Xd.
Can't wait for auto-layout and custom transition animations (like bounce)!
Greetings from Siberia!!!
Making extra revenue from the same amount of traffic is something that most publishers overlook! All you need is additional ad network and various ad formats - for example, I use MonadPlug Push Notifications, In-page Push and Native ads in combination with Google AdSense Ads... Revenue boosted by 500% in easy few steps!
You've made me already happy with previous update about GIF support and now this Smart Animate update makes me crazy!
I rarely comment on RUclips but I just adore you, Figma! ❤️
The only reason I was still using XD that it had the auto-animate feature. Now Figma has got the smart animate feature, which is in fact far better than the auto animate feature. Now I can switch to Figma without any worries. Good job guys.
Figma is the best UI/UX design tool
of the designers/developers
by the designers/developers
for the designers/developers ,
can't wait to see micro-interaction within components.
Fantastic work. Always ahead. The team understands the wishes of the customers. THX a lot!!! Love it!
Absolutely great stuff, I keep falling in love with figma more and more!
it's not only the tool, your tutorials are simply great! thank you so much for supporting your community
I have to say this is nice, the example file is even better
Besides Capture One, this is one of the few companies on RUclips putting out good content
Thanks for the great tutorial!
I have a question- How do I add both, a left and a right swipe on one object in the frame? Say I want the delete object to show up with a left swipe and an archive object to show up with a right swipe.
Looks pretty cool. I'm not a designer but once I tried Figma I'm in love with this app. And now a brilliant new feature. Thank you!
Great stuff, again...Thanks alot for all your hard work, you guys are truly contributing to making our life as designers both easier and more efficient, but equally important; a lot more enjoyable 💕
You seem to be the only one remebering to point out the layers to be animated through Smart Animate HAVE to have the same name. Quite a few people stress with this, not knowing why the one element just fades into another. Respect! ;)
RIP everything else.
Only reason Figma was lacking was Smart Animate. Now it is here.
Figma Gives me Life., Thank You Figma
FIGMA VS SKETCH? WASTED. Win by K.O.!
Thanks for your anazing work, guys!
Wow, ya'll are crushing it... very helpful and well done tutorial. Super excited to discover all the new possibilities afforded by this feature! Thanks for the work you all do.
Thank you Figma team! Could you please look at adding screen anchors as a future update?
Thank you Figma team!!!
Really useful tip, these were the critical parts I was not sure Figma provided but this is reassuring of its quality.
Incredible mechanism solution!
Amazing work Figma team -- this looks stupid-easy to use. You're making me want to work in design again!
Amazing tutorial, never knew there were so many options in Figma!
Figma is the best!
There is a terrible confusion rising with regards to the two phenomenas "Smart Animate" and "Animate Matching Layers" with other animations, especially since you dropped the "Smart" prefix in the latter.
I fully understand the intended goals of each approach:
[1] using Smart Animation as the selected animation type will allow all layers with the same name to animate in their own ways, depending on their differences in properties, while non-matching layers will adopt a plain Dissolve animation.
This is easy to understand and achieve.
[2] using Matching Layers as an additional option within the other animation types with their preset direction, to allow matching layers to use a smart animation for their (if any) differences in certain properties, excluding them from the selected animation type.
The confusion rises due to the checkbox that now says: "Animate matching layers". It unmistakably gives the impression that it will ONLY animate the matching layers with the selected animation, excluding non matching ones. While the result is actually doing almost the opposite: leaving them static, if there's no difference in properties !
I think it's time to overhaul the interface and labelling for these two intended and useful approaches and involved features, and update/improve the Help files and videos about it.
Finally ! Thx for this ❤
Figma is changing the game, and only getting the started. I am telling all my friends still on AdobeXD/Sketch to transition ASAP. This is the future.
That's incredible! I'm fresh on this journey of UX UI... Thanks for sharing xx
Das haat (Will Smith reference) awesome job team, this one single feature is why I'll be doing my next project in Figma and NOT Adobe XD 👽😎💖🎊🙌🏽🔥
Who dislikes this????? this is amazing, so dope! thanks !!!
Thank you Figma team :)
Just wanna say thank you very much for sharing this and those very helpful links in the description 😍😍😘😘😘
Thanks you saved my time I dont have to use another application for animating
Such a nice update! Well done guys! Keep it going!
This is awesome, except that the figma file in the description doesn't have the other animations in it, just the swipe to delete.
thank you for creating figma and making it free :3
i love figma. keep developing!!!
THIS IS GOLD!!!!!!!!!!!!!!! Thank you! Figma team
Now that we have Scroll To, would y’all recommend using Scroll To to display the new email instead of duplicating the frame?
Incredible! Thanks for your work!
Great, but I can’t find Interaction: On Scroll. Thanks for your work. You are awesome
шо вы творите, это же гениально!
what the heck I did not know Figma had these features that is awesome
Feels a bit confusing to me but Figma is soooo amazing!!!
Seriously!! you guys are amazing thank you.
Figma Team - onelove!!!
Guys this is just what I have been asking you for months
Thank you so much
You are awesome
#whyilovefigma #ripxd
You are now my main tool to go!
Thank you Team Figma!! :))
Awesomeness!!
Is there a link to understand how pull to refresh works?
Hey Abhilash, we don't cover it in a video, but you can get the design File here: bit.ly/356nMRx where you can view the second page to see how we've built it.
this is a great tutorial but i am looking for another part of it if there is any, also need to add another action if swipe right, like swipe left deletes, swipe right archives, is there. any video for that ?
Your layout is not overwhelming like Bubble, which as the saying goes "Simplicity is the key".
Thx very much. I would never guess how to do proper drag if you dont show it.
Thanks Figma! Amazing as always
Interesting! It is possible to export the animated preview in mp4?
That one dislike is Adobe XD
The second one is from Sketch
The third one is from Invision
The fourth from Paint
First like was from Figma's intern - and thats okay!
Lol!
Just watched a video on RUclips by @dev_ed and he mentioned figma as one of the technologies to use, and I thought to see what it was about. Even though I had seen notification with a RUclips talking about it as being an Adobe XD alternative, I never took it seriously. That is until today. This is brilliant and I will be downloading it ASAp 😁
Excellent tutorial! Well done.
Amazing, thank you!
How did you record prototypes for this video? What software did you use?
Figma realy needs a prototype recording function. We can create cool prototypes with animations, but we don't have the ability to record a video or gif and export it to be inserted into a presentation.
You can record the entire screen (Win + G on Windows) and then crop it.
And on iOS, you can you a built-in screen recorder from the control center.
CMD+SHIFT and 5 on macOS. Then select what you want to record.
God bless you FIGMA
This is a great tutorial, thanks.
Love you guys, you are so amazing
Figma is on fire 👏🏼
Very cool. I'm just a beginner to figma. How did you do the splash screen animation? which shows letter icon in the beginning then disappeared and appearance of login screen? Actually what trigger has been used for first screen to have auto animate?
Did you ever figure this out? I'm wondering the same
YOU GUYS ROCK!
7:16 for me it absolutely ignores the drag direction, in fact it acts like an on tap no matter what I do
What about Microinteractions?
AKA "Component" in Principle or "Behavior" in Flinto.
That's really good
I think i’m in love 😍
Very helpful guys!!!! Nice 👍 job
that is a really awesome tool.
Love you Figma!
thank you figma
They just killed XD completely
yes... even i forgot to bring my laptop, i can still do anywhere simply by login in and there you go.
@@Senigrafik you need a laptop to login, no?
@@brocker8617 can login to any pc/laptop
I used this effect to create a card animation, final result was awesome! I also made a tutorial
Very cool but also very complicated!
This is great. Thank you.
How can someone dislike this video, Where are you 4 guys 😡😡😡😡
Thanks Figma.
Thank you! )
Awesome!
Anyone knows if it's possible to export the animated prototype? Not the "share link", I mean the actual animated prototype so I can upload to my portfolio, Dribble, Behance and so on.
Hey @Ceylon, Figma doesn't have the ability to do this natively. I like to use screen recording software for this (not much different from how these videos are recorded).
Amazing!
Hello, looks really nice, but I got a question. Why in this file you can change margin in component group, but if I create my own file with my components I cannot do it there?
YES FINALLY!
Can you make a tutorial on the actual loading screen animation to sign in screen at 0:12? That was what I’m actually trying to do and thought since you showed it in your video, you should also show how it’s done. It’s my first time using figma and I’m feeling like the prototype animations are just much too basic. (I’m VERY new to the tool and Im used to doing intricate animation with After Effects) I’m trying to move elements in one after another by simply scrolling and I just can’t quite figure it out.
Hey there, no immediate plans, but we can definitely consider creating a tutorial for that in the future. If you click the link in the video description, you can duplicate a copy of the tutorial file which has all of the animations shown in the video. You can then see the settings from that File and see how it was created.
what if i want to animate the icon itself to move up ?
Really like it
OMG, thanks! 😍
This is awesome ！！
Respect 👍
Thanks ! Love developers !
Awesome! Does anyone know how do I convert animated prototype to gif or mp4?
very good news!