Figma Advanced Animations

In this tutorial, Tim walks you through storyboarding, interactions, and animations to give you the ability to create a powerful UI experience. Learn step-by-step how to create advanced animations and interactions in Figma.

📽️ CHAPTERS
00:00 - Intro
00:46 - Step 1 Storyboarding
01:05 - Step 2 Identify multi-interactions
05:04 - Step 3 Start animating

📱 Find us on SOCIAL MEDIA & follow Tim’s Channel

Like this animation video? Let us know in the comments 👇🏼

#designiterations # webdesignanimations #design #webdesign

[venos_gg]

Sucessfully did the whole design. Working seemlestly, I found a few errors while doing this, you provided so much details in you video. So, that was easy to feature out the problems. I really enjoyed working on it. Huge thanks to you for helping this community!

[matevzpor]

perfect, exactly the thing I was looking for, please more advanced animations, interactions like this!

[muhammadbacar]

Awesome video need more of this type of contents especially from Tim

[vaishnavimokadam]

This is amazing dude, I have learned a lot of things!

[gqpxjhk]

exactly what i need for my portfolio interactions, looking forward to trying them out

[reyhaneh]

Thank you so much, It's very useful.

[mfiorentino]

I approve of the tower's name. Thanks for a good tutorial!

[cosimobrunothetrimon]

Phenomenal content we want more of this:))

[sadaffarsa]

Could you please upload a video explaining how to create the expanding and collapsing 'Review & Rating' card?

[bleachlamp]

How can I apply the animation I made to the front end?

[pickletubetv]

I lost my dog but this video helped me build a pop up image for my website I no longer need a dog.

[neeraj_sinhmar]

Anybody can provide figma link here for this prototype

[angelacalvin]

I downloaded your file to follow along but it is view only. I learn with doing it at same time, I thought I would be able to work in the file.

[danielkeel]

I couldn't get the figma file to be used to follow along

[pascalpascal]

How would you then move those animations to webflow?

[emaduddin]

Hi, I can't copy the project file. please help

[olfaol]

How to handoff this animation to developers ?

[MrMasteryash]

everytime i drag items out of the frame to smart animate items back to the next frame > the (smart animated ) items suddenly appear on the screen and doesnt slide inside the screen, if anybody can help me out with this, please
PS. sorry for my poor english, its not my native language, i hope someone can comprehend this and help

[Deckard]

Nice tutorial, I wouldn't have titled it 'Advanced' though (more 'lo-fi prototyping') as tools like Figma, Xd etc. have no real advance animation features/functions for protoyping, like Principle, AE and ProtoPie.

[stevennaresh]

Hi, Do we need professional figma account to get advanced smart animation or is it available on Free version? Please let me know. Thanks!