Interactive Prototyping and Connections

Interactive prototyping transforms a collection of static frames into a navigable, clickable experience that closely resembles a real application. In Figma, this is achieved entirely within the Prototype tab, where you wire frames together with connections, assign triggers and actions, choose transitions, and configure scrolling behaviour — all without writing a single line of code. The result is a prototype you can preview in a browser, share with stakeholders, and use for usability testing before any development begins. Understanding how each piece of the prototype system works together allows you to simulate everything from a simple three-screen flow to a complex modal-driven interaction with animated micro-interactions.

The Prototype Panel Overview

To begin building interactions, you must first switch from the default Design tab to the Prototype tab located at the top of the right-hand panel. This mode change does not alter your design in any way — it simply surfaces a different set of controls relevant to interactivity rather than visual styling. Once inside Prototype mode, the panel context becomes interaction-aware: selecting any frame or element on the canvas will display every interaction that has been attached to it, making it easy to audit and edit connections without hunting through the canvas manually.

When you hover over a selected frame in Prototype mode, a small blue circle with a plus icon — the interaction handle — appears on the right edge of that frame. Dragging this handle toward another frame draws a blue arrow (called a connection or noodle) that links the two frames. The source frame is where the user initiates an action, and the destination frame is where the prototype navigates as a result. You can draw multiple connections from a single frame to support different user paths, and you can connect individual components, buttons, or hotspots rather than whole frames when finer control is needed.

The prototype panel also exposes two important global settings that apply to the entire prototype rather than individual interactions:

• Device — Lets you choose a device frame (iPhone 15, Pixel 7, MacBook, custom, etc.) that wraps the prototype preview. This ensures the preview renders at the correct screen size and aspect ratio so stakeholders see the design in its intended context.
• Background colour — Sets the colour of the area surrounding the device frame in the preview window. A dark background, for example, emphasises a light-themed mobile design without the distraction of Figma's default grey canvas.

These settings are stored per flow, meaning different flows within the same file can be configured for different devices — useful when a project has both a mobile and a desktop variant.

Triggers and Actions

Every connection in Figma is governed by two concepts: a trigger (what the user does) and an action (what the prototype does in response). Clicking the blue connection arrow or the interaction entry in the prototype panel opens an editing panel where you configure both.

Triggers define the user gesture or event that initiates the action:

• On click / On tap — The most common trigger. On click is used for desktop prototypes where a mouse click is expected; On tap is used for mobile. Functionally identical in the Figma preview, but the label communicates design intent.
• On hover — The action fires as soon as the cursor moves over the element. Ideal for simulating dropdown menus, tooltip reveals, or hover states on navigation items.
• On drag — Allows the user to drag the element or frame to trigger the action. Useful for simulating swipe gestures on carousels or drawer panels.
• After delay — The action fires automatically after a specified number of milliseconds with no user input. This is perfect for splash screens, auto-advancing onboarding slides, or timed notifications.
• Key/gamepad — Maps a keyboard key or gamepad input to an action, supporting kiosk or desktop keyboard-navigation prototypes.
• Mouse enter / Mouse leave — More granular than On hover, these fire specifically when the cursor enters or exits the element's bounding box.
• Mouse down / Mouse up — Allow you to simulate press-and-hold interactions or distinguish between the press and release phases of a click.

Actions define what the prototype does once the trigger fires:

• Navigate to — The most fundamental action. The prototype replaces the current screen with the destination frame. Use this for standard page-to-page navigation: tapping a "Sign In" button navigates to the home screen, for example.
• Open overlay — Places the destination frame on top of the current screen rather than replacing it. The underlying screen remains visible (and interactive, if configured). Use this for modal dialogs, bottom sheets, dropdown menus, and tooltips.
• Swap overlay — Replaces an existing overlay with a different one without dismissing and re-opening it, enabling multi-step modal flows (e.g., a confirmation dialog replacing a form sheet).
• Scroll to — Jumps the viewport to a specific layer within the current scrollable frame without navigating away. This simulates anchor-link behaviour, like a "Back to top" button or a table-of-contents link.
• Back — Returns to the previously visited frame, mirroring a browser or OS back button. It uses Figma's internal navigation history.
• Close overlay — Dismisses the topmost open overlay and returns focus to the underlying frame. Typically used on a modal's close button or a cancel action.
• Open URL — Opens an external link in a new browser tab. Useful when a prototype includes links to live content or documentation.
• Set variable / Conditional — Available with Figma's Variables feature, these actions enable state-based logic in prototypes, such as toggling a switch component or tracking a step count.

