From the course: Figma: Animating Design Prototypes

Unlock this course with a free trial

Join today to access over 24,900 courses taught by industry experts.

Smart Animate transitions in Figma

Smart Animate transitions in Figma - Figma Tutorial

From the course: Figma: Animating Design Prototypes

Start my 1-month free trial Buy for my team

Smart Animate transitions in Figma

“

- [Instructor] Another type of motion that can be applied to interaction transitions is Smart Animate, where the previous examples we've explored give motion to the entire frame as one object. Smart Animate provides motion to each individual layer within a frame. Let's return to our Motion Playground to view this. We have a single interaction here that on click goes to our animation end frame, and right now it is an instant transition. Of course, we could change it to a dissolved transition instead, and that gives us extra parameters that we'll look at later. However, I want to go to this third option, Smart Animate. Smart Animate takes into consideration the layer structure, type, naming and order across different frames in order to intelligently transition differences in properties across time. So for instance, across the animation end frame and the animation start frame, each one has an object, which is an ellipse called circle. However, the design properties between each circle…

Contents