Explore Mavi Design COURSES : https://bit.ly/mavi-design-courses

In today’s video we’ll go over essentials of creating animated prototypes for your projects in Figma. I’ll explain how the Smart Animate prototyping feature works, what are the conditions for creating an animation in Figma and what a Figma animation actually is. I’ll also explain and show the difference between instant vs. smart animate, go over the importance of naming your layers correctly when creating animations as well as creating interactive animated components and setting up your animations so that they play on their own (autoplay)

0:00 – Defining animations in Figma
0:34 – Conditions for animating in Figma
0:52 – Condition #1: At least two frames with specific differences
1:08 – Condition #2: Trigger
1:25 – Setting up the animated interaction (instant vs. smart animate)
3:00 – Condition #3: Layer naming
6:00 – Creating Interactive Animated Components
7:25 – Autoplay animations (After Delay interaction)
8:45 – More videos on animating in Figma?

How to create / set up animations in figma using the smart animate prototyping feature for your figma projects – step-by-step explanation tutorial with examples

————————
© 2023 Mavi Design