Consider a login screen: a "Log in" button has an On click trigger with a Navigate to action pointing to the home dashboard frame. An "Forgot password?" link has an On click trigger with an Open overlay action pointing to a password-reset modal frame. Both interactions co-exist on the same source frame, each attached to its respective element.

Transitions and Animation

When the prototype moves from one frame to another, you can control how that movement looks. Figma provides several transition types, each suited to different UI patterns. Transition settings appear in the same interaction editor where you set the trigger and action.

• Instant — No animation whatsoever; the destination frame appears immediately. This is appropriate for rapid click-through prototypes where the purpose is to test information architecture rather than motion design. It is the fastest to configure and keeps the focus on structure.
• Dissolve — The current frame fades out while the destination frame fades in simultaneously. This works well for full-page transitions, modals appearing on a dimmed background, or any context where a soft entrance feels natural. Duration is configurable (typically 200–400 ms).
• Move in / Move out — The destination frame slides in from a specified direction (left, right, top, or bottom) while the current frame either remains in place or slides out. Standard for tab navigation or wizard-step flows where directionality reinforces the user's mental model.
• Push — Similar to Move in/out, but both frames move together, so the incoming frame appears to push the current frame off-screen. Common in iOS-style navigation stacks.
• Slide in / Slide out — The frame slides in or out from a direction on top of the current frame without moving the current frame. Useful for side drawers and panels.
• Smart Animate — Figma's most powerful transition. When Smart Animate is selected, Figma looks for layers that share the same name across the source and destination frames. It then automatically interpolates their position, size, opacity, rotation, and other properties between the two states. This creates the illusion of the UI elements morphing or moving in place — a technique called micro-interaction. For example, if both frames contain a layer named card-avatar, Smart Animate will smoothly move and resize it from where it sits in frame A to where it sits in frame B. No plugin or code is required. The key requirement is consistent naming: if the names differ even by a single character, Smart Animate will not interpolate those layers.

Easing curves refine the temporal feel of any animation. Figma provides several presets and a custom Bézier editor:

Choosing the right easing is not merely aesthetic — it communicates meaning. Ease Out for entering elements matches the physics of a real object decelerating as it lands, which feels natural to users. A Spring easing on a toggle switch makes the UI feel tactile and responsive without overdoing it. Duration also matters: transitions shorter than 150 ms can feel jarring, while transitions over 500 ms feel sluggish in a production context.

Scrollable Frames and Fixed Elements

Many screens contain more content than fits in a single viewport — a news feed, a product listing, a settings page. Figma allows individual frames to behave as scrollable containers, accurately simulating this behaviour in the prototype preview.

To enable scrolling on a frame, select the frame, open the Prototype panel, and choose a Scroll behaviour: Vertical scrolling, Horizontal scrolling, or both. The visible area of the frame — its defined height or width — becomes the viewport. Any content that extends beyond that boundary is hidden on the canvas until the user scrolls in the preview.

A practical example: you have a mobile frame with a fixed height of 844 px (iPhone 14 viewport), but your content — a list of items — measures 2 400 px tall. Set the frame height to 844 px and enable Vertical scrolling. In the prototype preview, the user can scroll down through the full 2 400 px of content just as they would on a real device.

Horizontal scrolling is used for UI patterns where content overflows in the horizontal axis:

• Carousels — A row of cards that the user swipes through left and right.
• Gallery rows — Thumbnail strips in a photo-editing or e-commerce app.
• Tab bars with overflow — Tab navigation containing more tabs than fit on screen.

For horizontal scrolling, set the frame width to the visible viewport width (e.g., 390 px for an iPhone) and extend the frame's content beyond that width. Enable Horizontal scrolling in the prototype panel.

Fixed elements during scroll — also called sticky elements — are layers that remain visually anchored to the viewport even as the rest of the frame's content scrolls beneath them. Common examples include a navigation bar at the top, a floating action button, a bottom tab bar, or a cookie consent banner. To make an element fixed, select the layer, go to the Design panel (not the Prototype panel), and check Fix position when scrolling. The layer will now stay in place during prototype preview scrolling, regardless of how far down the user has scrolled.

It is important to position fixed elements at the correct coordinates relative to the frame's viewport dimensions, not the total content height, so they appear exactly where they should in the preview.

