Related Videos

• Guide to prototyping in Figma

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access can create prototypes.

  Users with 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

  Define the paths and interactions that make up your prototype:

  1. Open the Prototype tab in the Properties Panel
  2. Choose an interaction
  3. Apply an animation
  4. Preview your animation
  5. Customize the Overlay
  6. Define the Overflow behavior
  7. Adjust the Prototype settings

  

  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 starting frame and device

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can edit prototype settings.

  When we have nothing selected and check in the  Prototype tab, we can access our Prototyping Settings.

  These settings determine how our Prototype will look in Presentation View.

  From the Prototype Settings we can:

  1. Select a Device
  2. Select the Model of Device
  3. Choose an Orientation
  4. View a Preview of how this will look in Presentation View
  5. Select a Background Color
  6. Choose the Starting Frame

  

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

  Device

  We can use the  Device settings to choose a device for our Prototype.

  Device

  We have a number of popular device options available. We also have a couple of options based on the dimension of your Prototype's Frames:

  • If you're using one of our Frame presets (e.g. iPhone X), we'll select the Device which matches your Frame.
  • 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.

  Model

  Depending on the  Device selected, you may also be able to specify a certain model Model in the Prototype Settings.

  Preview

  We can see a Preview of how this will look in Presentation View.

  Orientation

  The Orientation determines which way your Prototype is presented. You can choose to view your Prototype in Portrait or Landscape.

  The Orientation is set for the entire Prototype. It's not possible to switch between Portrait and Landscape view within a Prototype. This is something to bear in mind if you have Frames that are made up of Frames in both Portrait and Landscape.

  Background Color

  You can also set the Background Color of the Prototyping screen. You'll see this behind whichever Device you have selected.

  You can set this to something neutral, or customize this with a brand or company color for extra polish.

  Starting Frame

  We will determine the  Starting Frame based on the first connection you create.

  You can set or update the  Starting Frame from the Prototyping Settings. Select the desired Frame from the drop-down to apply.

  Tip! You can also move the Starting Frame icon on the Canvas itself.

  1. Click on the Starting Frame icon.
  2. Drag the icon to another Frame in your Prototype. This could be a Prototype on a separate page within the File.
  3. Release to confirm.

  Ready to share your Prototype with others? Learn more about setting your prototype's Presentation View options.

• Prototype triggers

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Prototypes

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

  This article covers our Prototyping Triggers in more detail. 

  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. Prototyping Glossary

  Check out our Build Prototypes with Interactions and Animations article for more information.

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

  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: opening links, using menus or exploring websites. Or, when you need input from 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 Trigger to On Tap Triggers when 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. e.g. viewing a preview 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 e.g. selects an item, or clicks 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.

  Tip! You may want to use the Mouse Down and Mouse Up Trigger together, to replicate a user navigating a drop-down menu.

  • 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 month, we take the user to the relevant Frame.

  After Delay

  After Delay 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 Plan

  Users with Edit access to a File can create and edit Prototypes

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

  This article covers our Prototyping Actions in more detail. 

  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. Prototyping Glossary

  Check out our Build Prototypes with Interactions and Animations article for more information.

  Navigate

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

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

  If you apply Swap to 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 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 URL

  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 URL will be opened in a new tab. If this is a link to an external website, the user will be notified that 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 Plan

  Users with Edit access to a File can create and edit Prototypes

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

  This article covers our Prototyping Actions in more detail. 

  A Transition is a type of Animation. This defines how the Action moves to the Destination. Prototyping Glossary

  Check out our Build Prototypes with Interactions and Animations article for more information.

  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 Move transition keeps the original frame stationary.

  Supports:

  • Direction
  • Easing
  • Duration

  

