Figma variables: the complete guide for 2026
Types, collections, modes and plan limits, aliasing, scoping, code syntax, prototyping, extended collections, and the mistakes that force a rebuild.
Figma variable collections used to stop at four modes on Professional and Organization plans. As of October 2026, Figma's plan comparison lists up to 10 modes per collection on Professional, 20 on Organization, and unlimited modes through extended collections on Enterprise, and that change alters how you should lay out collections in the first place.
Figma variables are named, reusable values that you bind to design properties and prototype logic. Each variable belongs to a collection, and each collection can hold several modes, so one variable can store a light value and a dark value (or a value per brand, density, or language) and switch between them.
Key takeaways
- As of October 2026, Figma has six variable types: color, number, string, boolean, and the newer timing and easing types for Figma Motion.
- Each collection holds up to 5,000 variables, and the mode limit per collection depends on your plan.
- Aliases only work between variables of the same type, so a color can point to a color but never to a number.
- Scoping and code syntax decide whether designers pick the right variable and developers see the right name.
- Extended collections, on Enterprise, inherit every variable and mode from a parent; you can override values but not add variables or modes.
What are the six Figma variable types?
| Type | What you can bind it to |
|---|---|
| Color | Fills, strokes, text fills, gradient stops, shadow colors, color styles |
| Number | Radius, width and height, padding and gap, font size, weight, line height, letter spacing, stroke weight, opacity, blur |
| String | Font family, font style, text content, variant values in prototypes |
| Boolean | Layer visibility and true or false variant properties |
| Timing | Delay and duration of Figma Motion animations |
| Easing | Figma Motion presets and keyframes |
Timing and easing arrived with Figma Motion, which launched in open beta in June 2026, so expect those two to keep changing.
How do collections and modes work?
A collection is a set of variables that share the same modes. Groups are folders inside a collection; a name like color/text/primary places a variable in nested groups.
A mode is one column of values. The left-most column is the default, and a new mode starts as a copy of the first column. You apply a mode to a page, section, frame, or component, and every object set to Auto inherits its parent's mode, falling back to the collection default.
| Plan (as of October 2026) | Modes per collection |
|---|---|
| Starter | Default mode only |
| Professional | Up to 10 |
| Organization | Up to 20 |
| Enterprise | Unlimited with extended collections |
Higher limits don't mean one collection should hold everything. Give each axis of variation its own collection: Theme with light and dark, Density with compact and comfortable. Two collections with two modes each cover four combinations; one collection would need four modes and four copies of every value.
How do aliasing, scoping, and code syntax work?
An alias is a variable whose value is another variable of the same type. Aliases can cross collections, which is how a semantic color/text/primary in a Theme collection points to color/gray/900 in a Primitives collection. Keep chains to two or three hops so they stay readable in Dev Mode.
Scoping limits which properties a variable appears in:
- Number variables: gap and padding, corner radius, font properties, opacity, effects, strokes, text content, or dimensions.
- Color variables: frame fills, shape fills, text fills, strokes, or effects.
- String variables: font family, font weight or style, or text.
New variables default to "Show in all supported properties", which is how space/16 ends up as a corner radius. Every unscoped variable is a suggestion you didn't mean to make.
Code syntax stores the name developers use, one entry each for Web, Android, and iOS, and it appears in Dev Mode code snippets. Without it, developers see a normalized version of your design name, which rarely matches the codebase.
Variables in prototypes
On Professional plans and above, prototypes can change variables at runtime. Set variable writes a new value on a trigger, and expressions do math on numbers, join strings, and evaluate booleans. Conditionals add if and else branches. Set variable mode switches the mode for every Auto object on the page, so one toggle flips a whole prototype from light to dark.
Every unscoped variable is a suggestion you didn't mean to make.
Extended collections and JSON import and export
Extended collections are Figma's multi-brand feature, on Enterprise. You extend a parent collection once per brand and override values in each extension; overrides show in blue, and "Reset change" reverts them. The extension inherits names, modes, order, descriptions, and scopes, so you can't add variables or modes there. Two caveats from Figma's docs: a color's value and opacity count as one override, so changing only opacity freezes the color too, and accepting the library update after a migration removes previously set modes from designs.
Import and export is native. Right-click a collection and choose "Export modes" for one JSON file per mode, or right-click a single mode to export or import it. Imports must follow the DTCG format; Figma maps color (sRGB or HSL), dimension in px, a single font family, duration in seconds, and number, and a com.figma.type extension turns numbers into booleans.
The variable setup checklist
Run this before you publish a library that uses variables:
- One collection per axis of variation (theme, density, brand).
- Primitives in a collection hidden from publishing; designers apply only semantic variables.
- Every variable scoped, with "Show in all supported properties" off.
- Web code syntax on every published variable, matching your CSS custom property name.
- A description on each semantic variable that says when to use it.
- Modes set on the highest frame possible, with nested layers left on Auto.
- A mode export committed to version control after each publish, so you can diff changes.
The most common failure breaks item 6: a mode hard-set on a nested instance ignores the page's mode and looks broken on one screen. If dark mode works everywhere except one card, check that card's mode before its variables.
Where Pegasus fits
Pegasus ships its 470 design tokens as Figma variables, covering color, type, spacing, radius, and shadow, with light and dark modes. Every one of its 1,540 components comes in light and dark variants, and all of them are built with Auto Layout.
The variables aren't only a Figma artifact. One token source themes both the Figma variables and the React code's theme object, which is what makes a rebrand a token change rather than a redesign. The 14-Day Rebrand Guarantee rests on that: if you can't retheme Pegasus to your brand within two weeks of buying, you get a full refund.
To see the checklist applied, open a Pegasus component and inspect which variables its fills, padding, and radius use.
FAQ
What is the difference between Figma variables and styles?
Variables store single values, such as a color or a spacing number, and can hold a different value per mode. Styles store composites, such as a text style that bundles font, size, weight, and line height, or an effect style with several shadows. Variables can be applied inside styles, but not the reverse, so most systems use both.
Can I use Figma variables on the free plan?
Yes, with limits. Variables are available on all plans, so a Starter file can create and apply them. As of October 2026, though, extra modes require an Education or paid plan, publishing to a team library needs a paid plan, and variables in prototypes need an Education or paid plan. The free plan is for learning, not for a shared system.
Can I export Figma variables to JSON?
Yes. As of October 2026, Figma exports variable modes as JSON natively: right-click a collection and choose Export modes, or right-click one mode to export just that mode. The files follow the Design Tokens Community Group format, which imports also require, so you can round-trip tokens between Figma and a repository.
Why did my variable modes disappear after a library update?
If the library moved to extended collections, this is expected. Figma's docs say that accepting the library updates removes previously set variable modes from your designs, and designers must reapply modes from the extended collection. Announce the migration in the publish description and check key screens after accepting.
Sources
- Overview of variables, collections, and modes, Figma Help Center (2026)
- Modes for variables, Figma Help Center (2026)
- Create and manage variables and collections, Figma Help Center (2026)
- Compare Figma plans and features, Figma Help Center (2026)
- Extend a variable collection, Figma Help Center (2026)
- Use variables in prototypes, Figma Help Center (2026)
- Schema 2025 design systems recap, Figma (2025)
- Introducing Figma Motion, Figma (2026)
One system. In Figma and in code.
Pegasus ships 1,540 components, 470 tokens, matching React code, Storybook, and a local MCP server. $149, one-time.
Get the full system