How do I fix the position when scrolling in Figma?

Let's get right to the point. There's two ways we can go trough this - you can either watch my video which is right below and it will explain step by step how to fix the position of a layer when you scroll, or you can read the text below the video which will explain the same exact thing but probably a bit more clear.

So here goes nothing:

How do I fix the position of a layer when scrolling in Figma?

Chances are, if you're looking for an answer you're either a beginner or you can't find the option anymore because they (Figma) moved it a few weeks ago.

But not to worry, I'm here to help:

First step is you select the layer you want to fix.
Then go on the right side panel and go to Prototype settings
At scroll behavior switch from Scroll with parent to either Fixed or Sticky.

Difference between Fixed and Sticky in Figma:

Fixed: Well, it does exactly what it says. It keeps the layer in the same exact position no matter how you scroll
Sticky: This option makes the layer behave like a relative element up until it gets to the edge of the screen. This means your layer will move with the rest of the content until it reaches the top part of your screen. After that it becomes a fixed layer and it will stick to the edge.
If you decide to scroll back up the sticky layer will get back to its initial position.

Most of the times fixed and sticky are used for top bars and menus, so if you want your Figma design to be as interactive and realistic as an actual live product then you can make sure your layers have the proper scroll behavior.

To summarize

If you want to fix position of certain layers simply go to Prototype and under Scroll Behavior switch from Scroll with Parent to Fixed.

🧑 andrei b.

Categories

Useful Links