Related Videos

• Add video to prototypes

  Before you start

  Who can use this feature

  Supported for files in Education, Professional, Organization, and Enterprise teams.

  Anyone part of a paid team can add video to files.

  Anyone with can edit access can edit videos in files.

  Not supported for files in your Drafts.

  New to Prototyping? Check out our Guide to prototyping →

  Add video to your prototypes to replicate the experience your users would have in a site or app with video playback or previews.

  Video in prototypes:

  • Can be in .mp4, .mov, or .webm format
  • Can be up to 100MB in size
  • Are shape fills and behave as such
  • Are not currently supported in the Figma mobile app

  Note: Video can only be added to files in a paid Education, Professional, and Organization team. Collaborators on free Starter teams can edit existing video in a file but not upload video to it. 

  Once you add video(s) to your design file, you can edit or adjust basic video qualities. Then, you can add interactions to your videos to start building your prototypes.

  Add video to files

  Figma doesn't have a specific layer type for video, instead, videos are a type of fill. Since videos are fills, you can add them to any vector or shape.

  

  There are a number of ways you can add video to design files:

  • A Drag and drop video file from your computer onto the canvas. 

  • B Use the video importer from the fill color picker. Learn more about how to upload fills →

  • C Use the Place image/video tool to add videos in bulk. Learn more about the Place image/video tool →

  • C Copy a video from another layer in the current file, or from another file.

  • D Paste any video from your clipboard into the canvas.

  Note: You can also add animated GIFs to your prototypes. GIFs only playback when viewing designs and prototypes in presentation view. Add animated GIFs to prototypes →

  If you add a video straight to the canvas, Figma creates an object on the canvas with the dimensions of the original file. If you add a video as a fill to an existing object, Figma uses the name and dimensions of the original object.

  View and update video fills in the Fill section of the right sidebar. From the Fill section, you can play and preview your video fill, jump to a specific timestamp, or scrub through the video.

  

  You can also identify layers with video fills in the Layers panel in the left sidebar. Objects with video fills are represented on the layers panel with the icon.

  Edit video

  Once you’ve added a video to your file, you can edit the video in the following ways:

  • Scale, rotate and adjust the dimensions of any layers with video
  • Crop and re-position video applied to layers
  • Adjust the video options including the Fill mode, rotation and blend modes
  • Apply masks to only show a part of the video

  Prototype with video

  Once you add video to a frame, switch over to the Prototype of the right sidebar. From here, you can create interactions between frames with video.

  Learn more about prototyping →

  Video properties

  

  When you select a video, there is a Video section available on the Prototype tab. This section lets you set a video’s behavior when navigating to its frame in a prototype.

  • Check the box to autoplay video
  • Click the Loop icon to loop video
  • Click the Sound icon to turn the video’s default sound setting on or off

  Video interactions

  When you create any prototyping connection, there is a trigger that determines what causes the interaction to begin, and an action that defines the response from the triggered event.

  The following interaction triggers are available for videos:

  • When video hits - Trigger set action when the video hits a specific timestamp.
  • When video ends - Trigger set action when the video completes playing.

  The following interaction actions are available for videos:

  • Play/pause video - Select either Play video, Pause video, or Toggle play/pause.
  • Mute/unmute video - Select either Mute video, Unmute video, Toggle mute/unmute.
  • Set to specific time - Set a timestamp to jump to in the video.
  • Jump forward/backward in time - Select either Jump forward or Jump backward, then set the number of seconds to jump forward/backward in the video.

  When you create an interaction between two frames that have the same video, there is a Reset video state toggle in the Interaction details panel. When toggled on, the video will restart from its beginning between frames. Learn more about video state management → 

  

  Video interactions within the same frame

  You can interact and prototype with videos based on triggers made within the same frame. This can be helpful when trying to build an interactive video player experience.

  1. Create a connection from your starting object to the video file.
  2. Set your desired starting action (e.g., On click). 
  3. Set your desired action for the video (e.g., Mute/unmute video). 

  

  Video and smart animate

  You can use smart animate to preserve a video’s progress when navigating between frames. Let’s say you want to create a prototype where entering a frame begins playback, then clicking on the video navigates to a new frame with a larger view.

  

  1. Create a connection between the two frames with the same video name. Make sure the video layer names match as well.
  2. Set the animation setting to Smart animate.
  3. In the Interaction details panel, uncheck Reset video states.

  Video and interactive components

  Use interactive components to prototype video interactions in a single frame, like previewing playback on hover.

  

  1. Create a component with variants for a default and hover state.
  2. The default state should have autoplay off, and the hover state should be set to autoplay.
  3. Create a connection from the default variant to change to the hover variant and uncheck Reset video states.
  4. Create a frame with a couple instances of the component and replace video to reuse the component.

  Try out more way to prototype with video with the playground file →

