Before you start

Who can use this feature

Users on any team or plan

Users with can edit access to a file can create and edit prototypes.

Users with can view access to a file or prototype can view prototypes.

Smart animate looks for matching layers, recognizes differences, and animates layers between frames in a prototype.

You can select Smart animate from the list of transitions, when building a prototype. You can also apply Smart animate with other transitions to create seamless animations.

Smart animate allows you to quickly create advanced animations. 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

Learn more about how we built smart animate in our Blog post: Announcing smart animate.

Supported properties

Smart animate looks for matching layers that exist across multiple frames. Figma takes into account both the layer's name and where it sits within the hierarchy.

For layers that match between frames, Figma recognizes what's changed and applies transition to animate between them.

You 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.

Scale

If an object changes in size between frames, Figma will animate it shrinking or growing.

Position

Figma recognizes if an object's location, the x and y co-ordinates, have changed. It will then animate the object moving from its current position, to its position in the destination frame.

Opacity

Smart animate can also recognize a layer or object's opacity. You can adjust opacity to make an object to appear or disappear between frames.

Set the opacity of the layer to 0%, instead of toggling the layer visibility. Figma will apply a dissolve transition to animate the layer's opacity.

You can adjust opacity through a layer's Fill properties, as well as through the Layer property. Smart animate will apply to both.

We recommend adjusting the entire layer's opacity. Adjust the opacity Layer setting in the Design tab of the right sidebar.

Rotation

Smart animate also takes the layer's rotation and orientation into account.

You can rotate an object using the rotation field in the right sidebar or in the canvas itself. Hover over the corner bounds of an object until the rotation cursor appears.

Rotate a single layer at once, or rotate a group of them around a single anchor point.

Fill

Figma will smart animate any changes to an object's fill. This allows you to animate changes between solid colors, gradients and even image fills.

Apply smart animate

There are two ways you can use smart animate in your prototypes. As a stand alone transition, or by using Smart animate matching layers with another animation.

Smart animate

Select Smart animate in the transition field to animate between two frames.

1. Open the Prototype tab in the right sidebar.
2. Select layer, group, or frame in the canvas. A connection node will appear on the right-edge.
3. Click on the node and drag it to the next frame to create a connection.
4. Define the Interaction in the right sidebar by choosing a trigger and action. Figma will set the second frame as the destination.
5. In the Animation section, select Smart animate from the transition field.
6. Apply Easing to the transition, or change the Duration (optional).
7. Repeat for any other frames you want to smart animate.
8. Click the in the toolbar to open the prototype in Presentation View.

In our example below, we have three frames with some matching layers. We want smart animate to animate removing the Abel Tasman Coast Track from our list of favorites.

Smart animate now moves us smoothly between each frame in our prototype!

Smart animate matching layers

If you want to smart animate some layers in your prototype while using another main transition, you can check a box to Smart animate matching layers.

Figma treats fixed layers differently when using smart animate with other transitions.

• Layers that don't match: Figma will use the main transition you select.
• Layers that do match: Figma will Smart animate any differences for supported properties.
• Fixed layers that do match: Figma won't apply any transition.
• Fixed layers that don't match: Figma will apply a dissolve transition instead of the transition you select.

To use Smart animate matching layers, check the box in the right sidebar when adjust the animation:

In our example below, we have a status bar and navigation that exist across all three 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 screens in a prototype.

If we check the box next to Smart animate matching layers, our status bar and navigation stay in place, while the other content uses Push.

Tips for Smart Animation

Before smart animate, Figma 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 animate results below.

Layer names

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.

Figma names frames and layers based on the way you duplicate or copy and paste them.

• Within a frame: Figma numbers layers them sequentially. For example: Frame 1, Frame 2 etc.
• Between frames: Figma uses the same name. For example: If you copy Rectangle 1 from one frame, Figma will paste it as Rectangle 1 in the next frame.

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.

You can view and update your layer names using the Layers panel in the left sidebar. Learn how to rename layers in bulk.

View matching layers

Figma has also made it easier to identify layers or objects that exist - or match - between frames. This applies to all layers, groups, frames, and Components.

1. Open the Prototype tab in the right sidebar.
2. Hover over an object or layer in the canvas.
3. Figma will highlight that layer in any other frames it exists in.

Layer order and hierarchy

Smart animate and Smart animate matching layers take into account the layer order, or hierarchy of your layers.

Normally, Move in or Slide in will transition the entire destination frame above the original frame. With smart animate matching layers, Figma will move or slide in layers based on their hierarchy, which can cause some confusing or unexpected results.

In our screenshot below, we have 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 our screenshot below, we can see layers from Explorer 1 appear above the destination frame.

By moving our matching layers to the top of the hierarchy instead, we can make sure the entire destination frames slide above the original frame.

Group layers

To be more precise in deciding what to smart animate, Figma matches layers based on their name and hierarchy. This also lets you quickly un-match layers between frames.

Let's say that we have five rectangles in each of our frames. These rectangles contain different content between each frame. We labeled them as Trip 1 to Trip 5 across all three frames.

When we try apply a Push transition, smart animate recognizes them as matching layers. Instead of treating these rectangles as new content, Figma smart animates the change to their position.

To change this behavior, we can group the rectangle trips in each frame and give them a unique name.

When we preview our transition, smart animate no longer recognizes these as matching layers. Our content will Push in together, making our Prototype look much more realistic.

Smart animate with Slide in and Move in

There are a few things to consider when using Smart animate matching layers with Slide or Move transitions.

When selected, Figma will animate any matching layers between frames. This means Figma can't animate the entire destination Frame (B) over the initial Frame (A), like it normally would.

Figma also doesn't include a frame's fill as part of the animation. This can cause layers to overlap, making the transition look messy. 

To prevent this, we can add a rectangle with a solid fill behind our other layers. Now, when we view our prototype, the content in each frame slides in together.