Getting Started with Prototyping
Figma’s Prototyping features allow you to create interactive flows that simulate how a user may interact with your designs.
Prototypes are a fantastic way to share and iterate on ideas, test out different concepts, preview interactions, or present your designs to key stakeholders.
In this article, we'll take you through some key Prototyping concepts and settings:
1 | Prototype Mode
To start building Prototypes, you'll need to enter what we call Prototyping Mode. This allows you to define how your users will interact with your designs, by creating the paths and interactions that will make up your Prototype.
To enter Prototype Mode, head to the Prototype tab above the Properties Panel:
Tip! When no layers are selected, you'll be able to view or update the Prototype Settings, which determine how the Prototype will be presented. Learn more about Customizing your Prototype Settings.
When a layer is selected, you will see some Prototyping properties in the Prototype tab. This will allow you to define the Trigger, Action and Overflow Behavior for each layer or Frame.
- Trigger defines the type of user interaction that will trigger the Action e.g. a click, tap, hover, or another mouse/touch interaction.
- Action allows you to define the Destination, where the user will be taken when they interact with the Trigger. You can also define the Navigation (Navigate, Swap, or Overlay), and the Transition.
- Overflow Behavior will define how users can interact with elements with content that extends beyond the Frame's bound.
2 | Connections and Hotspots
Once your Frames are finalized, you can link them together using Connections and Hotspots.
Connections can be established from any (child) object within a Frame; this creates a Hotspot on that object within your Prototype. For example: a line or block of text; a button, image or icon; navigation menu, or tooltip etc.
The Hotspot can then be connected to any top-level Frame, i.e. any other screen in your design. This Frame becomes the Destination Frame.
Note: It's not possible to use a nested Frame, Group or object as the Destination Frame.
3 | Triggers
Once you have decided where you want the Hotspot to be, you can define exactly how you want the Prototype to progress from one Frame to the other.
Triggers are a great way to make your Prototypes look and feel more realistic. You can set this using the Trigger drop-down in the Prototype tab.
You have a number of Trigger options available, which cover the different ways in which a user can interact with your design.
Check out the explanations below for more information on how each Trigger works.
On Click/On Tap
This is the most commonly used Trigger and allows the Action to take place only once the object has been explicitly clicked (desktop) or tapped (mobile) on.
This is perfect for any actions where the user needs to actively progress the Prototype; opening a menu, navigating to another page, and closing alerts or on-screen prompts are all great use cases for this Interaction.
This Trigger doesn't require the object/Hotspot to be actively engaged. Instead, the user will only need to hover their cursor over the Hotspot to perform the action. When the user moves the cursor away from the Hotspot, they will be returned to the original Frame.
This is perfect for simulating tooltips - messages that appears when a cursor is positioned over an icon, image, link or other object - or other interactions where you don't need to take the user away from the current Frame.
Tip! Be mindful of using the While Hovering Interaction when building Prototypes for mobile. While these will work well when simulation a mobile device on a computer, these will be changed to On Tap actions when using an actual mobile device.
The While Pressing Trigger will display the Destination Frame only while the mouse or trackpad is being clicked and held (on desktop), or when an object is being directly pressed (on mobile). When released, the user will be shown the original Frame again.
This is great for imitating temporary interactions or state changes; like viewing a preview via a long press, or navigating a drop-down menu.
There are also a number of Triggers available, based on how the mouse, or any touch gestures, are used while viewing a Prototype.
This allows the Destination Frame to be shown when the mouse enters the the Hotspot area. This looks similar to how the While Hovering Trigger works; however, unlike the While Hovering Trigger, the user won't automatically be returned to the original frame when they move the mouse outside of the Hotspot. This is good for x.
This Trigger shows the Destination Frame when the user's mouse leaves the Hotspot area. This is great for simulating on-screen prompts, like an alert when a field hasn't been completed, or a box hasn't been checked.
Mouse Down (Touch Down)
This triggers the Destination frame when the mouse is first pressed down - or for mobile devices, when the user's finger first touches the object within the Prototype.
Mouse Up (Touch Up)
This triggers the Destination frame when a mouse click is released - or for mobile devices, when the user's finger stops touching the object within the Prototype.
Tip! You may want to use the Mouse Down and Mouse Up Trigger together, to replicate a user navigating a drop-down menu. In this example, you would use the Mouse Down Interaction to show the Overlay, then apply the Mouse Up Interaction to the menu item in the Overlay. When the mouse is released, the user will be taken to the relevant Frame.
The After Delay Trigger is based around the time the user is on the current Frame. This can only be applied to a top-level Frame, not a specific layer or object.
This allows you to automatically advance a Prototype, or show an on-screen prompt, after the user has spent a certain amount of time on a given Frame. This could be used to simulate a chat message, a notification or alert, or an auto-direct to another page.
4 | Actions
Once you have defined the When (via the Trigger setting), you can determine Where and How you want the Prototype to progress.
Head to the Action section in the Prototype tab and use the drop-down to set the Destination:
Tip! If you have already established a connection between two Frames, then the Destination will be automatically set based on the connection arrow's endpoint.
Use this when there is no Action required.
Back to Previous Screen
This allows you to navigate back to the screen the user was on, before being taken to the current screen. This is perfect for simulating the Back button in your Prototypes.
This allows you to close or dismiss any overlays that have appeared over the original frame. This is perfect for replicating an on-screen prompt or alert being dismissed.
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.
Once selected, you can enter the URL in the field provided:
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: Note: This setting will only be saved on the current device.
You will also be able to use the drop-down to choose another Frame within the design as the Destination. Each Frame in your design will be listed here individually.
When you have selected another Frame as your destination, some additional settings will become available.
First, you can choose what Type of Action this will be. You have three options:
This is a simple transition between two Frames. This is the most common type of Action.
Swap 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 won't add that Frame to the Prototype's History. This gives you greater flexibility when using "Back" actions by allowing you to go back to the previous screen, versus the previous Overlay. If you’d like a user to be able to use the “Back to Previous Screen” action to move between Overlays, then you would need to use the Navigate option instead.
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.
Learn more about using and creating Overlays in our Prototyping with Overlays article.
5 | Transitions
Transitions determine how the Prototype will shift from one Frame to the other. This allows you to simulate how your designs will look and respond in a real-world setting.
Check out the video below, or keep reading to learn more about using Transitions.
Once you’ve created a prototyping connection, you’ll see Transitions available under the Prototyping tab in the Properties Panel.
You have a number of animation options, or Behaviors, available. The Behavior will determine how the Destination Frame will appear on the screen.
The Instant transition will immediately display the Destination Frame, when the Hotspot is interacted with (clicked, hovered over, or pressed).
The Dissolve transition will fade in the Destination Frame, on top of the original Frame. You can determine the Duration of the transition (how long it takes to complete), as well as apply Easing.
Tip! Easing allows you to slow down part of the transition. You can choose to slow down the beginning (Ease In), end (Ease Out) or both the beginning and end (Ease In and Out) of the transition.
The Move transition will slide the Destination Frame into view, above the original Frame. You can determine the Direction that the Frame enters, as well as the speed (Duration).
The Slide will move the Destination Frame into view, similar to the Move behaviour. However, the origin Frames are treated differently between the two behaviors. The Slide behaviour will slowly offset the Frame, as it dissolves, while the original frame in the Move behaviour remains stationary.
The Push transition will push out the original Frame, as the Destination Frame is moved into view. Like with Move and Slide transitions, you can determine the direction and speed of the Push. This is the perfect Transition for replicating a swiping gesture.
In addition to the Transition behavior, you can also adjust the following settings:
- Direction allows you to choose which direction the Destination Frame enters on. You can choose from Left, Right, Top and Bottom.
- Duration determines how long the Transition takes to complete.
- Easing allows you to slow down part of the transition at the beginning, end, or at both the beginning and end.
- Preserve scroll position allows you to maintain the same scroll position when moving between two frames.
Learn more about Scrolling and Scrolling Overflow in our Advanced Prototyping article.
6 | Overflow Behavior
If you're building more complex or higher fidelity Prototypes, then you will likely need to use Scrolling Overflow.
This allows you to simulate more advanced user interactions; like navigating carousels, photo galleries and libraries, or interactive maps. As well as simply allowing a user to scroll down a lengthy page of content.
Learn more about Overflow Behavior in our Advanced Prototyping with Scrolling Overflow article.