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
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.
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.
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.
PresentationSize (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.
Click on the Starting Frame icon.
Drag the icon to another Frame in your Prototype. This could be a Prototype on a separate page within the File.
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
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.
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.
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:
Hotspot
Connection
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:
Trigger
Action
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.
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:
Select a Transition type
Choose the Direction the Transition will come from
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).
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.
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:
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.
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.
Click on the Prototype tab in the Properties Panel.
Select a Layer, Group or Frame in the Canvas. A Prototype node will appear on the right-edge.
Click on the node and drag it to the next Frame to create a Connection.
Define the Interaction in the Prototype tab. You can set the Trigger, Action and Destination.
In the Animation section, select Smart Animate from the Transition Field.
You can then apply Easing or change the Duration of the transition.
Repeat for any other Frames in your Prototype.
Click the Present icon in the toolbar to see the Prototype in Presentation View.
Our Prototype now moves smoothly between each Frame!
Combine Smart Animate with other transitions
You can also choose to Smart Animate matching layers as part of another transition.
This allows you to set a default transition. You can then enable Smart Animate matching layers.
We will then do the following:
For any layers that don't match, we'll use the transition you selected.
For any layers that do match between Frames, we Smart Animate any differences.
Working with fixed layers? We treat fixed layers differently when using Smart Animate with other transitions.
For Fixed layers that do match between Frames, we will not apply any transition.
For Fixed layers that don't match between Frames, we will apply a dissolve transition. We will not apply the transition you selected.
When using the Smart Animate transition, we will Smart Animate any Fixed layers.
Create a Connection between two Frames in the Canvas.
In the Prototype tab, define the Interaction. You can set the Trigger, Action and Destination.
In the Animation section, select any Transition from the list (except for Smart Animate).
Customize the rest of the Animation:
Choose a Direction
Apply Easing
Adjust the Duration
Check the box next to Smart Animate matching layers.
Click the Present icon in the toolbar to see the Prototype in Presentation View.
If you don't check the Smart Animate matching layers box, we will apply your selected transition to every layer in the Frame.
This may result in some unexpected or undesirable results. Let's take a look at an example to see this in action!
We're building a Prototype of a mobile app. We have a status bar and a navigation bar that exist in all Frames. We want these to stay in place when we switch between tabs.
We've selected a Push Transition to move between Frames. We choose not to check the box next to Smart Animate matching layers.
When we view our Prototype, we can see that everything in our Destination Frame uses the Push Transition. This makes it pretty obvious that we're moving between separate Frames.
We head back to our Prototype and check the box next to Smart Animate matching layers.
When we view our Prototype now, we can see that the status and navigation bars stay in place, while the rest of our content uses Push. Perfect.
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.
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:
Group the Trip in each Frame.
Give each group a unique name e.g. Group A, Group B.
When we have another go with our Push Transition, Smart Animate no longer recognizes these as matching layers. Our content will Push in together, making our Prototype look much more realistic.
Slide In and Move 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.
In each Frame, add a new FrameF or RectangleR. You'll want this to take up the entire width and height of the existing Frame.
Add a solid Fill to the rectangle. This needs to be a layer with a solid color and 100% opacity.
Give the Frames or Rectangles different names between each Frame.
Now when we view our Prototype, all the new content in our Frame slides in together.
Layer order and hierarchy
Smart Animate takes into account the layer order, or hierarchy of your layers. This happens when looking for matching layers and when animating transitions.
Normally, Move In or Slide In will transition the entire destination Frame above the original Frame.
With Smart Animate matching layers, we look for any layers that match between Frames. This means we also take into account the hierarchy, or the order the layers appear, in each Frame.
This can cause some confusing or unexpected results, but if you know what to look out for, it's easy to fix!
Let's take a look at an example.
In our screenshot below, we can see there are two matching objects between our Frames ( Explorer 1 and Explorer 2). These are the Status Bar and the Navigation.
If we have layers above any matching layers, Figma will animate them above the destination Frame. In Explorer 1, we can see that we currently have some layers that appear above our matching layers.
We can see this play out in the following screenshot, taken from the middle of a Slide in transition. The Explorer logo from Explorer 1 is above the map from 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.
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.
Trigger an Overlay from an Object, Layer, Group or Frame.
Click the Prototype tab at the top of the Properties Panel.
Click on the object you’d like to trigger the Overlay from. This will become the Overlay's Hotspot.
A Prototyping node will appear on the Object. Click and drag the node to the Overlay Frame to create the connection.
Customize the Interaction in the Prototype tab.
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
Use the Action field to select Open Overlay from the options.
Update the Destination - this is the Overlay Frame.
Customize the properties of the Overlay:
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.
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.
Decide if you want to Add background behind the overlay. Select a color using the swatch and Color Picker.
In the Animation section, you can customize the Transition for that Connection.
Select a Transition. Some transitions will have additional settings:
Select the Direction the Transition is coming from.
Set the Duration - the time it takes to complete the Transition.
Apply Easing to control the momentum of the Transition.
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.
The user clicks on the help icon, which opens the first Overlay (Help menu).
They select the Get Help option from the menu.
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
In the Canvas, select the part of the Overlay you want to use as the Hotspot.
In the Interaction section, select the Trigger.
In the Action field, select Swap With.
In the Destination field, select the Overlay you'd like to swap in.
Customize your Animation:
Select a Transition
Adjust the Direction, Easing and Duration (if applicable)
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.
Users with Edit access to a File can create and edit prototypes
Overflow Behaviorcontrols 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 toFrames. 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
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.
Open the Design tab in the Properties Panel.
Select the Frame you want to update.
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
To hide any content that extends beyond the Frame, check the box next to Clip Content.
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:
Select the Instance in the canvas.
In the Properties Panel, click the Go to Master Component link.
Figma will open the Master Component at its origin.
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.
Select the object, group or Component in the Canvas.
Locate the Constraints settings in the Properties Panel.
Select the relevant Constraints for that element. For example: a status bar may use Top Constraints and a mobile navigation menu may use Bottom.
Check the box to Fix position when scrolling.
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.
Prototypes replicate how users might interact with your designs. You can make connections between frames to create user flows, or pathways.
Presentation View allows you to see your prototypes in action. Use Presentation View while you build and test your prototype, or when you're ready to share your prototype with others.
If you have no Prototyping Connections, you can click through to view all frames on the current page.
Add comments to the prototype
Set the prototype view Options and hide the toolbar or comments
Enter fullscreen mode
View the Device you selected in your prototype settings
View your cursor or touch indicator (mobile device prototypes only)
FIgma will present the device against the Background Color you selected
Interact with hotspots or enter keyboard shortcuts within your prototype
Use the arrows to navigate between frames
Use the Restart button or keyboard shortcut [R] to return to the Starting Frame
Tip! Use Presentation View to present a slide deck, without having to create connections between slides. Navigate through Frames using the:
On-screen arrows <>
left and right arrow keys on your keyboard
Enter or Return key
Adjust Presentation View options
You can adjust a few settings while in Presentation View using the Options menu.
Note: Adjusting Presentation View Scale settings in the Options menu will update the prototype's share link. Make sure to copy the updated link after making any changes.
Scale
The Scale determines what size we display your prototype in your viewport.
We only apply a Scale Mode to your view of the prototype, so you can adjust this to suit your preferences. Choose from:
100% - Display at full size: Display the Prototype based on the full size of the Frame. Depending on the Frame and the screen size, this may result in a cropped Prototype..
Fit - Scale down to fit (Default): Shrink the Prototype so that it fits within the viewer's screen dimensions.
Fill - Scale or up or down to fill: Scale the Prototype so that it fills the entire display, on any screen size or resolution. Unlike Fit, Fill allows the Prototype to be scaled up to fill larger screens.
Width- Scale down to fit width: Scale the Prototype so the width fits within the viewer's screen dimensions. This option is only available if you are using a custom Frame size and have no device selected.
Select a scale from the Options in the toolbar or press the Z key while in Presentation View to cycle between the scale sizes.
Tip! Share a Prototype with a different Scale mode by adding a Scale mode variable to the Prototype's URL: /proto/ABCDEFGHIJKL/Sample-File?node-id=0%3A1&scaling=contain
100% - &scaling=min-zoom
Fit - &scaling=scale-down
Fill - &scaling=contain
Width - &scaling=width
Hide prototype toolbar and footer
You can choose to hide the prototype UI in Presentation View. This is particularly handy when you are testing a prototype with real users and want to avoid any distractions.
When you hide the prototyping UI in Presentation View, Figma will:
Hide the toolbar and footer
Update the prototype URL with a &hide-ui=1 variable. Make sure to copy the updated link after making any changes.
Display the option to copy the updated URL
Remind you how to restore the toolbar and footer
Keep the UI hidden from viewers unless the keyboard shortcuts to show toolbar and footer are used.
Hide the toolbar and footer
To hide the toolbar and footer:
Enter Presentation View by clicking the play icon in the editor.
Click Options in the toolbar.
Disable Show Toolbar and Footer.
Or, use either of the keyboard shortcuts:
macOS: Command\ or Command.
Windows: Control\ or Control.
Once you've hidden the toolbar and footer, click Copy Link to add the prototype's URL to your clipboard for sharing.
Show toolbar and footer
To restore the toolbar and footer in Presentation View, use either of the keyboard shortcuts:
macOS: Command\ or Command.
Windows: Control\ or Control.
Note: When viewers open a Figma prototype set to hide the toolbar and footer, Figma will briefly show them a loading screen to let them know they are viewing a prototype. This loading screen will not display if the prototype is embedded.
Fullscreen
Enter Fullscreen to make the Prototyping process more immersive.
To enter Fullscreen, click the Expand icon (two arrows) in the top-right corner of Presentation View. Press Esc or F on your keyboard to exit full screen view.
Note: If you've set your view options to hide the toolbar and footer, they will also be hidden in Full Screen
Show Hotspot Hints
Hotspot Hints help guide users through a prototype. They show where the Hotspots are in the Prototype. When a user clicks outside of a Hotspot, Figma highlight any clickable areas with a blue bounding box.
Click the screen - or hover over the top of the screen - to show the menu bar.
Click Options in the menu bar and select Show Hotspot Hints on Click to apply.
A check will appear next to the setting when this is enabled.
Select the setting again to remove the check and hide Hotspot Hints.
Show Resolved Comments
If you are logged into your Figma account, you can make comments on a Prototype. This includes responding to or resolving comments.
Choose whether to Show Resolved comments on the Prototype. When enabled, resolved comments appear alongside any new or unresolved comments.
Click Options in the menu bar.
Select Show Resolved Comments. A check will appear next to the setting when this is enabled.
You can also choose to Show Only Your Comments in Presentation View.
Select the setting again to remove the check and hide any resolved comments.
Note: If there are no comments on the Prototype, then this setting will be greyed out and can't be updated. Learn more about comments in our Give Feedback on Prototypes with Comments article.
