Developer mode
Opens components on the React tab by default.
Your bookmarks

Sticky

Keeps components at a given position on the screen during scrolling.

Your designs may have elements that need to be present on the screen at all times. Perhaps this is basic navigation or the ability to easily jump back to the top of the page after scrolling.

Use a Sticky component to attach content to a given screen height even when users scroll to the bottom of the page.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

Use for essential actions

Sticky elements grab users’ attention. Just remember that if everything grabs for attention, then nothing stands out as important.

Limit stick elements to places where they add value. This can be actions that apply to the entire page, navigation for the entire app, or context such as headers.

Keep it small

Sticky elements take up more of the user’s attention than ordinary elements. Don’t devote too much space to fixed elements. Leave room for the rest of your designs to breathe.