How to create anchor links in Figma

A visualisation of how Page Content and the View Windows fit together to create the Anchor Link illusion.

Anchor Links aren’t the most exciting interaction to design, but they are a crucial design element for validating long form content and larger websites. It’s not intuitive to create Anchor Links but it’s possible with the Scroll Overflow technique, if you’re careful with layer management. I’ll show you how to create one, how you can organise your layers to keep it manageable, and a couple of limitations you may encounter.

Here’s the Figma preview link if you just want to see a proof-of-concept:

https://www.figma.com/proto/6lHkEfRTTArHCwNxPCAYm8/medium-blogs?node-id=1%3A102&viewport=226%2C592%2C0.5461657047271729&scaling=scale-down-width

What is Scroll Overflow

If you’ve been designing functional prototypes for mobile devices within Figma then this is a concept you’ll have encountered. In many apps you’ll want some elements such as the app bar to remain in a fixed position, whilst letting the rest of the elements and content be scrollable. It’s often talked about with the ‘Fix position when scrolling’ checkbox feature, since it’s only possible once you’ve activated an Overflow Behavior.

When the content of a Frame doesn’t fit, you get the ‘Overflow Behavior’ dropdown in the Prototype tab.

As you can see in the screenshot above, I have a parent Frame called ‘iPhone 11 Pro / X — 1’ with layers inside that are larger than the parent Frame. When this happens I can set the Overflow Behavior to ‘Vertical Scrolling’, and I’ve also ticked the ‘Fix position when scrolling’ checkbox for my app bar at the bottom. This allows a viewer to scroll the page up and down in Figma’s Presentation View more realistically.

You can read more about it in the Figma documentation for prototype scrolling with overflow behaviour.

Anchor Link anatomy

Diagram detailing the anatomy of creating an Anchor Link in Figma.

There are three key parts required to create an Anchor Link:

• Page Content
• View Windows
• Anchor Links