Create Advanced Animations with Smart Animate
Smart Animate looks for matching layers, recognizes differences, and animates layers between Frames. You can select Smart Animate from the list of Transitions, when building a Prototype.
Smart Animate allows you to quickly create advanced animations. You can use Smart Animate to replicate:
- Loading sequences
- Parallax scrolling
- Touch gestures e.g. Drag, Swipe, Long-Press
- Sliders, Toggles and Switches
- Expanding content (Show more / Show Less)
- Pull to refresh
I want to know more about:
Learn more about how we built Smart Animate in our Blog post: Announcing Smart Animate.
How Smart Animate Works
Smart Animate looks for matching layers that exist across multiple Frames. We take into account both the layer's name and where it sits within the hierarchy.
For layers that match between Frames, we recognize what's changed and apply transitions to seamlessly move between them.
We can apply Smart Animate to entire objects or Components, as well as individual layers within a Component or Group.
It's likely that more than one of an object's properties will change between Frames. We've isolated each of the properties we support below, so you know what to expect.
If an object changes in size between Frames, we will animate it so that it shrinks or grows.
We will recognize if the co-ordinates of the object have changed. We will then move the object from its current position, to its position in the second Frame.
You can use this to hide matching layers between Frames. Instead of toggling the layer visibility off, you can adjust the Opacity to 0 percent. We will then Dissolve the layer in or out.
You can adjust opacity through each layer's Fill properties. We recommend adjusting the opacity using Layer Blend Mode. This is the Layer setting in the Properties Panel.
You can adjust the rotation of an object using the fields in the Property Panel. Or, you can rotate the object in the canvas. You can rotate a single layer at once, or rotate a group of them around an anchor point.
We will animate any changes to an object's Fill. This includes solid colors, gradients and even Images.
Things to Note
- If a property isn't supported, we will apply a Dissolve transition to that object. This includes changes in Effect values and moving between shapes (e.g. from a square to a circle).
- If a new layer is introduced, that layer will dissolve into existence.
- If a layer's animatable properties stay the same between two Frames, we won't animate that layer at all. This is great for things like status bars and ever-present menus.
- If you check the Fix Position when Scrolling checkbox for any Layers, we will add them to the list of Fixed layers. We treat Fixed layers differently when you Combine Smart Animate with Other Transitions.
- The Background color of a Frame is not included in a Transition.
Note: We don't support Smart Animate when opening an Overlay. This is because Overlays are treated as new Frames.
You can use Smart Animate when swapping between Overlays, if those Overlays have matching Layers.
Apply Smart Animate
There are two ways you can use Smart Animate in your Prototypes.
Note: It's currently not possible to add more than one Trigger to a Layer. This is something to bear in mind when trying to create Transitions in more than one direction.
One approach you can try is to create a transparent layer above your UI. This will act as a separate Hotspot, allowing you to apply a transition in the opposite direction.
Apply the Smart Animate Transition
You can select Smart Animate as a Transition to animate between two Frames.
We have three Frames, which have some matching layers between them. We want Smart Animate to animate the layers as we move between the Frames.
- Click on the Prototype tab in the Properties Panel.
- Select a Layer, Group or Frame in the Canvas. A Prototype node will appear on the right-edge.
- Click on the node and drag it to the next Frame to create a Connection.
- Define the Interaction in the Prototype tab. You can set the Trigger, Action and Destination.
- In the Animation section, select Smart Animate from the Transition Field.
- You can then apply Easing or change the Duration of the transition.
- Repeat for any other Frames in your Prototype.
- Click the Present icon in the toolbar to see the Prototype in Presentation View.
Our Prototype now moves smoothly between each Frame!
Combine Smart Animate with Other Transitions
You can also choose to Smart Animate Matching Layers as part of another Transition.
This allows you to set a default Transition. You can then enable Smart Animate matching layers.
We will then do the following:
- For any layers that don't match, we'll use the Transition you selected.
- For any layers that do match between Frames, we Smart Animate any differences.
Working with Fixed Layers? We treat fixed layers differently when using Smart Animate with other transitions.
- For Fixed layers that do match between Frames, we will not apply any transition.
- For Fixed layers that don't match between Frames, we will apply a dissolve transition. We will not apply the transition you selected.
- When using the Smart Animate transition, we will Smart Animate any Fixed layers.
Enable Smart Animate Matching Layers
Tip! Learn more about Prototyping terms in our Getting Started with Prototyping article.
- Create a Connection between two Frames in the Canvas.
- In the Prototype tab, define the Interaction. You can set the Trigger, Action and Destination.
- In the Animation section, select any Transition from the list (except for Smart Animate).
- Customize the rest of the Animation:
- Choose a Direction
- Apply Easing
- Adjust the Duration
- Check the box next to Smart Animate matching layers.
- Click the Present icon in the toolbar to see the Prototype in Presentation View.
If you don't check the Smart Animate matching layers box, we will apply your selected transition to every layer in the Frame.
This may result in some unexpected or undesirable results. Let's take a look at an example to see this in action!
We're building a Prototype of a mobile app. We have a status bar and a navigation bar that exist in all Frames. We want these to stay in place when we switch between tabs.
We've selected a Push Transition to move between Frames. We choose not to check the box next to Smart Animate matching layers.
When we view our Prototype, we can see that everything in our Destination Frame uses the Push Transition. This makes it pretty obvious that we're moving between separate Frames.
We head back to our Prototype and check the box next to Smart Animate matching layers.
When we view our Prototype now, we can see that the status and navigation bars stay in place, while the rest of our content uses Push. Perfect.
Things not working as expected? Check out our Tips for Smart Animation section below.
Tips for Smart Animation
Before Smart Animate, we didn't place much importance on Layer names. As Smart Animate is reliant on Layer name and hierarchy, this may require you to use a different approach.
We've outlined a few ways to troubleshoot unexpected Smart Animation results below.
- Naming behavior for Duplicate Layers
- View Matching Layers Between Frames
- Rename Layers
- Group Layers
- Slide In and Move In Transitions
- Layer Order and Hierarchy
Tip! Like our other Transitions, you can adjust the Duration of the Smart Animate transition - how long it takes to complete.
We recommend slowing down the animation while you're building your prototype. That way you can clearly see which transition is happening and make any adjustments.
Naming Behavior for Duplicate Layers
One quick way to create Frames for Smart Animate is to duplicate them. This keeps the naming consistent between each Frame. You can then add and remove layers to each Frame, as needed.
We will name Frames and Layers based on the way you duplicate or copy and paste them:
- When you duplicate a Frame, Object or Layer, we'll number these sequentially.
- Frames: Frame 1 > Frame 2 > Frame 3
- Frame (Preset): Frame Preset - 1 > Frame Preset - 2 > Frame Preset - 3
- If you copy and paste a layer within a Frame, we will also name them sequentially:
- Rectangle: Rectangle 1 > Rectangle 2 > Rectangle 3
- If you copy and paste a layer between Frames, then we will keep the same name
- If you Copy Rectangle 1 in Frame 1, we will Paste it as Rectangle 1 in Frame 2
View Matching Layers Between Frames
We've made it easy to identify layers or objects that exist - or match - between Frames.
In Prototype Mode, hover over an object or layer in the canvas. If it exists in any other Frames, we'll highlight it there too.
This applies to individual Layers, as well as Groups, Frames and Components.
You may have objects or layer that exist across Frames, but have different names in each.
Or, you may have the opposite problem - layers that all have the same name, which you don't want to match between Frames.
You can check your layer names in the Layers Panel.
- To rename a layer, double-click on it in the Layers Panel.
- You can also change the names of multiple layers at once using Rename Layers in Bulk. This allows you to add sequential numbers, or a suffix or prefix to layer names.
We match layers based on both their name, and their position in the hierarchy. This allows us to be more precise in deciding how we animate each object between Frames.
It also gives us a way to quickly un-match layers between Frames.
Let's take a look at an example!
Let's say that we have five (5) rectangles in each of our Frames. These rectangles contain different content between each Frame.
At the moment, they are all labeled Trip 1 to Trip 5 in the Layers Panel.
When we try apply a Push Transition, Smart Animate recognizes them as matching layers. Instead of them all coming in together, Figma applies Smart Animate to change their position.
To change this behavior, so it no longer Smart Animates, we can:
- Group the Trip in each Frame.
- Give each group a unique name e.g. Group A, Group B.
When we have another go with our Push Transition, Smart Animate no longer recognizes these as matching layers. Our content will Push in together, making our Prototype look much more realistic.
Slide In and Move InTransitions
A Slide In transition will offset and dissolve the current Frame, as it introduces the next one.
When you select Smart Animate matching layers, Figma needs to animate any matching layers between Frames.
This means we can no longer animate the entire destination Frame (B) over the initial Frame (A).
A side-effect of this behavior is that some layers may overlap during the transition. You can see this in our Prototype below:
To prevent this, you can add an opaque Frame or Rectangle underneath your other layers. This will create the background that your designs will sit above.
Note: We won't Smart Animate the Background of a top-level Frame. You will need to add a nested Frame or Rectangle to background of your Prototype Frames.
- In each Frame, add a new Frame (F) or Rectangle (R). You'll want this to take up the entire width and height of the existing Frame.
- Add a solid Fill to the rectangle. This needs to be a layer with a solid color and 100% opacity.
- Give the Frames or Rectangles different names between each Frame.
Now when we view our Prototype, all the new content in our Frame slides in together.
Layer Order and Hierarchy
Smart Animate takes into account the layer order, or hierarchy of your layers. This happens when looking for matching layers and when animating transitions.
Normally, Move In or Slide In will transition the entire destination Frame above the original Frame.
With Smart Animate matching layers, we look for any layers that match between Frames. This means we also take into account the hierarchy, or the order the layers appear, in each Frame.
This can cause some confusing or unexpected results, but if you know what to look out for, it's easy to fix!
Let's take a look at an example.
In our screenshot below, we can see there are two matching objects between our Frames (
Explorer 1 and
Explorer 2). These are the Status Bar and the Navigation.
If we have layers above any matching layers, Figma will animate them above the destination Frame. In
Explorer 1, we can see that we currently have some layers that appear above our matching layers.
We can see this play out in the following screenshot, taken from the middle of a Slide in transition. The Explorer logo from
Explorer 1 is above the map from
We can address this by moving our matching layers - Status Bar and Navigation - to the top of the hierarchy.
When we look at a screenshot of the new transition, we can see the
Explorer 2 Frame Slide in above the
Explorer 1 Frame.