• State management for prototypes

  Before you start

  Who can use this feature

  Available on any team or plan.

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

  In prototypes, we want to our interactions to feel as much like the real thing as possible—especially when moving back and forth across multiple frames.

  State management allows us to maintain object properties and states when navigating in and across frames when playing prototypes.

  State management can be used with interactive components, scroll position, and videos in prototypes in three ways:

  • State memorization: Preserve the state of an object when you leave and return to the frame
  • State sharing: Share states between matching objects in different frames
  • State reset: Reset object states on each interaction

  State memorization

  When you navigate back and forth between frames, objects re-open in their last set state.

  Interactive components

  Figma memorizes the last set variant of your interactive component.

  For example, you might have an interactive component for a checkbox. If you set the interactive component to the checked variant, Figma remembers the state of that variant. This means that if you navigate away from that frame and come back to it later, the interactive component will remain in the checked state.

  

  Scroll position

  Figma memorizes your scroll position.

  For example, you might have a map with horizontal and vertical scrolling enabled. If you scroll to a specific location on the map, Figma remembers the position of your scroll. This means that if you navigate away from that frame and come back to it later, you will remain scrolled to the same location on the map.

  

  Videos

  Figma memorizes the play state of any videos used in your prototypes.

  For example, you might start playing a video on one frame. When you get to the 5 second mark, you navigate to another frame. If you go back to the original frame, the video will continue playing from the 5 second mark, right where you left off.

  

  State sharing

  When you navigate between frames with matching objects, the state of the first object is shared with the second object.

  Interactive components

  Figma shares states between matching interactive components. States are only shared after the component has been initially interacted with.

  For example, you might have an interactive component for a checkbox, with an instance of the unchecked variant on each of two frames. When you play your prototype, you check the checkbox in the first frame. Then, when you navigate to the second frame, the matching component on the second frame will also be set to the checked variant.

  

  Scroll position

  Figma shares scroll position between matching objects.

  For example, you might have a map with horizontal and vertical scrolling enabled on each of two frames. If you scroll to a specific location on the map, then navigate to the second frame, the matching map object on the second frame will be scrolled to the same location.

  

  Videos

  Figma shares video play state between matching objects.

  For example, you might start playing a video on one frame. When you navigate to a second frame with a matching video object, the video on the second frame will continue playing from where you left off.

  

  State reset

  When users are navigating through prototypes, an object’s state may need to be reset on specific interactions. Object states should be reset on the interaction that navigates to the next frame.

  1. Click on a prototype connection to open the Interaction details panel.
  2. In the State Management section of the panel, check off any of the following settings:
     1. Reset scroll position: Reset to original scroll location
     2. Reset component state: Reset to original component state, as set on the canvas
     3. Reset video state: Restart the video from the beginning, and reset to its original play state

  

  Note: The reset settings only appear on the Interaction details panel if they are relevant to the currently selected interaction. For example, if the interaction connects to a frame without a video, there won’t be a Reset video state setting.

  Interactive components

  Reset interactive component states to their original state, as set on the canvas.

  For example, you might have an interactive component for a loading bar with empty and complete variants.

  You want the loading bar to restart on the empty variant when the user clicks a reload button, so you check off the Reset component state setting on the button interaction.

  

  Scroll position

  Use Reset scroll position to return to the original scroll location, as set on the canvas.

  For example, you might have a map with horizontal and vertical scrolling enabled. You want to return to the original scroll location when navigating between frames, so you check off the Reset scroll position setting on the interaction.

  

  Videos

  Restart the video from the beginning, and reset to its original play state, as set on canvas.

  For example, you might start playing a video on one frame. When you get to the 5 second mark, you navigate to another frame. When you return to the original frame, you want to restart the video from the beginning, so you check off the Reset video state setting on the interaction.

  

  What are matching objects?

  Objects are considered matching if they have the same layer name and the same set of parents across top-level frames.

  Tip: If you don’t want the state to be shared across two objects, you can rename them so they no longer match.

  Top-level frames are frames directly placed on the canvas. Since top-level frames don’t have parent objects, you can match them by using identical layer names or layer names with matching strings. For example, a top-level frame with the name Checkout / 1 will match another top-level frame with the name Checkout / 2, since everything before the forward slash is identical.

  To identify objects that match between frames:

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

  

  Tip: Smart animate is another prototyping feature that relies on object matching. Learn more about smart animate and matching objects →

  Update to new state management

  Figma updated to its current state management controls on May 24, 2023.

  For prototype interactions that were created before May 24, 2023:

  • Interactive components cannot share states across frames
  • Scrolling objects cannot memorize their state when re-opened
  • Scrolling objects can share states across frames only if the Preserve scroll position setting is checked

  Note: The Preserve scroll position setting is only available for interactions created before May 24, 2023. In new interactions, scroll position is shared (i.e., preserved) by default, and can be reset if needed with the Reset scroll position setting.

  To update any older interactions to the new state management controls:

  1. Click on a prototype connection to open the Interaction details panel.
  2. Click Update.

  

  Tip: To update all interactions in a file at once, right-click on the canvas and select Update all interactions.

