Section-Scoped Variable Modes in Figma

WHY IT EXISTS Before sections could scope variable modes, a Figma page could only hold one active mode per variable collection at a time. If you wanted to show both a light and dark version of the same screen, you had to split them across separate pages or duplicate frames and manually detach variables. That broke the single-source-of-truth promise and made side-by-side reviews impossible. Section-level scoping was introduced so that a single canvas could contain multiple mode contexts without fragmenting the file structure.

THE MENTAL MODEL Think of a section as a transparent container that rewrites the environment for anything inside it. Just like a CSS cascade where a local class overrides a global one, a section's mode setting overrides the page-level mode for every frame, component, and instance nested within it. The page is the default context; the section is a localized exception.

HOW IT WORKS You apply a mode override by selecting a section and choosing a mode from the variable collection picker in the right sidebar. Every object inside that section inherits the section's mode instead of the page mode. If you nest sections, the innermost section's mode wins. There is no visual indicator on the canvas itself beyond the section label, and the layers panel does not flag the override. Variables must already belong to a collection with multiple modes for the override option to appear.

WHEN TO USE IT Use section scoping when you need side-by-side comparisons of themes, breakpoints, or brand modes on one page. It is ideal for design reviews, presentation decks, and component stress-testing where stakeholders need to see variations without clicking through pages. It also keeps related iterations physically close on the canvas, reducing the risk of drift between versions.

WHEN NOT TO USE IT Do not use it as a replacement for proper component variants or responsive constraints inside a single design. If every frame in your file needs a different mode, you have probably outgrown page-level organization and should split into multiple files or pages. Also avoid deep nesting of sections with conflicting modes; the silent precedence rules make debugging painful when overrides stack three or four levels deep.

ONE CANONICAL EXAMPLE Imagine a design system file with a button component that uses color variables from a theme collection. On the page level, the mode is set to light. You create a section named dark mode QA, set its theme variable collection to dark, and paste the button inside. The button instantly renders dark tokens while the rest of the page stays light. A product manager can compare both states in one glance during a review without you maintaining two separate pages.