How to Create a Fixed Position in Figma

When creating interactive designs in Figma for interfaces, a common process is creating a scrollable page with elements that move along the page. While you may want a gallery or particular objects to move as you scroll, you may have objects you want to remain in a fixed position when a user scrolls through the page, such as headings or sidebars.

Whether you are new to designing on Figma or you are an experienced user, this guide will help you fix an object’s position on the page. The option to set an object’s position on the page has moved in the recent updates to Figma, and it is now located in the Prototype Tab.

Here is all you need to know about creating a basic fixed position when scrolling in Figma.

Table of Contents

What Is a Fixed Position?

When creating a scrollable page on Figma, you need to ensure that all the elements you want visible on the page are included in the frame you use when you add a scrolling frame in Figma. However, this results in all the elements moving up or across the page when the user scrolls.

For instance, in the design I’ve created when I scroll the page to view more images in the gallery, the sidebars also move up along with the gallery.

In some cases, you will need to lock certain elements into fixed positions to ensure that they remain in place even when the rest of the content is scrollable. This works well with headers that stay at the top of the visible page at all times or sidebars with things like logos and navigation panels.

Once you fix an element into position, it will remain in place while the rest of the page scrolls. For instance, once I lock the sidebars in place, I can scroll down the gallery, and the sidebars aren’t affected.

When you fix elements to remain in place, you can either set it to fixed, which keeps the object in its original position, or Sticky, which keeps the object stuck to the top edge of the screen.

Previously, the fixed position object was a checkbox located in the Design tab under the Constraints section.

The fixed position option is now located under the Prototype tab. Keep reading to work out how to use this feature correctly.

Overview of Creating a Fixed Position When Scrolling

Add all the elements to the page with a scrolling frame
Group any objects that need to stay fixed together
Select the object you want to remain fixed
Open the Prototype tab
Locate the position drop-down under the Scroll Behavior section
Change the Position to Sticky or Fixed
Check the Layers Panel
Click the Present button
Test the scrolling feature in the Present tab

Step-by-Step of How to Fix an Object’s Position When Scrolling

At the end of these steps, you will have successfully set an object, or multiple objects, to remain fixed in position when scrolling the other elements on a page. This is useful when designing web pages or pages that will be displayed on an app or cellphone screen.

I will demonstrate the process using images sourced from Unsplash.

Add All the Elements to the Page With a Scrolling Frame

Before you fix an object into position, you need to add all the elements you want on the Page. Then ensure that you added all the elements to a frame. This will make all the objects scrollable, but you will change that shortly.

For this example, I have created an image gallery with sidebars that I want to remain in place when scrolling through the images.

Group Any Objects That Need to Stay Fixed Together

Next, you can make the task easier by grouping any elements that are connected and need to remain fixed in the same place. For instance, my sidebar is made up of a rectangle and text, so I can group each sidebar together, to ensure the text and rectangle both remain in place.

To group objects, select the objects by holding in Shift and clicking on each object, then right-clicking and pressing Group Selection. You can also use the shortcut Control + G on Windows or Command + G on Mac.

Repeat this process on other elements, such as the sidebar on the other side of the page.

Select the Object(s) You Want to Remain Fixed

Now, you can select the object or multiple objects that you want to remain fixed when scrolling. Here I will select both sidebars that I grouped, so simply selecting the two groups ensures that all the elements are selected correctly.

Open the Prototype Tab

Once all the objects are selected, open the Prototype tab by clicking on the name in the right-hand panel.

Locate the Position Drop-Down Under the Scroll Behavior Section

Near the top of the Prototype tab, you will find the Scroll Behavior section, underneath which is the Position drop-down menu. By default, the Position setting will be on “Scroll with parent,” which indicates that the object(s) will move with the rest of the objects on the page.

Change the Position to Sticky or Fixed

Open the Position drop-down menu and set it to Sticky or Fixed, depending on how you want the object(s) to behave.

Check the Layers Panel

You can see whether all the objects are set to fixed by looking at the Layers Panel. The panel divides the objects on the page into the ones that will scroll and those that will remain fixed.

Click the Present Button

Next, to test the page on a mock-up of the device you are designing for, click the Present button, which looks like a Play icon at the top-right of the workspace.

Test the Scrolling Feature in the Present Tab

The Present tab opens in a new tab in your browser. Here you can scroll using your mouse to check whether the gallery scrolls correctly and the sidebars remain fixed in place.

Tools:

Figma

How to Create a Fixed Position When Scrolling in Figma