• Guide to prototyping in Figma

  Before you start

  Who can use this feature

  Supported on any team or plan.

  Anyone with can edit access can create prototypes.

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

  Figma’s prototyping features allow you to create interactive flows that explore 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.

  Tip! For an even more efficient workflow, you can quickly toggle between the Design and Prototype tabs using the keyboard shortcut Shift E.

  Flows and starting points

  With prototyping in Figma, you can create multiple flows for your prototype in one page to preview a user's full journey and experience through your designs.

  A flow is the network of frames and connections in a single page. A prototype can map out a user's entire journey through your app or website, or it can focus on a specific segment of it via its own flow. For example: your prototype covers all possible interactions on an eCommerce site. Within the prototype, you have flows for creating an account, adding items to a cart, and checking out.

  Figma creates a flow starting point when you add your first connection between two frames. There are a few other ways to add a flow starting point to your prototype:

  • With the starting frame selected, click in the Flow starting point section of the right sidebar.
  • Right-click on the frame, then click Add starting point.
  • Duplicate a frame with an existing starting point.

  When it's time to test your designs, you can share the entire prototype or copy the link to a flow starting point.

  Learn more about starting points and flows →

  Note: A top-level frame can be part of multiple flows, but can only have one starting point. Frames nested within a top-level starting frame can have connections that navigate the user around multiple flows. For example, Log in and Sign up buttons can be nested in the same starting point frame, then be connected to frames in separate flows for each experience.

  Create connections

  1. Select the hotspot for the connection.
  2. Click to create the connection.
  3. Drag it to the destination.
  4. If there are no existing connections, Figma will make the first frame a starting point.

  

  Tip! You can create connections from multiple objects to the same destination frame at the same time—saving you time and effort when building out your prototype flows. To do so, select multiple starting hotspots on your canvas, then click and drag the icon to the destination.

  Learn more about creating and editing connections in bulk →

  Create interactions and animations

  1. Open the Prototype tab in the right sidebar
  2. Add 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 point 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
  • Add video to prototypes
  • Add animates GIFs to prototypes

  Share and collaborate

  • View prototype connections
  • 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 frame e.g. a link, button, image or icon, etc.
  • Connections are the blue arrows or "noodles" that connect the hotspot to the destination. We apply the interaction and animation settings via the connection.
  • A flow is the network of connected frames that form a path through a prototype. Each flow has its own starting point. You can have multiple flows within a prototype.
  • The starting point is the first frame of a flow. Set multiple starting points to show different flows of the prototype in Presentation view.
  • 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.
  • 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.
  • A preview will show you how something will look or work in the prototype. We show previews for both animations and prototype device settings.
