Related Videos

• Prototype easing curves

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  Prototypes have many moving parts. Add easing presets, or customize the easing of transitions, to communicate movement, emotion, and make your prototype more like the real thing.

  Easing determines the acceleration of the transition between a starting frame and its destination, also known as keyframes, by using a mathematical function. Keyframes can be two frames in an interaction, like the transition from one screen to another, or the beginning and end states of a single frame, like an object changing color.

  In the example animations below, easing is represented by a curve on a graph where time is applied to the x axis and the transition, such as Move In, Slide, or Smart Animate is on the y axis. The keyframes are represented by the beginning and end points of the line of curve in the graph.

  Learn more about adding interactions to prototypes.

  Tip! Hover over the preview window in the Interaction Details panel to see a preview of your animation.

  Default easing curves

  Linear

  This is the default acceleration and is applied in a constant straight line. As objects in nature rarely move at a constant speed, linear curves can look unnatural or robotic.

  

  Ease In

  Creates an animation that starts slowly and accelerates as it reaches the end of its duration. This works well for smoothly transitioning objects out of view. One downside is it can feel sluggish.

  

  Ease Out

  Ease Out is the opposite of an Ease In curve, where the animation starts fast and slows down as it reaches the end of its duration. It works well for moving objects into view and reinforcing important visual information.

  

  Ease In And Out

  Starts the animation slowly, accelerates in the middle, and slows at the end of its duration. For most motion, it feels smooth and responsive, but can feel unnatural or too perfect when applied to everything.

  

  Ease In Back

  Ease In Back is when the animation goes past the initial keyframe’s value and then accelerates as it reaches the end. This creates a bounce in the animation that serves as an anticipatory action, preparing the audience for and reinforcing the main action. Much like Ease In, Ease In Back can work well for smoothly transitioning objects out of view.

  

  Ease Out Back

  Is the opposite of Ease In Back. The animation starts fast, then slows and goes past the ending keyframe's value. This creates a bounce in the animation that serves as a settle that creates a smooth ending transition for the main action. Similar to Ease Out, Ease Out Back works well for moving objects into view.

  

  Ease In And Out Back

  Starts the animation slowly as it overshoots the initial keyframe’s value, then accelerates quickly before it slows and overshoots the ending keyframes value. This creates an anticipatory bounce at the start, a quick motion, with a rebounding motion before the final state.

  

  Custom easing curves

  Select the Custom option from the list to manually set and adjust easing values. Figma will show a graph, or Bézier curve editor, based on the preset you have previously selected.

  You can use the Bézier curve editor to adjust the curve of an existing preset, or to create an easing curve of your own.

  You can copy and paste numerical values to other interactions to replicate easing. It's not possible to save a custom easing curve for future use.

  1. A cubic Bézier curve is defined by four points. These points are represented by the square perimeter in the graph.
  2. The graph's axes represent a curve on a graph where time is applied to the x axis and the transition, such as Move In, Slide, or Smart Animate is on the y axis.
  3. There are two keyframes that indicate the start and end state of the animation. These are fixed at 0,0 and 1,1. Click the keyframe to reset the Bézier handles.
  4. A continuous curve shows the object's values over the duration of the animation. This is the easing curve.
  5. The adjustable handles allow you to change the values of the curve. If you're customizing an easing curve with no handles, click and drag the keyframe to activate the handles.
  6. You can use this field to enter numerical values.

  

  Tip! You can use these numerical values when translating the Bézier curve to CSS notation: cubic-bezier(x1, y1, x2, y2)

  Note: It's possible to extend the curve beyond the graph's dashed perimeter. You can use this to create an anticipatory bounce at the beginning, or a rebounding effect at the end of the animation. The Ease In and Out Back preset shows both of these effects in action.