• Build prototypes with interactions and animations

  Before you start

  Who can use this feature

  Users on Any Plan can create Prototypes

  Users with Edit access to a File can create Prototypes

  Users with View access to a File can view Prototypes

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

  Tip! Want to change how your Prototype looks in Presentation View? Check out our Adjust your Prototype Settings article.

  The Anatomy of a Connection

  Prototypes replicate how users might interact with our designs. We can build Connections between Frames to create these flows, or pathways.

  The Connection consists of three parts:

  1. Hotspot
  2. Connection
  3. Destination

  

  We added a Hotspot to the Frame on the left. The Connection takes us to the Destination, which is the Frame on the right.

  You can link Frames together using Hotspots and Connections.

  A Hotspot is where the user's Interaction will take place. A Hotspot can be the Frame itself, or an Object within the Frame. You could create a Hotspot on anything e.g. a button, icon, or heading.

  The Connection is the arrow or "noodle" that connects the Hotspot to the Destination. We determine both the Interaction and Animation through the Connection.

  The Destination is the next step in our Prototype - where this specific Connection ends. The Destination must be a "Top-level" Frame and not an Object within the Frame.

  What are Top-level Frames? They are Frames that you have added directly to the Canvas. In a Prototype, this would be a screen in your design.

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

  We bold Top-level Frames in the Layers Panel.

  Choose an Interaction

  Once you have created a Hotspot, you can define the type of Interaction.

  Like a Connection, an Interaction consists of three parts:

  1. Trigger
  2. Action
  3. Destination

  

  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.

  We have nine (9) Triggers available:

  • On Click / On Tap

  • On Drag

  • While Hovering

  • While Pressing

  • Key/Gamepad 🕹✨ (New! Learn more about keyboard and gamepad triggers)

  • Mouse Enter

  • Mouse Leave

  • Mouse Down (Touch Press)

  • Mouse Up (Touch Release)

  • After Delay

    Learn more about our Prototyping Triggers

  Action

  The Action defines what happens when the user triggers the Hotspot. This could mean moving to another Frame, engaging an Overlay, or opening a link.

  We have six (6) Actions available:

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

  Tip! Learn more about our Prototyping Actions

  Destination

  As we learned above the Destination is the next step in our Prototype.

  Use this field in the Prototype Tab to choose which Frame is the Destination. Or, click on the Connection in the canvas and drag it to a new Destination.

  Apply an Animation

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

  Within the Animation settings you can:

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

  

  Transition

  We have eight (8) Transitions available:

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

  Tip! Learn more about our Prototyping Transitions

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

  • Direction controls which direction you want the transition to move in. You can choose between: Left → Right ← Down ↓ Up ↑
  • Objects rarely move at a constant speed. Easing controls the acceleration of the Transition i.e. whether it starts slow or fast. This allows you to build Transitions that feel more natural.
  • Duration controls how long it takes to complete the Transition. You can choose a Duration between 1ms and 10000ms (10 seconds).
  • Choose whether to Smart Animate matching layers to automatically transition any layers that match between Frames.

  Define the Overflow Behavior

  Overflow Behavior allows you to define how your Prototype responds to scrolling. This allows you to create more advanced user interactions within a Prototype.

  You can only apply Overflow Behavior to Frames. This could be a Top-level Frame, or a Frame that's nested within your Prototype. You can only apply one behavior to each Frame.

  

  We have three (3) Overflow Behaviors available:

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

  Tip! Learn more about using Overflow Behavior

  Video Tutorial: Presentation View and Prototyping

  Next! Now that you've built your Prototype, you can view or share it! Check out our View a Prototype with Presentation View article for more information.

• Create advanced animations with Smart Animate

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create new prototype connections

  Users with View access to a Prototype can view an animated Prototype.

  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

  

  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.

  Supported properties

  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.

  Scale

  If an object changes in size between Frames, we will animate it so that it shrinks or grows.

  Position

  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.

  Opacity

  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.

  Rotation

  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.

  Fill

  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.

  • Apply Smart Animate as a transition
  • Combine Smart Animate with other transitions

  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 Smart Animate as a 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.

  1. Click on the Prototype tab in the Properties Panel.
  2. Select a Layer, Group or Frame in the Canvas. A Prototype 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 Prototype tab. You can set the Trigger, Action and Destination.
  5. In the Animation section, select Smart Animate from the Transition Field.
  6. You can then apply Easing or change the Duration of the transition.
  7. Repeat for any other Frames in your Prototype.
  8. 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

  Learn more about Prototyping terms in our Getting Started with Prototyping article.

  1. Create a Connection between two Frames in the Canvas.
  2. In the Prototype tab, define the Interaction. You can set the Trigger, Action and Destination.
  3. In the Animation section, select any Transition from the list (except for Smart Animate).
  4. Customize the rest of the Animation:
     1. Choose a Direction
     2. Apply Easing
     3. Adjust the Duration
  5. Check the box next to Smart Animate matching layers.
  6. 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.

  Note: 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.

  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.

  Rename layers

  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.

  Group layers

  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:

  1. Group the Trip in each Frame.
  2. 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 In transitions

  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.

  1. 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.
  2. Add a solid Fill to the rectangle. This needs to be a layer with a solid color and 100% opacity.
  3. 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 Explorer 2.

  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.

