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:

  1. Open the Prototype tab in the Properties Panel
  2. Choose an Interaction
  3. Apply an Animation
  4. Customize the Overlay
  5. Define the Overflow Behavior
  6. Adjust the Prototype Settings

Help Articles

  1. Build Prototypes using Interactions and Animations
  2. Create dialogs, tooltips and modals with Overlays
  3. Create Advanced Animations with Smart Animate
  4. Prototype Scroll Interactions with Overflow Behavior
  5. Adjust your Prototype Settings
  6. View a Prototype on Desktop with Presentation View
  7. View a Prototype on Mobile
  8. Share your Prototype with Others
  9. Follow along with Observation Mode
  10. Give Feedback on Prototypes with Comments

Video Tutorials

Watch our video on Prototyping below. Or, check out our Prototype & Collaboration Playlist on Youtube.

Glossary

  • 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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.