Ultimate Guide to Prototyping in Figma
How to create prototypes in Figma with interactions, animations, fix positions, overflow scrolling, and interactive components.
Molly Hellmuth
September 8, 2021
•
12 min read
.svg)
Figma is a great tool for prototyping UX/UI designs. It allows you to create interactive flows directly in the design file with advanced, yet easy-to-use features. In just a few minutes, you can turn your static designs into a realistic version of your website or product.
Creating prototypes is important for many reasons. You can explore how new user flows will work. Communicate interactions to your team. Test and get feedback from your users. And pitch designs to stakeholders for buy-in.
In this guide, you'll learn
First, let's go over some prototyping basics. Organize your designs and get familiar with the most important prototyping features. This will protect your designs and speed up your workflow.
When you're ready to start prototyping, add a copy of every screen and component needed to a new page. Arrange everything in a logical order with clear, identifiable names. Using copies will allow you to use the same designs in many prototypes. While also keeping the originals safe and organized.
Assess (almost) all prototype features in the right-hand panel under "Prototype".
A. Prototype panel
B. Add a new prototype flow
C. Add and configure interactions
D. Add and configure overflow scrolling
E. Configure prototype settings
F. Present prototype
Each page in your Figma file can have one or many prototype flows. Each one needs to have its own starting point and unique name. Select the first frame you wish to appear in your flow and click the "Add" icon next to "Flow Starting Point". Once added, rename the flow by clicking on the name input. Add a description by clicking the "Edit" icon next to the flow name. To remove the starting point click the "Delete" icon next to "Flow Starting Point"
Interactions are the primary feature used when building a prototype. Use them to show different behaviors, effects, and navigational patterns. They work by connecting two layers, then determining how those layers will interact with each other by adding a trigger, action, and animation. Interactions can be simple with instate animations. Or they can be more complex with animated elements that move or change properties.
Trigger: The event that causes a change (on tap/click, on drag, while hovering, while pressing, key/gamepad, mouse enter, mouse leave, mouse down (click), mouse up (release)).
Action: The change that is happening (navigate to, change to, open overlay, swap overlay, close overlay, back, scroll to, open link).
Animation: The behavior of the change (instant, dissolve, smart animate, move in, move out, push, slide in, slide out).
Add a connection between any two layers (e.g. frames, groups, shapes, text layers, etc..). To add a connection, hover over or select the first layer and drag the blue node that appears to the second layer. The "Interaction Details" menu will then appear. The first layer will become a new flow starting point if has no other connections.
Use "instant" animations to have the action take place with no movement or effect. This is great for actions like navigating between pages or showing a modal/tooltip.
Tap a button to navigate to new page with an instant animation.
While hovering over an icon, open overlay tooltip with an instant animation
Use animations to add movement to your interactions (dissolve, move in, move out, push, slide in, slide out). Select different easing curves and adjust the time to customize the animation.
What are easing curves? Easing curves determine the speed during the beginning, middle, and end of the animation. A linear animation will move at the same speed the entire time. While an animation set to "ease in" will be slower in the beginning, then speed up. Adding an easing curve makes the animation feel softer and more realistic.
Click a button to scroll to a different section of the page with an animation. NOTE: Increase the animation time from 300ms to 600ms for a softer feeling.
Tap an icon to open overlay menu with a move in animation. THEN tap an icon to close overlay menu. NOTE: the "close overlay" action will automatically copy the "open overlay" animation settings (e.g. move in → move out).
Use smart animate to identity matching layers on different frames and animate the difference between them. These differences can include a change in position, size, colors, etc.. Figma will know which layers match based on their name and layer order (e.g. "Container 01").
Click OFF switch to navigate to ON Switch's frame with smart animation. THEN Click ON switch to navigate to OFF Switch's frame with smart animation. NOTE: the differences being animated are the position of the circle (left → right), and the size of the blue background (small → large).
Drag the email to navigate to a new frame with smart animation. THEN after a delay, navigate to a new frame with smart animation. NOTE: the differences being animated are the position of "Email 02" (in view → out of view), and the position of the emails 03-12 (lower → higher).
Fix an element's position in your prototype so it will stay in the same location while scrolling. This is helpful for elements that you wish to always be in view (e.g. top/bottom navigation, FAB, CTA). Configure this setting in the Design Panel under "Constraints".
Select layer(s) you wish to fix and choose "Fix position when scrolling"
Overflow scrolling allows you to scroll through individual frames inside your prototype. This is helpful when prototyping UI regions or components that have their own scrolling behavior (e.g. lists, carousels, menus, tables). To use overflow scrolling, you must have a frame (not group) with nested content "overflowing" past the bounds. This content will then appear masked with "clipped content" turned on.
Select frame with overflowing content and choose "Horizontal Scrolling"
Select frame with overflowing content and choose "Vertical Scrolling"
Add interactions between variants in a component set. Instances of those variants will then follow their predetermined interactions in any prototype. This is particularly helpful for common, stateful, components (e.g. toggles, buttons, inputs). Defining interactions in advance makes prototyping faster and reduces the number of screens needed. Not familiar with variants? Learn more about them in Figma Variants 101
Click the deselected icon to change to the selected icon with an instant animation. THEN click the selected icon to change to the default icon with an instant animation. NOTE: using interactive components allows the user to select any combination of items, in any order, with no additional prototyping.
While hovering over the default button, change to the hover button with an instant transition. THEN click the hover button to change to the selected button. THEN after a delay on the selected button, change to the default button with an instant transition.
Play with ..I mean.. practice with interactive components by using these interactive games.
Open the presentation tab to view and interact with your prototype. For a more realistic feel, select different device mockups. Anyone with access to the prototype can interact with it and leave comments for the team.
Open "Prototype settings" and select the device you would like your prototype to appear in (e.g. Pixel 2, ipad pro 11, custom size). This setting will apply to every prototype flow on your page. If designing for multiple devices, use multiple pages in your Figma file.
Select the "Present" icon next to your flow starting point or in the top toolbar to present the prototype. If you have multiple flows on one page, toggle between them in the sidebar. You can also add comments with at-mentions to take notes, ask questions, and leave feedback for team members. Configure additional settings in the "options" menu.
Share the prototype by selecting "Share Prototype" in the presentation toolbar. To only share the prototype, and not the design file, select "can view prototypes only" in the first input.
Reading about prototypes is great, but hands-on learning is better! Learn how to build every prototype from this article with our prototype playground. Included is an example of each prototype with step-by-step instructions on how to re-create all the interactions yourself.
👉 Get the (free) Prototype Playground here