• Create overlays in your prototypes

  Before you Start

  Who can use this feature

  Users on Any Plan

  Users with Edit access to a File can create and edit Overlays.

  New to Prototyping in Figma? We recommend reading the following articles:

  • Getting Started with Prototyping
  • Build Prototypes with Interactions and Animations

  When you are building a Prototype, you'll often want to take users from one Frame to another.

  In some interactions, you may want to display extra information without taking the user anywhere.

  Overlays allow you to present new content or information to the user, above the current Frame.

  Build the following interactions using Overlays:

  • Pop-up modals, like alert or confirmation messages
  • Hamburger menus
  • Tooltips
  • On-screen keyboards

  Overlay Actions

  Overlays are a type of Action. In a traditional Prototyping Connection the Action takes the user from A to B.

  In an Overlay, we keep the user on the same Frame and display the Overlay above it.

  Customize a few aspects of the Overlay:

  • The Position of the Overlay.
  • If we display a Background Color between the Overlay and the original Frame .
  • If the Overlay disappears when you click on it. Or, if the user can interact with the Overlay and navigate to other parts of the Prototype.

  In a typical Interaction, we apply your settings to the Connection. In an Overlay, Figma appliwa your settings to the Overlay's Frame and not the Connection.

  This allows you to create an Overlay, apply your settings, then reuse it across your Prototype.

  Tip! You can even create Prototypes where interacting with one Overlay opens another Overlay. Learn more in the Swap Between Overlays section below.

  Create an Overlay Connection

  Overlays are a type of Action. You choose the Overlay Action when you define the Interaction. Check out our Build Prototypes with Interactions and Animations article for more information.

  Trigger an Overlay from an Object, Layer, Group or Frame.

  1. Click the Prototype tab at the top of the Properties Panel.
  2. Click on the object you’d like to trigger the Overlay from. This will become the Overlay's Hotspot.

     

  3. A Prototyping node will appear on the Object. Click and drag the node to the Overlay Frame to create the connection.
  4. Customize the Interaction in the Prototype tab. 
     
     1. Select the Trigger you’d like to use. We have nine (9) available:
        • On Click / On Tap
        • On Drag
        • While Hovering
        • While Pressing
        • Mouse Enter
        • Mouse Leave
        • Mouse Down (Touch Press)
        • Mouse Up (Touch Release)
        • After Delay
     2. Use the Action field to select Open Overlay from the options.
     3. Update the Destination - this is the Overlay Frame.
        
  5. Customize the properties of the Overlay:
     1. The Position of the Overlay. Use the drop down to select from the full list of options. Or, use the icons to select one of our three (3) default options.
     2. Check the box next to Close when clicking outside to dismiss the overlay when inactive.
        
        Note: If you don't check this box, then you will need to create a transition that allows the user to dismiss the Overlay. Use the Close Overlay preset in the Action settings. Or, take users to a separate Frame entirely.
     3. Decide if you want to Add background behind the overlay. Select a color using the swatch and Color Picker.
  6. In the Animation section, you can customize the Transition for that Connection.
     1. Select a Transition. Some transitions will have additional settings:
     2. Select the Direction the Transition is coming from.
     3. Set the Duration - the time it takes to complete the Transition.
     4. Apply Easing to control the momentum of the Transition.

     

     Learn more about Transitions in our Build Prototypes with Interactions and Animations article.

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

  Swap between Overlays

  When you are working with Overlays, you can also use the  Swap With action. This allows you to swap one Overlay for another, while retaining the original Overlay's settings.

  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 with a Chat window.

  

  Note: We don't record Swap With Actions in the Prototype's history. This allows you to create "Back" Actions that go back to the previous screen, versus the previous Overlay.

  Use Swap With

  1. In the Canvas, select the part of the Overlay you want to use as the Hotspot.
  2. In the Interaction section, select the Trigger.
  3. In the Action field, select Swap With.
  4. In the Destination field, select the Overlay you'd like to swap in.
  5. Customize your Animation:
     1. Select a Transition
     2. Adjust the Direction, Easing and Duration (if applicable)
  6. Preview your Overlay in Presentation View.

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

  Edit or Delete an Overlay

  Overlay settings are applied to the Overlay) as opposed to the  Connection. This is different than our other actions, like Navigate or Swap.

  This allows you to reuse an Overlay's settings, any time you link to that Overlay. It also means you only have to update an Overlay's settings in one place.

  Edit Overlay

  You can identify an Overlay by the blue Overlay icon. This will appear next to the Frame in the Canvas.

  You can click on this icon to view and update the Overlay's settings in the Properties Panel. This will apply your changes to all interactions that use this Overlay.

  

  Tip!  You can also access the Overlay settings by clicking on an origin's Hotspot, or on an arrow from one of the Connections.

  Delete Overlay

  You can only remove an Overlay connection in Prototype mode.

  There are a few ways to delete an Overlay or Connection:

  • Click on the Connection Arrow and drag it to an empty part of the canvas.
  • Select the Overlay by clicking on the Overlay icon, then press the Delete key on your keyboard to remove.
  • You can remove all connections on the current page. Right-click on a connection and select Remove All Connections.
