Figma Prototyping Basics

A prototype turns a static design into an interactive, clickable experience. Instead of explaining how an app works, you hand the prototype to a user and let them click through it. Figma builds prototypes directly from your design frames without any coding.

What Is a Prototype?

A prototype connects frames with links. Clicking a button in Frame A takes you to Frame B — just like a real app. You can share a prototype link with anyone. They open it in a browser and interact with it as if it were the finished product.

Prototype Flow Diagram

  [Frame A: Login Screen]
          |
          | User clicks "Sign In" button
          v
  [Frame B: Home Screen]
          |
          | User taps "Profile" icon
          v
  [Frame C: Profile Screen]
          |
          | User taps "Back" arrow
          v
  [Frame B: Home Screen]   (goes back)

Switching to Prototype Mode

At the top of the right panel, you see two tabs: Design and Prototype. Click Prototype to enter prototyping mode. The panel changes to show flow and interaction settings.

Creating a Connection (Link)

1. Switch to Prototype mode.
2. Select the element that the user will click (e.g., a button).
3. A blue circle with a + appears on the right edge of the element. Drag from this circle to the destination frame.
4. A blue arrow appears connecting the two frames. This is called a connection.

Interaction Settings

After creating a connection, an interaction panel appears. It contains three main settings:

Interaction Settings Diagram

  +-----------------------------------------------+
  | TRIGGER       | ACTION        | DESTINATION   |
  |---------------+---------------+---------------|
  | On Click      | Navigate To   | Home Screen   |
  | On Hover      | Open Overlay  | Modal Frame   |
  | On Drag       | Scroll To     | Section       |
  | After Delay   | Back          | Previous Frame|
  | Key/Gamepad   | Close Overlay | —             |
  +-----------------------------------------------+

Triggers

• On Click – The most common trigger. User clicks the element.
• On Hover – Interaction fires when the mouse moves over the element.
• After Delay – Automatically triggers after a set time (useful for splash screens).
• On Drag – Triggers when the user drags the element.

Actions

• Navigate To – Goes to a specified frame.
• Open Overlay – Opens a frame on top of the current one (like a popup or modal).
• Swap Overlay – Replaces the current overlay with a new one.
• Close Overlay – Closes the topmost overlay.
• Back – Returns to the previous frame in the navigation history.
• Scroll To – Scrolls the current frame to a specific layer position.

Transitions and Animations

When a user navigates from one frame to another, Figma can animate the transition. Set this in the interaction panel below the trigger and action settings.

Easing Curves

Easing controls how an animation speeds up or slows down. A transition with easing feels natural. One without feels mechanical.

Easing Options

  EASING TYPE     MOTION FEEL
  Linear          Constant speed, robotic
  Ease In         Starts slow, ends fast (like a car accelerating)
  Ease Out        Starts fast, ends slow (like a car braking) ← most natural
  Ease In and Out Starts slow, peaks, ends slow
  Spring          Bouncy, overshoots and snaps back
  Custom          Set your own Bezier curve

Scroll Behavior in Prototypes

If your frame content is taller than the frame itself (like a long page), Figma can simulate scrolling.

1. Select the frame.
2. In the Prototype Panel, look for Overflow Behavior.
3. Set it to Vertical Scrolling.
4. Make the content inside the frame taller than the frame's visible area.

In the prototype preview, the user can scroll down to see the hidden content — exactly like a real webpage.

Scroll Frame Diagram

  FRAME (visible area: 390 × 844px)
  +---------------------------+
  | Header                    |  ↑ Visible
  | Card 1                    |
  | Card 2                    |  ↓ User scrolls down
  | Card 3                    |
  | Card 4                    |  ← hidden below fold
  | Card 5                    |
  | Footer                    |  ← revealed after scrolling
  +---------------------------+
  Total frame height: 2400px

Fixed Elements During Scroll

A navigation bar should stay at the top while the user scrolls. To fix an element in place:

1. Select the element (e.g., a navigation bar frame).
2. In the Design Panel, look for Constraints.
3. Set Vertical constraint to Top.
4. Check the Fix Position When Scrolling checkbox.

Starting a Flow

A flow defines the starting frame of a prototype. Select a frame and click + Flow Starting Point in the Prototype Panel. You can create multiple flows in one file for different user journeys — for example, a "Login Flow" and an "Onboarding Flow".

Previewing and Sharing a Prototype

1. Click the Present button (play icon) in the top-right toolbar.
2. The prototype opens in a new browser tab in presentation mode.
3. Click through the screens as a user would.
4. To share: click Share Prototype in the top-right of the preview. Copy the link and send it to anyone.

The recipient does not need a Figma account to view the prototype — they just open the link in a browser.