Figma’s Prototyping features allow you to create interactive flows so you can preview and test out your designs.
To use these features, you’ll need to make sure the designs in your File are arranged into Frames. Then, you can link the Frames together using Connections and Hotspots to create clickable prototypes.
- Enter Prototyping Mode by selecting the Prototype Tab at the top of the
- Select the first frame you would like to use in your Prototype. Any top level frame, or object within a frame, can be selected to reveal a circular prototyping node.
- Click and drag the node to another frame to create a Prototyping Connection.
- Once you create your first Connection, the Starting Frame Indicator (blue box with an arrow) will appear next to the frame. You can move this box to another frame to change where your prototype begins.
Connections and Hotspots
Connections can be made between top-level frames, or between child objects in one frame and another top-level frame. It's not possible to create Connections between separate objects within frames.
When you create a Connection from a child object and a frame, that creates a Hotspot on that object in your Prototype. Clicking on that object in Presentation Mode will always bring you to the frame it’s connected to.
You can remove Connections from an object by right clicking on it and selecting Remove Connections from the context menu. You can also remove all Connections from a file by right clicking on a blank area of the canvas and selecting Remove All Connections from the menu.
When you have nothing selected on the canvas while in Prototype Mode, you’ll see Prototype Settings in the right hand panel. You can also click the Show Prototype Settings button to see this.
You can create a more immersive prototype experience by selecting a device frame. After selecting a device from the dropdown menu, you’ll see the option to select a specific model, as well as a preview of the device frame. Figma will also automatically select a matching device based on the Frame presets you’ve used in the file.
Now, when you go to Presentation Mode, your design will be wrapped inside a device frame.
You can toggle between Portrait and Landscape orientation however, you can't set different device orientations for different frames in the prototype.
You can change the background color for your prototype from this setting without changing the background color of the design file. If you have a device frame selected, you’ll also see this background color in the preview.
Besides dragging the Starting Frame Indicator on the canvas, you can also change the Starting Frame for your prototype using this dropdown menu in Prototype Settings.
Link to URL on Hotspots
Any object on the canvas can be a Hotspot which links to a URL. When you have an object selected in Prototyping mode, you can use the Destination dropdown menu to create a URL Hotspot
This will reveal another text field where you can enter a URL
Clicking on the Hotspot while viewing the Prototype will open the URL in a new tab. If the link is to an external website, we will show a temporary “jump” page. This jump page has a checkbox that allows you to whitelist the website so you can skip the jump page (this setting is only saved on the local device).
Interactions are a great way to make your Prototypes feel more realistic by simulating different actions a user can take besides clicking/tapping to navigate between frames.
You can select different Interactions from the dropdown in the Prototyping Panel:
Note: On Click/Mouse Down/Mouse Up will appear as On Tap/Touch Down/Touch Up when you have a device frame selected since we can be sure you’re designing for a touch screen.
Here’s how the different Interactions work:
On Click/On Tap: The destination frame will be shown after clicking/tapping down and up on the same object.
While Hovering: The destination frame will be shown while hovering the mouse cursor over the object. If no action is taken on the destination frame, the previous frame is automatically shown when the cursor moves back off the object.
While Pressing: The destination frame will be shown while the mouse is pressed down on the object. If no action is taken on the destination frame and the mouse is released (mouse up), the previous frame is automatically shown again. This will also happen when a scroll starts.
After Delay: The destination frame will be shown automatically after a certain time. It can be used to simulate things like auto-redirecting pages. You can only set an ‘After Delay’ transition on top level frames.
The following Interactions are more granular and can have a delay before they trigger:
Mouse Enter: The destination frame will be shown if the mouse cursor is inside the bounds of the object and will remain until another action is taken.
Mouse Leave: The destination frame will be shown if the mouse cursor is outside the bounds of the object and will remain until another action is taken.
Mouse/Touch Down: The destination frame will be shown when the mouse/finger is pressed down on the object.
Mouse/Touch Up: The destination frame will be shown when the mouse/finger is released while remaining on the object.
Prototyping Transitions make it possible to add common transitional animations as you move between Frames.
Once you’ve created a prototyping connection, you’ll see Transitions available under the Prototyping tab in the Properties Panel.
From here you’ll be able to select one of five simple animations for your transition between frames:
- Instant: On tap, the Destination Frame will immediately appear.
- Dissolve: The Destination Frame will fade in at a pace which you determine.
- Move: the Destination Frame will “move” on top of the other frame which stays still
- Slide: the Destination Frame will “slide” over the other frame as it fades out. You can change the direction from which the Frame slides in. This is convenient when working with different types of layouts.
- Push: the Push effect “pushes” the old frame out of the way to make the Destination Frame visible. Just as with the Slide Behavior, it is possible to customize the direction.
With the Dissolve Effect, along with the Moved, Slide and Push effects, you can specify both the Duration as well as the Easing behavior.
Duration: The default duration is 300 milliseconds, but this can be adjusted using the Duration input box. The minimum duration is 1 millisecond and the maximum is 10 seconds.
- Ease In sets the transition to be slow at the beginning, but faster towards the end.
- Ease Out sets the transition to be fast at the beginning, but slower at the end.
- Ease-In-and-Out means the transition will be fast at both the start and the finish.
Typically, when layers or objects are moving out, the Ease In option will be best, and when those layers or objects are moving in, the Ease Out option will work best.
When you view a Prototype in Presentation Mode, designs larger than the viewport will scroll by default.
- If you’ve selected a Prototype Device, the scaling mode will default to Scale down to fit
- If no device has been selected, the scaling mode will default to 100%
For designs with scrolling in mind, you may have objects you want to remain fixed as you scroll such as a navigation tab bar or a floating action button (FAB).
To fix an object you can set Constraints based on where you want the object to be fixed and check the Fix Position when Scrolling option. For a navigation tab bar you would set the Constraint to Bottom
Scrolling Overflow Behaviour
You may also have content in your design that overflows off-screen, for example a card carousel which you want to scroll horizontally. Figma supports horizontal and vertical scrolling, as well as both horizontal and vertical scrolling at the same time. You can also have Fixed Objects in nested frames with overflow behaviour.
Here’s how to build scrolling overflow behaviour into your prototype:
1. Nest your content into a Frame, scrolling overflow behaviour is a property that only belongs to Frames. You can nest multiple objects into a Frame by selecting all of them and pressing Command + Option + G (or Control + Alt + G for Windows).
2. Navigate to the Prototyping Tab and select the Overflow Behaviour from the dropdown menu. For a card carousel you will want to select Horizontal Scrolling.
3. If you don’t have any overflowing content in the Frame, you’ll see a warning icon displayed next to the dropdown menu. In order for scrolling behavior to work, we need to adjust our Frame’s boundaries so that some of its contents lie outside of the bounding box.
4. To fix this, resize the bounding box of the Frame to be smaller and you’ll see the warning disappear.
5. Now, you can open your design in Presentation Mode to test out the scrolling behaviour.