• Preserve scroll position in prototypes

  Before you start

  Who can use this feature

  Users on any team or plan can use scrolling overflow in their prototypes.

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

  In creating prototypes, we want to our interactions to feel as much like the real thing as possible. For some interactions, we need to provide an illusion that our designs are truly dynamic.

  The preserve scroll position setting lets you keep the same scroll location when you transition between screens. This applies to vertical scroll depth, as well as horizontal location.

  • Figma automatically preserves your scroll position for Smart Animate.
  • Preserve scroll position is optional for Instant or Dissolve animations.
  • Preserve scroll position in not available for Slide, Push, or Move animations.

  Vertical scroll

  In our example below, we want to show the full size of our content when a user clicks on the preview. We have two screens in our prototype:

  • Screen 2 shows the our newsfeed design with a preview of the element.
  • Screen 3 shows how the same page will look with the full size element.

  

  If we leave Preserve scroll position unchecked, the user can scroll down our prototype and click on our interactive element.

  Figma will take them to the next page in our prototype (Screen 3), but they will be taken to the very top of the frame.

  This makes it obvious to the user that we have moved to a different screen. The user now has to scroll down to view the full size element, breaking the illusion we've constructed or confusing them.

  

  If we check Preserve scroll position, the prototype remembers the user's scroll depth on the current frame.

  When the interacts with the prototype, Figma takes them to the same scroll depth on the next frame. From the user's perspective, our content looks to expand on the same page.

  

  Horizontal scrolling

  In our example below, we want users to be able to see a different visual state, when they click on an option in the gallery.

  • Screen 1 shows our newsfeed that lets users scroll left-to-right through a gallery of images.
  • Screen 2 shows us what happens when you select an option from the gallery. We add a border around the image and a plus icon in the center.

  

  If we don't check Preserve scroll position, the user can scroll down and across to view . If they click on an object, Figma will load Screen 2 at the top of the frame. The user will then have to scroll down and across to see that they have selected the last object.

  

  If we check Preserve scroll position, Figma remembers the user's position and takes them to the last object in its selected state.

  

• Guide to prototyping in Figma

  Before you start

  Who can use this feature

  Users on any plan

  Users with can edit access can create prototypes.

  Users with can view access can play back prototypes in Presentation view.

  Figma’s prototyping features allow you to create interactive flows that simulate how a user may interact with your designs.

  Prototypes are a fantastic way to:

  • Preview interactions and user flows
  • Share and iterate on ideas
  • Get feedback from collaborators
  • Test interactions with users
  • Present your designs to stakeholders

  Watch our video on prototyping below. Or, check out our Prototype & Collaboration Playlist on Youtube.

  Create connections

  1. Select the hotspot for the connection.
  2. Click the to create the connection
  3. Drag it to the destination

  

  Create interactions and animations

  1. Open the Prototype tab in the right sidebar
  2. Create interactions
  3. Set interaction details
  4. Apply an animation
  5. Preview your animation

  

  Adjust Prototype Settings

  1. Select a Device and Model
  2. Preview your prototype
  3. Select Background color
  4. Set the prototype's Starting Frame

  

  Learn more about prototyping

  Get started

  • Create prototype interactions and animations
  • Select a starting frame for your prototype
  • Customize your prototype device
  • Prototype actions, triggers and animations

  Advanced interactions

  • Create overlays in your prototypes
  • Create advanced animations with Smart Animate
  • Prototype scroll interactions with overflow behavior

  Share and collaborate

  • Set prototype Presentation View options
  • Share your prototype
  • View prototypes on a mobile device
  • Give feedback on prototypes with comments

  Glossary

  • A hotspot is where the Interaction takes place. A hotspot can be any object within the original fFrame e.g. a link, button, image or icon, etc.
  • The trigger determines what type of interaction with the hotspot will cause the prototype to advance. This could be a mouse or touch interaction e.g. tap, drag, click, hover etc.
  • The destination is where the transition ends. This must be a top-level frame - a frame that is added directly to the canvas - and not an object within a frame. If we think of moving from A to B, A is the hotspot and B is the destination.
  • Connections are the blue arrows or "noodles" that connect the hotspot to the destination. We apply the interaction and animation settings via the connection.
  • The action defines the type of progression is occurring in the prototype. For example, the action could be to navigate to another frame, or open an external URL.
  • The animation settings determine how the prototype moves from one frame to the other. You can control the type of animation, as well as the speed and direction.
  • A transition is the type of animation. This defines how the action moves to the destination.
  • The direction controls the direction that the transition comes from. Choose between left, right, top or bottom.
  • The duration controls the time it takes to complete the animation. The shorter the duration, the faster the transition. Select a duration between 1ms and 10000ms (10 seconds).
  • Easing affects the acceleration of the animation i.e. whether it starts slow or fast. This allows you to build animations that feel more natural.
  • Overlays are frames that appear above the current screen or frame. You can use overlays to create tool-tips, interactive menus, alerts or confirmations.
  • Overflow behavior allows you to define how your prototype responds to scrolling. This allows you to create more advanced user interactions e.g. carousels, galleries or interactive maps.
  • Choose which device will be shown when presenting your prototype. Define both the device and the model.
  • The background color lets you define the color in the background of your prototype.
  • If you have a prototype with portrait and landscape frames, you can select an Orientation. The orientation is set for the entire prototype. It's not possible to switch between portrait and landscape view within a prototype.
  • The starting frame is the first frame of your prototype. Build more than one prototype within a single file. Use this setting to choose which Prototype you would like to see in Presentation View. 
  • A preview will show you how something will look or work in the prototype. We show previews for both Animations and Prototype device settings.
