Fixed elements in prototypes in Figma - Step-by-Step Guide

Introduction

Fixed elements in prototypes keep parts of your design visible while you scroll. This helps when you want menus or headers to stay on screen, making your prototype easier to use and understand.

When your prototype has a top menu that should stay visible while scrolling content below

When you want a sidebar navigation to remain on screen as users scroll through pages

When you need a footer with important buttons to always be accessible

When you want to test how sticky headers behave in your app design

When you want to keep a floating action button visible during scrolling

Steps

Step 1: Select the element you want to fix

- Canvas or Layers panel

The element is highlighted and ready for editing

Step 2: Click the Prototype tab in the right sidebar

- Right sidebar

Prototype settings for the selected element appear

Step 3: Check the box labeled Fixed position when scrolling

- Prototype tab

The element is set to stay fixed during scrolling in preview

Step 4: Adjust the element’s position on the canvas if needed

- Canvas

The fixed element stays in the chosen spot during prototype scroll

Step 5: Click Present to preview your prototype

- Top-right Present button

The fixed element remains visible while you scroll the rest of the content

Before vs After

Before

Prototype scrolls normally and all elements move together, including headers and menus

After

Selected header or menu stays visible at the top while the rest of the content scrolls underneath

Settings Reference

Fixed position when scrolling

📍 Prototype tab in right sidebar

Keeps the selected element visible and fixed in place during scrolling

Default: Unchecked

Common Mistakes

Not selecting the element before enabling fixed position

The fixed position option applies only to the selected element, so it won’t work if nothing is selected

Always select the element you want to fix before checking the fixed position box

Fixing elements that are inside groups or frames without adjusting their position

The fixed element might not stay where expected if its parent frame scrolls or clips content

Place fixed elements outside scrolling frames or adjust their position carefully

Summary

Fixed elements keep parts of your design visible during scrolling in prototypes

Use the Prototype tab to enable fixed position for selected elements

Make sure to select the element first and preview to confirm the effect