• Prototype scrolling with overflow behavior

  Before you Start

  Who can use this feature

  Users on Any Figma Plan can use scrolling overflow

  Users with Edit access to a File can create and edit prototypes

  Overflow Behavior controls how users interact with content that extends beyond a device's dimensions.

  This allows you to replicate scrolling down a lengthy page of content. As well as more advanced user interactions, like:

  • Scroll left-to-right to switch between elements in a Slider
  • Navigate between images, articles or posts in libraries and galleries
  • Pan/scroll around to view an interactive map

  You can only apply Overflow Behavior to Frames. This allows you to scroll on any objects or layers nested within that Frame.

  Overflow behaviors

  We support three different Overflow Behaviors.

  Vertical Scrolling

  Vertical Scrolling allows a user to swipe or scroll up and down within the Frame. This allows the user to interact with the Prototype, like they would an actual website or app.

  You can use this behavior for scrolling down a long website, or page of content within an app.

  

  Note: You won't always need to apply Overflow to Frames that extend beyond the device's dimensions. By default, anyone can scroll the full length (or width) of a Frame.
  
  You'll only need to apply scrolling overflow if a Frame has content that extends beyond its bounds. 

  Horizontal Scrolling

  Horizontal Scrolling allows a user to swipe (or scroll) left or right within a Frame.

  This allows you to maintain your vertical position while exploring extra content. Use this for simulating a Product Slider, File Browser, Photo Gallery or Library.

  

  Horizontal and Vertical Scrolling

  Allows a user to swipe (or scroll) both left or right, and up or down within a particular Frame.

  Use this behavior when you want to support scrolling to view more content in any direction.

  Our interactive Google Maps image allows the user to view more of the map as they move around the Frame.

  

  Apply an Overflow Behavior

  There are two requirements to apply overflow behavior

  • You can only apply Overflow behavior to Frames
  • The child objects in the Frame must extend beyond the Frame's bounds.

  Tip! If your objects don't extend beyond the Frame's bounds, you can Adjust a Frame's bounds.

  1. Select a Frame in the canvas.
  2. Open the Prototype tab and find the Overflow Behavior section.
  3. Select the desired behavior using the field provided. You can choose from:
     • None
     • Horizontal Scrolling
     • Vertical Scrolling
     • Horizontal & Vertical Scrolling
  4. View your Prototypes in Presentation View to check out the results!

  Note: You can only apply one Overflow Behavior to each Frame. You can apply different Overflow Behaviors to different Frames in a design.

  Adjust the Bounds of a Frame

  If all your child objects fit within the Frame when you apply scrolling overflow, Figma will show you an error message. You'll need to adjust the Frame's bounds before continuing.

  1. Open the Design tab in the Properties Panel.
  2. Select the Frame you want to update.
  3. Adjust the Frame to the desired dimensions:
     • Use the Width and Height fields in the Properties panel
     • Click to select the Frame and hover over the Frame's bounds until the resize cursor appears. Drag the bounding box to resize.

     Learn more about resizing Frames in our Frames in Figma article

     Note: Constraints define how an object behaves when you resize the Frame. If you want to resize a Frame with Constraints applied, you may need to ignore them.

     To temporarily ignore Constraints, hold down the modifier key while resizing: macOS: Command Windows: Ctrl

  4. To hide any content that extends beyond the Frame, check the box next to Clip Content.

  5. When you switch back to the Prototype tab, the warning will be gone.

  

  Need to update the bounds of a Component?

  You can also apply Overflow behavior to Components. Like regular Frames, some of the Component's content will need to extend beyond its bounds.

  To find and edit a Master Component:

  1. Select the Instance in the canvas.
  2. In the Properties Panel, click the Go to Master Component link.
  3. Figma will open the Master Component at its origin.

  Our Constraints Video Tutorial shows the step-by-step process of resizing a Component.

  Use Overflow with Fixed Objects

  There may be some elements of your design that you want to stay in the same position.

  Constraints allow you to define how objects in a static design respond as you resize them. Within the Constraints section of the Properties panel, you can also define an object's position in a prototype.

  The Fix position while scrolling setting allows you to fix an object's position so that it stays in the same location in the viewport, as users scroll and interact with the prototype.

  Note: There are some Constraints that won't be available for fixed objects. We will grey these out in the Constraints setting. Learn more about Constraints in our Apply Constraints to define how layers resize article.

  You will need to be in the Design tab to make changes to an object's Constraints.

  1. Select the object, group or Component in the Canvas.

  2. Locate the Constraints settings in the Properties Panel.

  3. Select the relevant Constraints for that element. For example: a status bar may use Top Constraints and a mobile navigation menu may use Bottom.

  4. Check the box to Fix position when scrolling.

  5. Figma will move these objects above your other layers so that they are in the FIXED section of the Layers Panel.

     Note: It's not possible to position scrolling objects above fixed layers, unless the scrolling layer is also Fixed.