• Set prototype device and starting frame

  Before you start

  Who can use this feature

  Users on any team or plan can use these settings.

  Anyone with can edit access to the file can adjust the presentation view settings. 

  Users can preview and interact with prototypes in Presentation view. You can choose how Figma presents the prototype using the prototype settings.

  Prototype settings

  Access and adjust your prototype settings in the Prototype panel of the right sidebar by clearing your selection in the canvas.

  1. Select a Device and Model
  2. Preview your prototype
  3. Select Background color
  4. Set the prototype's Starting Frame

  

  Tip! You can also access these setting by clicking the Show Prototype Settings button when editing a connection.

  Device

  Use Device settings to control how your prototype looks in Presentation view.

  Device

  Figma has a number of popular device presets. The dimensions of your prototype frames will define what options are available.

  • Frame preset: If you used a frame preset, Figma will select a device that matches that preset. You can select another device if desired. For example: if you used the iPhone 11 Pro Max preset, Figma will select the iPhone as the device too.
  • Custom Size (Fit) will automatically scale the design, so that it fits within the screen you are viewing the Prototype on.
  • Presentation Size (Full) will display the Prototype to a size that allows it to be displayed on the screen, in its entirety.

  Orientation

  Control the orientation of the device in Presentation view.  Choose from:

  • Portrait
  • Landscape

  Note: It's not possible to switch between orientations within a prototype. This is something to bear in mind if you have frames in your prototype across both orientations.

  Model

  Some devices offer variations on model. For example: the iPhone 11 Pro Max comes in four different colors. You can choose which color-way you would like to use.

  Use the Modal field to select 

  Depending on the device you selected, you can specify a certain Model.

  Preview

  View a Preview of how the device will look in Presentation view. 

  Background color

  Set the Background color of the prototyping screen. You'll see this color behind your selected device.

  Set this to a neutral color, or customize this with a brand color for extra polish.

  Starting frame

  If your file has any prototype connections between frames, Figma will only display frames with connections in Presentation view.

  If there are no prototyping connections, Figma orders frames as they are in the canvas, by row (left to right) then column (top to bottom).

  By default, Figma uses the first connection you create as the Starting Frame. You can change this to another frame in a few ways:

  • Prototype settings: Update the Starting Frame from the prototyping settings in the right sidebar.
  • Canvas: Click and hold the blue icon next to the current starting frame. Drag the icon to the new starting frame. This must be a top-level frame, a frame that isn't nested within another layer or frame.

  Note: If you enter Presentation view with nothing selected, your prototype will start from the set starting frame. If you select another frame in the Editor before presenting, your prototype will start on the selected frame. If you select another frame after presenting it won't impact what you see in presentation view.

