Version Control: Three Ways Figma Explored Horizontal Scrolling | Figma Blog (opens in new tab)

Figma’s request for horizontal scrolling in the Layers panel exposed significant design and engineering complexity. The panel contains interactive, virtualized layers whose names and nesting change dynamically, so scrolling could easily obscure hierarchy or disrupt users’ mental models. Through three unshipped prototypes, the team learned that preserving context and preventing accidental actions mattered more than applying seemingly simple scrolling behaviors.

Why Horizontal Scrolling Was Difficult

• Nested layers can extend beyond the panel, requiring users to move horizontally to see their full hierarchy.
• Layers are interactive: users can hide, lock, collapse, and expand them while scrolling.
• Virtualization renders only visible layers for performance, meaning newly visible rows may have different text lengths.
• The design needed to communicate that more content existed without making the hierarchy harder to understand.
• Code-based prototyping with JavaScript, HTML, CSS, and React helped the team test behavior across thousands of layers and complex interactions.

Version One: Indicators at the Panel Edges

• The team explored showing icons at the top-left and bottom-right edges when layers moved out of view.
• This symmetrical treatment was intended to help users understand their position in the hierarchy.
• Engineering challenges arose because edge icons needed opaque backgrounds that covered layer text while scrolling.
• Layer rows did not have enough positional knowledge to determine which areas should be covered or revealed.
• The design also created a ragged edge where partially visible layer names ended, introducing visual clutter.
• The experiment demonstrated that a symmetrical solution could create new problems, particularly around unused white space.

Version Two: Automatically Scrolling to Selected Layers

• Another prototype automatically scrolled the Layers panel to center a layer selected on the canvas.
• Although this made the selected layer easy to find, it often moved the panel both vertically and horizontally.
• Testers found the behavior disorienting because parent layers and surrounding context disappeared.
• Figma compared the experience to a map suddenly jumping to another location while driving.
• The team concluded that users need to retain their mental model of a layer’s name, location, and relationship to parent components.

Version Three: Renaming Layers While Scrolling

• Horizontal scrolling created ambiguity when a user began editing a layer name and then scrolled to another layer.
• One possible behavior was to save the edited text automatically when scrolling away.
• The team rejected this because scrolling was not a strong enough signal that the user intended to confirm the rename.
• The issue highlighted the need to avoid turning navigation actions into irreversible edits.

Figma’s experiments show that horizontal scrolling in a dynamic hierarchy is not merely a visual or mechanical feature. The best solution must preserve orientation, context, and user control while handling virtualization and interactive layer states.