• 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.

  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. In most cases, the destination must be a top-level frame. Only connections using the Scroll to action can be set to a destination within the same top-level frame.

  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 in Figma →

  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.

  

  Create and edit connections in bulk

  Create connections in bulk

  You can create connections from multiple objects at once. This can help you save time when creating multiple connections to the same destination.

  1. Select your starting objects, or hotspots, where the connections begin. You can select multiple objects via one of the following methods:
     • Select an initial object, then hold down shift while clicking additional objects.
     • Drag your cursor across any objects you want to select. This will create a blue box around the selected objects.
  2. Click from the border of one of the selected objects.
  3. Hold and drag the connections to the destination frame.

  

  All selected objects will now have connections to the same destination frame.

  To edit the interactions or animations of the created connections, use the Interactions menu from the Prototype tab of the right sidebar.

  Edit connections in bulk

  If you have multiple connections, you can edit the destination of those connections at the same time.

  1. Navigate to the Prototype tab of the right sidebar in order to see all created connections.
  2. Select the connections you want to edit. You can select multiple connections via one of the following methods:
     • Select an initial connection, then hold down shift while clicking additional connections.
     • Drag your cursor across any connections you want to select. This will create a blue box around the selected connections.
  3. Hold and drag the connections to a new destination frame. You can also select the interaction from the right sidebar and change the destination frame from the Interaction details panel.

  

  To edit the interactions or animations of the selected connections, use the Interactions menu from the Prototype tab of the right sidebar.

  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.

  A single object can have:

  • Any number of Key[board]/Gamepad and Drag interactions. This lets you 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

  Note: You're not able to combine On Click / On Tap with While Hovering, since the action for the first interaction will make the action from the second on that object unreachable once executed.

  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
  • Change to (interactive components)
  • Open overlay
  • Scroll to
  • Swap overlay
  • Back
  • Close overlay
  • Open link
  • Play video
  • Pause video
  • Play/Pause video

  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.

  Tip! Prototype faster by copying interaction details and pasting them on other frames.

  1. Select a frame with an existing interaction.
  2. In the Interactions section, click to the left of an interaction until its line is highlighted in blue.
  3. Press ⌘ Command / Control C to copy the interaction details.
  4. Select another frame.
  5. Press ⌘ Command / Control V to paste the interaction details.

  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 →

  Spring animations

  Use spring animations to give your toasts, notifications, and transitions a bit more bounce. Choose from a preset curve or set your own.

  Learn more about spring animation 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 →

  State management

  By default, Figma uses state management to determine how objects behave between frames. State management controls apply to interactions with interactive components, scrolling, or videos.

  • When you navigate back and forth between frames, objects re-open in their last set state
  • When you navigate between frames with matching objects, the state of the first object is shared with the second object

  If you don’t want to use default state management controls, you can reset the object state between each interaction.

  Learn more about state management in prototypes →

  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 →

  Tip! Now that you've built your prototype, you can view or share it. Learn how to preview designs and prototypes in presentation view →

• Add prototype connections to components

  When a design reuses a component across multiple screens, you can prototype at the speed of light.

  If you add a prototype connection from a main component, and use instances of that component in your designs, the prototyping connections of the instances will be inherited from the main component.

  Use inherited prototype connections to connect:

  • A mobile app tab bar placed at the bottom of multiple screens
  • An arrow button to navigate back to the previous screen
  • A website footer or navigation menu
  • Any component used for navigation that appears frequently throughout your design

  Add connections from main components

  To prototype with main components:

  1. Check that the main component is on the same page as the designs that contain the instances. Components from team libraries can't be prototyped this way.
  2. Use instance(s) of the component in your designs.
  3. Click the Prototype tab at the top of the right sidebar.
  4. Click and drag from the to create at least one connection from the main component.

  In this example, the mobile app design has a persistent tab bar at the bottom of the screens. We connect the tabs of the main component to their associated screens, and all instances of the tab bar inherit the same interaction. Without a main component, we would need to connect each tab of every tab bar individually.

  

  Note: Figma won't display the inherited connections on the canvas by default. Select the instance to view its inherited connections.