• Prototype triggers

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  The Trigger determines what type of interaction with the hotspot will cause the Prototype to advance. This could be a mouse or touch interaction like tap, drag, click, and more.

  While most of these transitions are self-explanatory, we have a few tips for how you can use them.

  This article covers our Prototyping Triggers in more detail.

  On Click/On Tap

  Triggers the action when the user Clicks (desktop) or Taps (mobile) on a hotspot in your prototype. You can add click or tap triggers to lots of different elements in a screen.

  You can use them for navigation like opening links, using menus, or exploring websites. They can also be used when you need a user to click on buttons, fill in forms, or confirm and dismiss alerts.

  On Drag

  Allows you to perform an action when you drag an element on the screen. This can be the entire frame or a single element like a slider.

  You can use the On Drag in any direction: Left, Right, Up or Down. This is great for simple swipe gestures, or for more complex animations like a drag to refresh.

  Drag allows you to move back and forward through the transition. This creates a continuum, instead of performing the action after a swipe gesture.

  While Hovering

  Triggers the action when you hover over the hotspot. You can use this to replicate tooltips, on-screen prompts, or changes in state.

  We will return the user to the original frame when they move the cursor off the hotspot. This makes it a great interaction when you don't want to take users away from the current screen.

  Note: We change While Hovering triggers to On Tap triggers when being tested on an actual mobile device.

  While Pressing

  Triggers the action when you click and hold the mouse or trackpad on a desktop. Or, when you tap and hold on a mobile device.

  You can use this trigger for navigating drop-down menus, or replicating long-press interactions like viewing a preview using 3D Touch on iOS.

  When released, we will take the user back to the original Frame. This makes it great for Overlays that capture temporary interactions or state changes.

  Keyboard and Gamepad Shortcuts

  The Keyboard / Gamepad trigger lets you replicate interactions with a keyboard shortcut. This applies to user inputs from keyboards, controllers, and gamepads.

  A trigger can be a single key or button, or a combination of keys.

  For example: a trigger can be based on the user pressing the Enter key or ✕ button on a controller. Or using a shortcut like Shift – K.

  Note: We officially support the Xbox One, PS4, and Nintendo Switch Pro Controllers. Other controllers may work, but buttons displayed in Figma may not accurately reflect the controller.

  Mouse Enter

  This shows the Destination frame when the mouse enters the hotspot area. This could be a small area like a button, or an entire section of the screen.

  You could use this to expose the options in a drop down menu as your mouse enters the field. The menu will stay open until the user performs another interaction like selecting an item or clicking out of the field.

  Note: We don't reverse the transition on leaving the hotspot, so you will need to set up the next step in the prototype.

  Mouse Leave

  This shows the Destination frame when the cursor leaves the hotspot area.

  You could use this for on-screen prompts, like an alert when you haven't completed a field or checked a box.

  Mouse Down (Touch Down)

  This triggers the Destination frame when you first press the mouse or touch pad. For for mobile devices, this is when the user's finger first touches the hotspot.

  Mouse Up (Touch Up)

  This triggers the Destination frame when you release the mouse or touch pad. For for mobile devices, this is once the user's finger no longer touches the Hotspot.

  • Apply the Mouse Down trigger to the menu header to open an Overlay.
  • Apply the Mouse Up interaction to the menu item in the Overlay.
  • When they release the mouse, we take the user to the relevant Frame.

  Tip! Use the Mouse Down and Mouse Up triggers together to replicate a user navigating a drop-down menu.

  After Delay

  The After Delay trigger allows you to trigger an action after the user has spent a certain amount of time on a given frame. You will need to set the duration of the delay in milliseconds (ms). You can only apply this to a top-level Frame, not a specific layer or object.

• Prototype actions

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  The action defines the type of progression is occurring in the prototype. For example, the action could be to Navigate To another frame, or open an external URL.

  Learn more about building prototypes with interactions and animations →

  Action types

  Navigate To

  This is a simple action which takes you from one frame in a prototype to another. This is the most common type of action to use when moving between entire screens.

  Open Overlay

  This action opens the Destination frame above the current frame. This can be used to display a modal, tooltip, or alert—from a button or other object in the design.

  Swap With

  The Swap With action allows you to replace one frame with another. This will behave similarly to the Navigate To option, when triggered from a hotspot in a regular frame.

  If you apply Swap With to a hotspot in an overlay, it will replace (or swap) the current overlay with the new Destination frame. The new overlay will retain the same overlay settings as the original.

  Note: Using Swap With won't add that frame to the prototype's history. If you’d like a user to be able to use the Back action to move between overlays, we recommend using the Navigate To option instead.

  Back

  This allows you to navigate back to the previous screen. This is perfect for simulating the Back button in your Prototypes.

  Close Overlay

  This action allows you to close or dismiss any overlays that have appeared over the original frame. You can use this to replicate an on-screen prompt or alert being accepted or dismissed.

  Open Link

  This allows you to direct the user to a URL outside of the prototype. This is great for external links, or additional resources that aren't available in the main navigation.

  Enter your URL in the field provided, once you select this option.

  Tip! When you click on an Open URL hotspot, the link opens in a new tab. If this is a link to an external website, the user will be notified they are leaving Figma. You can use the checkbox provided to skip this jump page in the future. This setting will only be saved on the current device.

