Before you start
Who can use this feature
Users on any plan
Users with can edit access can create prototypes.
Users with can view access can play back prototypes in Presentation view.
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
Watch our video on prototyping below. Or, check out our Prototype & Collaboration Playlist on Youtube.
- Select the hotspot for the connection.
- Click the to create the connection
- Drag it to the destination
Create interactions and animations
- Open the Prototype tab in the right sidebar
- Create interactions
- Set interaction details
- Apply an animation
- Preview your animation
Adjust Prototype Settings
- Select a Device and Model
- Preview your prototype
- Select Background color
- Set the prototype's Starting Frame
Learn more about prototyping
- Create prototype interactions and animations
- Select a starting frame for your prototype
- Customize your prototype device
- Prototype actions, triggers and animations
- Create overlays in your prototypes
- Create advanced animations with Smart Animate
- Prototype scroll interactions with overflow behavior
Share and collaborate
- Set prototype Presentation View options
- Share your prototype
- View prototypes on a mobile device
- Give feedback on prototypes with comments
- 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 animation, as well as the speed and direction.
- A transition is the type of animation. This defines how the action moves to the destination.
- The direction controls the direction that the transition comes from. Choose between left, right, top or bottom.
- The duration controls the time it takes to complete the animation. The shorter the duration, the faster the transition. Select a duration between 1ms and 10000ms (10 seconds).
- Easing affects the acceleration of the animation i.e. whether it starts slow or fast. This allows you to build animations 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.
- Choose which device will be shown when presenting your prototype. 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. Build more than one prototype within a single file. 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 Animations and Prototype device settings.