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:
- Preview interactions and user flows
- Share and iterate on ideas
- Get feedback from collaborators
- Test interactions with users
- Present your designs to stakeholders
How it Works
You can then define the paths and interactions that make up your Prototype:
- Open the Prototype tab in the Properties Panel
- Choose an Interaction
- Apply an Animation
- Customize the Overlay
- Define the Overflow Behavior
- Adjust the Prototype Settings
- Build Prototypes using Interactions and Animations
- Create dialogs, tooltips and modals with Overlays
- Create Advanced Animations with Smart Animate
- Prototype Scroll Interactions with Overflow Behavior
- Adjust your Prototype Settings
- View a Prototype on Desktop with Presentation View
- View a Prototype on Mobile
- Share your Prototype with Others
- Follow along with Observation Mode
- Give Feedback on Prototypes with Comments
Watch our video on Prototyping below. Or, check out our Prototype & Collaboration Playlist on Youtube.
- 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.
- 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 Transition, as well as the Speed and Direction.
- A Transition is a type of Animation. This defines how the Action moves to the Destination.
- The Direction controls the direction that the transition comes from. You can choose between Left, Right, Top or Bottom.
- The Duration controls the time it takes to complete the Transition. The shorter the Duration, the faster the Transition. You can choose a Duration between 1ms and 10000ms (10 seconds).
- Easing affects the acceleration of the Transition i.e. whether it starts slow or fast. This allows you to build Transitions 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.
- You can choose which Device will be shown when presenting your Prototype. You can 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. You can build more than one Prototype within a single File. You can 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 Transitions and Prototype Settings.