• Prototype animations

  Before you start

  Who can use this feature

  Users on any team or plan.

  Users with can edit access can create prototypes.

  New to Prototyping? Check out our Getting Started with Prototyping guide.

  Animations can be used to create smooth transitions between pages and define the behavior for actions like expanding a menu, swiping between pages, or opening a gallery.

  Instant

  The Instant transition will immediately display the Destination Frame, when the hotspot is interacted with (clicked, hovered over, or pressed).

  

  Dissolve

  The Dissolve transition will fade in the Destination frame, on top of the original frame.

  Supports:

  • Duration
  • Easing

  

  Smart Animate

  Smart Animate looks for matching layers that exist across multiple frames. For layers that match, we recognize what's changed and apply transitions to seamlessly move between them.

  Supports:

  • Duration
  • Easing

  

  Move In / Move Out

  The Move transition will slide the Destination frame into or out of view, above the original frame.

  Supports:

  • Easing
  • Direction
  • Duration

  

  Push

  The Push transition will push out the original frame, as the Destination frame is moved into view. This is the perfect transition for replicating a swiping gesture.

  Supports:

  • Direction
  • Easing
  • Duration

  

  Slide In / Slide Out

  The Slide will move the Destination frame into or out of view. Slide will slowly offset the frame as it dissolves, while the Move transition keeps the original frame stationary.

  Supports:

  • Direction
  • Easing
  • Duration

  

  Tip! Use prototype easing curves to give your animations a unique and natural feel.