Overlays and Modal Patterns

An overlay in Figma is a frame that appears on top of the current screen when triggered, simulating modals, dialogs, bottom sheets, dropdown menus, drawers, and contextual popovers. Unlike Navigate to, which replaces the screen entirely, Open overlay stacks the target frame above the current one, keeping the underlying screen intact and optionally interactive.

To create an overlay interaction, draw a connection from a trigger element (e.g., a "Delete" button) to the target frame (e.g., a confirmation dialog frame), then set the action to Open overlay. Figma then exposes overlay-specific configuration:

• Position presets — Figma offers preset positions for where the overlay frame appears:
  • Centered — The overlay is centred over the current screen. Standard for confirmation dialogs and alert modals.
  • Top — The overlay docks to the top of the screen. Useful for notification banners or top sheets.
  • Bottom — The overlay slides up from the bottom, simulating a bottom sheet or action sheet — a very common mobile pattern.
  • Left / Right — The overlay appears from the left or right edge, simulating a navigation drawer or a side panel.
  • Manual — You specify exact X and Y offsets, allowing you to place a dropdown, tooltip, or context menu precisely relative to the trigger element.
• Background dimming — Enabling this option adds a semi-transparent dark scrim behind the overlay, visually separating it from the underlying screen and directing the user's attention to the overlay content. You can customise the colour and opacity of the scrim. For a standard modal, a black scrim at 40–60% opacity is common.
• Close when clicking outside — When checked, clicking outside the overlay frame dismisses it. This mirrors the behaviour of most native OS dialogs and reduces the need to add a separate close button for simple confirmation cases.
• Add background blur — Applies a blur to the underlying screen behind the overlay, creating a glassmorphism effect.

Overlays can themselves contain interactive elements with their own connections. This enables multi-step modal flows: a user clicks "Edit profile," an overlay appears with a form; the user fills out the form and clicks "Next," which triggers a Swap overlay action that replaces the form overlay with a preview overlay — all without ever leaving the original underlying screen. This pattern is widely used in checkout wizards, permission request sequences, and onboarding tours.

A concrete example of layered overlay usage:

• Frame A: Home screen
• Frame B: "Share" bottom sheet — triggered by tapping a share icon on Frame A using Open overlay / Bottom
• Frame C: "Copy link confirmation" toast — triggered by tapping "Copy link" inside Frame B using Open overlay / Top with a 1500 ms After delay trigger on Frame C to auto-dismiss back to Frame A

This chain creates a fully realistic share flow purely within Figma's prototype system.

Previewing and Sharing the Prototype

Once your interactions are wired, you can preview the prototype at any time by clicking the Play button (the triangle icon) in the Figma toolbar. This opens the prototype in a new browser tab, rendering it inside the device frame you configured in the Prototype panel. The preview is fully interactive: you can click buttons, trigger overlays, scroll frames, and navigate between screens exactly as a user would.

The flow start point determines which frame the preview begins on. To set it, select a frame in Prototype mode and click + Add starting point in the prototype panel, or right-click the frame on the canvas and choose Add starting point. You can define multiple starting points to create separate flows — for example, one flow for the onboarding sequence and another for the logged-in home screen — each accessible independently in the preview and share panel.

Sharing the prototype allows collaborators, clients, and test participants to view and interact with it without needing a Figma account:

• Click the Share button in the top-right toolbar.
• In the sharing dialog, set the link permission to Anyone with the link can view.
• Copy the prototype link (distinct from the editor link) and send it to viewers. Recipients open the link in their browser and see the prototype in presentation mode without any Figma editor interface.
• The Inspect tab is also available to viewers with the appropriate permissions, allowing developers to examine spacing, typography, and assets without gaining edit access.

Presentation mode hides Figma's entire UI — toolbar, panels, canvas — and displays only the prototype within the device frame on a clean background. This is the most focused view for stakeholder presentations and usability testing sessions. You can enter presentation mode by pressing Ctrl + Alt + Enter (Windows) or ⌘ + Option + Enter (Mac) while in the preview, or by selecting it from the preview toolbar. Keyboard arrow keys can be used to advance between frames in a linear flow during a presentation.

A well-configured prototype with a defined starting point, appropriate device frame, and a shareable link becomes a standalone artefact that communicates design intent more effectively than any static screenshot or annotated spec — allowing real interactions to be tested and validated before a single component is handed off to engineering.