Prototype actions
Before you start
Who can use this feature
Users on any team or plan.
Users with can edit access can create prototypes.
New to Prototyping? Check out our Getting Started with Prototyping guide.
The action defines the type of progression is occurring in the prototype. For example, the action could be to Navigate to another frame, or open an external URL.
Learn more about building prototypes with interactions and animations →
Action types
Navigate to
This action takes you from one frame in a prototype to another. This is the most common type of action to use when moving between entire screens.
Open overlay
This action opens the Destination frame above the current frame. This can be used to display a modal, tooltip, or alert—from a button or other object in the design.
Scroll to
This action allows your prototype or a nested scrollable container scroll to any object within the top-level frame. This is useful to replicate anchor links and interactions with scrollable elements like carousels.
If you add Scroll to using the Interactions section of the Prototyping panel, you can only pick direct children of scrollable frames. To pick any object within the top-level frame, drag out a noodle and link it to the object you want to set as the destination.
With Scroll to, you can set the scroll animation to be Instant or set an ease using the Animate option.
Note: To drag a connection to a destination hidden by a clipped frame, uncheck Clip content from the frame section of the Design panel to expose the destination frame first.
Swap overlay
This action allows you to replace one frame with another. This will behave similarly to the Navigate to option, when triggered from a hotspot in a regular frame.
If you apply Swap overlay to a hotspot in an overlay, it will swap the current overlay with the new Destination frame. The new overlay will retain the same overlay settings as the original.
Note: Using Swap overlay won't add that frame to the prototype's history. If you’d like a user to be able to use the Back action to move between overlays, we recommend using the Navigate to option instead.
Back
This allows you to navigate back to the previous screen. This is perfect for simulating the Back button in your Prototypes.
Close overlay
This action allows you to close or dismiss any overlays that have appeared over the original frame. You can use this to replicate an on-screen prompt or alert being accepted or dismissed.
Open link
This allows you to direct the user to a URL outside of the prototype. This is great for external links, or additional resources that aren't available in the main navigation.
Enter your URL in the field provided, once you select this option.
Tip! When you click on an Open link hotspot, the link opens in a new tab. If this is a link to an external website, the user will be notified they are leaving Figma. You can use the checkbox provided to skip this jump page in the future. This setting will only be saved on the current device.