• Prototype interactions and animations

  Before you start

  Who can use this feature

  Users on any team or plan can create prototypes.

  Anyone with can edit access to a file can create prototypes.

  Anyone with can view access to a file, or can view prototypes only access, can view prototypes.

  Learn how to preview your design and prototypes in Presentation View.

  Prototypes replicate how users might interact with your designs. You can make connections between frames to create flows, or pathways, through an interactive design.

  Create a connection

  The connection consists of three parts:

  • Hotspot: where the user's interaction will take place. A hotspot can be the frame itself, or an object within the frame. You can create a hotspot on anything, like a button, icon, or heading.
  • Connection: the arrow or "noodle" that connects the hotspot to the destination. Both the Interaction and Animation are determined through the connection.
  • Destination: the next step in our prototype where a connection ends. The destination must be a "Top-level" frame and not an object within the frame.

  Create a connection:

  1. Navigate to the Prototype tab of the right sidebar.
  2. Select a layer or object for the connection's hotspot.

  In our example below, we add a hotspot to the frame on the left. The connection takes us to the destination, which is the frame on the right.

  

  What are top-level frames? Frames you have added directly to the canvas. In a prototype, this would be an individual screen in your design.

  In Figma, you can place a frame within another frame. We call this process nesting. For Figma to consider a frame as a top-level frame, you must not place it within another Frame.

  Top-level frames have bolded names in the Layers panel of the left sidebar.

  Learn more about parent-child-sibling relationships of frames in Figma →

  Create an interaction

  Once you have created a connection, you can define the type of interactions users can have with it. You're able to create multiple interactions from the same layer or object.

  1. Navigate to the Prototype tab of the right sidebar.
  2. Select a layer or object for the connection's hotspot.
  3. Click the on the right of the frame's bounding box and drag it to the destination frame. You can also click the in the Interactions section of the Prototype panel, then select the destination frame using the dropdown menu.
  4. Once the connection has been made, use the Interaction Details panel to adjust the trigger, action, and destination.

  Note: A single object can have:

  • Any number of Key[board]/Gamepad and Drag interactions. This enables you to use multiple drag directions and keyboard/gamepad triggers.
  • One of each of the following interactions:
    • On Click / On Tap
    • While Hovering
    • While Pressing
    • Mouse Enter
    • Mouse Leave
    • Mouse Down / Touch Press
    • Mouse Up / Touch Release
    • After Delay

  Trigger

  The trigger defines what type of interaction will cause the prototype to advance forward. This could be a mouse click, touch gesture, or the time elapsed in the current frame.

  Figma has nine triggers available:

  • On Click / On Tap
  • On Drag
  • While Hovering
  • While Pressing
  • Key[board]/Gamepad 🕹
  • Mouse Enter
  • Mouse Leave
  • Mouse Down / Touch Press
  • Mouse Up / Touch Release
  • After Delay

  Learn more about Figma's prototyping triggers →

  Action

  The action defines what happens when the user interacts with the hotspot. This could mean moving to another frame, engaging an overlay, or opening a link.

  Figma has six actions:

  • Navigate To
  • Open Overlay
  • Swap With (Overlay)
  • Back
  • Close Overlay
  • Open URL

  Learn more about Figma's prototyping actions →

  Destination

  The destination is the last step in a prototype interaction. This could be another screen in the prototype, or an overlay that appears above the current screen.

  Use the Destination field to select the frame that specific interaction will end on. Or, click on the connection in the canvas and drag it to the next frame. Figma will make that next frame the destination.

  Adjust the animation

  The Animation settings determine how the prototype moves from one Frame to the other.

  1. Select a Transition type
  2. Choose the Direction the animation will come from
  3. Adjust the Easing of the animation
  4. Set the Duration of the animation
  5. Decide whether to Smart Animate matching layers
  6. View a preview of the animation

  

  Animation

  Figma has 8 animations available:

  1. Instant
  2. Dissolve
  3. Smart Animate
  4. Move In
  5. Move Out
  6. Push
  7. Slide In
  8. Slide Out

  Learn more about Figma's prototyping transitions →

  Animation settings

  You can then adjust a few settings related to the transition:

  Direction

  Direction controls which way you want the transition to move in. Choose between Left, Right, Down, and Up.

  Easing

  Easing determines the acceleration of the transition between a starting frame and its destination, also known as keyframes, by using a mathematical function. Keyframes can be two frames in an interaction, like the transition from one screen to another, or the beginning and end states of a single frame, like an object changing color.

  Default presets for easing animations include:

  • Linear
  • Ease In
  • Ease Out
  • Ease In and Out
  • Ease In Back
  • Ease Out Back
  • Ease In and Out Back
  • Custom

  Learn more about Figma's prototype easing options →

  Duration

  Duration controls how long it takes to complete the Transition. You can choose a duration between 1ms and 10000ms (10 seconds).

  Smart Animate matching layers

  Smart Animate looks for matching layers, recognizes differences, and animates layers between frames in a prototype. Check this box to apply the Smart Animate transition to any layers that match between frames.

  → Learn more about creating advanced animations with Smart Animate

  Preserve scroll position

  Preserve scroll position allows you to maintain the same scroll location when you transition between two screens.

  This applies to scroll depth in a vertical scroll, as well as the user's location inside a horizontal scrolling element.

  • Figma automatically preserves your scroll position for Smart Animate.
  • Preserve scroll position is optional for Instant or Dissolve animations.
  • Preserve scroll position in not available for Slide, Push, or Move animations.

  Learn more about Preserve scroll position →

  Define the overflow behavior

  Overflow behavior allows you to define how your prototype responds to scrolling. Use Overflow behavior to add vertical and horizontal scrolling, or multi-directional panning to your prototype.

  You can only apply overflow behavior to frames and components.

  We have 3 overflow behaviors available:

  1. Vertical Scrolling
  2. Horizontal Scrolling
  3. Vertical and Horizontal Scrolling

  Learn more about overflow behavior →

  Now that you've built your prototype, you can view or share it. Check out our Preview designs and prototypes in Presentation View article.

• Create advanced animations with Smart Animate

  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.

  Things to note

  • Figma doesn't support Smart Animate for changes to Effects, or moving between shapes. If a property isn't supported, Figma will apply a default dissolve transition.
  • Figma doesn't support Smart Animate for overlay actions. This is because Figma treats overlays as new frames. You can use Smart Animate when swapping between overlays, if those overlays have matching layers.
  • If you introduce a new layer in the destination frame, Smart Animate will dissolve the layer into view.
  • If a layer's properties stay the same between two frames, Figma won't animate that layer at all. This is great for status bars and menus, and interactions when you don't want to move to a different UI.
  • If you check the Fix Position when Scrolling checkbox for any layers, Figma will add them to the list of Fixed layers. Smart Animate handles layers differently when you combine Smart Animate with other transitions.

  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.

  Tip! We recommend increasing the duration while building your prototype. This lets you see what's happening and make any adjustments.

  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.