• Prototype scroll and overflow behavior

  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.

  Scroll behavior controls how scrolling works in prototypes. Scroll behavior consists of scroll overflow and scroll position.

  • Scroll overflow defines how users can interact with content that extends beyond a frame’s dimensions.
  • Scroll position defines how layers on frame behave when users scroll past them.

  Use scroll behavior to build prototypes that replicate interactive user experiences. 

  • Scroll up or down on a long page of content
  • Scroll left-to-right to view different elements in a slider
  • Pan or scroll around in any direction, like in an interactive map
  • Fix objects like navigation bars and menus in the same position on the page while scrolling
  • Create “sticky objects” that stay in place at the top of the frame once you scroll past them

  When we create prototypes, we want our interactions to feel as much like the real thing as possible. For some interactions, we need to create an illusion that our designs are truly dynamic by memorizing and sharing scroll position between frames.

  State management allows you to maintain the same scroll location when you move between two screens. If you don’t want to share scroll position, you can reset the state on an interaction to a frame, or you can rename the objects so they don’t match.

  Learn more about state management and resetting scroll position →

  Scroll overflow

  Overflow behaviors

  You can only apply overflow behavior to frames. This applies to frames that are directly on the canvas (top-level frames), as well as frames nested within other frames or layers.

  To apply overflow behavior, the frame must have content that extends beyond its bounds. If you change the bounds of the frame so that all the content fits inside it, regular scrolling will apply.

  Figma supports 4 different overflow behaviors: No scrolling, Vertical, Horizontal, and Both directions.

  No scrolling Vertical Horizontal Both directions

  No scrolling prevents users from scrolling up and down within a frame. Content that extends beyond the bounds of the frame will not be viewable.

  Vertical scrolling allows users to swipe or scroll up and down within a frame. Use this behavior to mimic scrolling down a long website, or page of content within an app.

  

  Horizontal scrolling allows users to swipe or scroll left and right within a frame, while maintaining their vertical position. Use this to create sliders for content, like products, galleries, and libraries.

  

  Horizontal and vertical scrolling lets users navigate in any direction within a frame: left, right, up, or down. Use this behavior to support scrolling in any direction, like viewing a map or enlarged image.

  

  Apply overflow behavior

  To apply overflow behavior to a frame, there must be child objects that extend beyond its bounds. You can only apply one overflow behavior to each frame.

  These instructions also apply to components. Select the Instance in the canvas, click Go to main Component in the right sidebar, then adjust the bounds of the original Component.

  1. Select the frame in the canvas.
  2. Open the Prototype panel in the right sidebar.
  3. In the Scroll behavior section, select the Overflow dropdown. Choose from:
     • No scrolling
     • Horizontal 
     • Vertical 
     • Both directions
  4. Click the present icon to view the prototype in Presentation view and see the results.

  

  Adjust the bounds of a frame

  If no content extends beyond the frame, Figma will show an error message when you try to apply overflow behavior. To apply overflow behavior, you'll need to adjust the frame's bounds.

  1. Select the frame you want to update.
  2. Open the Design panel in the right sidebar.
  3. Hover over the frame's bounds in the canvas until the cursor appears.
  4. Drag the bounding box to resize the frame.
  5. If you want to hide content that extends beyond the frame, check the box next to Clip content.

  

  Constraints define how an object behaves when you resize them. To temporarily ignore Constraints, hold down the modifier key as you resize the frame:

  • Mac: ⌘ Command
  • Windows: Ctrl

  Scroll position

  You can apply scroll position behavior to any layer within a frame. Each object on a frame can have its own defined scroll position.

  Figma supports three kinds of scroll positions: Scroll with parent, Fixed, and Sticky.

  Positions

  Scroll with parent Fixed Sticky

  Objects that scroll with parent move up and down the frame as you scroll. Use this behavior to mimic the behavior of scrolling up and down longer pages of content.

  

  Fixed objects don’t move, even as you scroll up and down. This lets you to lock an object's position and makes sure it stays in the same location. Use fixed layers to fix a status bar to the top of the device, or fix a menu to the bottom of a frame.

  You cannot assign a fixed scroll position to any objects on a frame with auto layout.

  

  When you make a fixed object, Figma will move those layers above the other layers in your design and label them as Fixed in your layers panel. It's not possible to position scrolling objects above fixed layers.

  

  Sticky objects start as scrolling within the parent frame, but become fixed once the top edge of the object reaches the top of the frame. (If you scroll up again, the object will unstick and move down the parent frame.)

  Tip! Explore the sticky scrolling playground file in the Figma Community → 

  You can use sticky scroll position to design navigation menus or colliding headers.

  Sticky objects only apply to vertical scrolling. In order to apply a sticky scroll position to an object, the parent frame of the object must have its overflow behavior set to vertical. You can’t stick an object to the bottom, left, or right side of a frame.

  

  Note: Check the layers panel to see how sticky objects will stack in your prototype. Layers below sticky objects will scroll behind those sticky objects; while layers above sticky objects will scroll in front of them.

  Apply scroll position to a layer

  Scroll positions are applied to individual layers within a frame. You can only apply one scroll position to each object.

  1. Select the object, group or component in the canvas.
  2. Open the Prototype panel in the right sidebar.
  3. In the Scroll behavior section, select the Position dropdown. Choose from:
     • Scroll with parent
     • Fixed
     • Sticky
  4. Click the present icon to view the prototype in Presentation view and see the results.
• 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 additional 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 shows 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 overlay action. Learn more in the Swap between overlays section.

  Create an overlay

  You create an overlay when you define the interaction of a connection. Overlays can be triggered from any object, layer, group or frame. The overlay must be inside 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 determines 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 seven default options or set a position manually.
  2. Close when clicking outside: Check this setting to dismiss the overlay when a user clicks outside the overlay's dimensions.
  3. Add background behind overlay: Check this setting 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 overlay action. This allows you to keep the existing settings while you swap one overlay for another.

  In the following example, we used Swap overlay 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 overlay actions in a prototype's history. When you create a Back action from a Swap overlay transition, Figma will take you back to the previous screen, not the previous overlay.

  Use Swap Overlay

  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 overlay.
  5. In the Destination field, select the overlay you'd want 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 places 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 interactions.