• Create overlays in your prototypes

  Before you start

  Who can use this feature

  Anyone on any team or plan

  Anyone with can edit access to the file can create and edit prototype connections.

  New to Prototyping in Figma? Check out our Getting Started with Prototyping and Build Prototypes with Interactions and Animations articles.

  Prototypes often require transitions between screens in a design. For some interactions, you may want to keep the user on the same screen, but show more information.

  Overlays allow you to show new content or information above the current screen in a prototype. Use overlays to prototype:

  • Alerts or confirmations
  • Interactive hamburger menus
  • Tooltips and additional information
  • On-screen keyboards

  Overlay actions

  In a prototype connection, an action usually takes the user from A to B. When the action is an overlay, Figma will show the overlay above the current screen.

  Figma usually applies interaction settings to just that the connection. When you create an overlay, Figma applies those settings to the overlay itself, not the connection.

  This allows you to apply those settings once and reuse that overlay across your prototype.

  Tip! You can create interactions between overlays using the Swap With action. Learn more in the Swap between overlays section below.

  Create an overlay

  You create an overlay when you define the interaction of a connection. You can trigger an overlay from any object, layer, group or frame.

  The overlay itself needs to be in a frame.

  1. Click the Prototype tab in the right sidebar.
  2. Hover over the object you want to start the overlay from. Click on the prototype node and drag a connection to the frame you want to become the overlay.
  3. Now you can customize the interaction. There are three aspects of the interaction, the trigger, action and destination.
     1. Select what kind of interaction will trigger the animation.
     2. Select Open Overlay from the actions.
     3. Figma will determine the Destination based on where the connection ends. For this interaction, you want this to be the overlay frame.
        

  There are a few aspects of an overlay that you can customize:

  1. Position: the location of the overlay relative to the original frame. Choose from 7 default options, or set a manual position.
  2. Close when clicking outside: Check this box to dismiss the overlay when a user clicks outside the overlay's dimensions.
  3. Add background behind overlay: Check the box to add a background color behind the overlay and in front of the current frame. Set both the color and the opacity.
     
  4. In the Animation section, customize how the overlay will appear. Select the (1) transition and any additional settings, including (2) direction, (3) easing, and (4) duration. Learn how to build prototypes with interactions and animations.
     
     

  Tip! Add GIFs to your overlays to simulate more advanced animations. GIFs show up as static images in the Editor, but playback as GIFs in Presentation View.

  Swap between overlays

  When working with overlays, you can choose the Swap With action. This allows you to keep the existing settings while you swap one overlay for another.

  In our example below, we've used Swap With to show a user interacting with our in-app help menu.

  1. The user clicks on the help icon, which opens the first overlay (Help menu).
  2. They select the Get Help option from the menu.
  3. We replace the Help menu overlay with a Chat window overlay.

  

  Note: Figma doesn't record Swap With actions in a prototype's history. When you create a Back action from a Swap With transition, Figma will take you back to the previous screen, not the previous overlay.

  Use Swap With

  1. Select the first overlay in the canvas.
  2. Open the Prototype tab in the right sidebar.
  3. In the Trigger field, choose the type of interaction you want to use as the trigger.
  4. In the Action field, select Swap With.
  5. In the Destination field, select the overlay you'd like to swap to.
  6. Customize the Animation with transition, direction, easing, and duration settings.
  7. Preview your overlay in Presentation view.

  Note: You can't set a different position for the new overlay. Figma will place the new overlay in the same position as the original overlay.

  Edit or delete an overlay

  Unlike other actions, overlay settings are applied to the overlay and not the connection. This means you can update the overlay's settings in one place.

  You can only edit or remove an overlay in Prototype mode.

  Edit overlay

  1. Identify an overlay using the blue icon. This will appear next to the frame in the canvas.
  2. Click the icon to view overlay's settings in the right sidebar.
  3. Make any changes to the overlay, as required.

  Tip! You can also access the overlay settings by clicking on a hotspot, or on an arrow from one of the connections.

  Delete Overlay

  There are a few ways to delete an overlay:

  • Click on the connection arrow and drag it to an empty part of the canvas.
  • Click the icon to select the overlay, then press the Delete key.
  • Remove all connections on the current page. Right-click on a connection and select Remove All Connections.