What are Figma Variables?

Figma Variables are named, reusable values introduced at Figma's Config 2023 conference (June 2023) that store colors, numbers, strings, or booleans. They live inside collections and support multiple modes — meaning a single variable like color/bg/primary can resolve to #FFFFFF in light mode and #1A1A1A in dark mode without duplicating components. Variables can reference other variables (aliasing), which maps directly to the concept of design tokens. They're scoped to specific use cases — fill, stroke, corner radius, gap, padding, text, or opacity — giving designers granular control. Unlike Figma Styles, which only wrapped visual properties, Variables connect design decisions to code-ready token structures. We use them on nearly every design system project to generate token JSON that syncs directly to our Next.js codebases via Style Dictionary or Tokens Studio.

How it works

Figma Variables operate through three core concepts: collections, variables, and modes.

Collection: A group of related variables. Think Primitives, Semantic, Component.
Variable: A named key with a type (COLOR, FLOAT, STRING, BOOLEAN) and one value per mode.
Mode: A named column within a collection. Common examples: Light/Dark, Desktop/Mobile, Brand-A/Brand-B.

When you apply a variable to a layer property (e.g., set a frame's fill to semantic/bg/surface), Figma resolves the current mode and walks the alias chain to a raw value.

Aliasing is where it gets powerful. A three-tier token architecture looks like this:

// Primitives collection
blue-500 = #3B82F6

// Semantic collection (aliases Primitives)
color/action/primary = {blue-500}

// Component collection (aliases Semantic)
button/fill/default = {color/action/primary}

Switching the Primitives mode from "Brand A" to "Brand B" cascades through every alias, updating thousands of component instances at once.

Figma's REST API (v1) exposes variables via GET /v1/files/:key/variables/local and POST /v1/files/:key/variables, enabling CI pipelines to push or pull token values. Tools like Tokens Studio for Figma (formerly Figma Tokens) and the official Variables API let teams round-trip tokens between Figma and code. We typically export to W3C Design Token Community Group (DTCG) format and run Style Dictionary 4.x to generate CSS custom properties, Tailwind theme extensions, and Swift/Kotlin values.

When to use it

Figma Variables shine when design decisions need to be systematic and multi-modal.

Use Variables when:

You're building a design system with light/dark themes or multiple brand skins
You want spacing, radius, and sizing tokens — not just colors — codified in Figma
Prototyping needs conditional logic (boolean variables driving visibility, number variables driving counts)
You need a single source of truth that syncs to code via API or plugin
Your team has more than one designer touching the same component library

Skip Variables when:

You're doing a one-off marketing page with no reuse intent
Your team is on Figma's free plan (modes beyond one require a paid plan)
You only need gradient or image fills — Variables don't support those types yet as of April 2026
Typography — font family, weight, and size still partially rely on Figma Styles or Text Variables, which remain limited

Figma Variables vs alternatives

Feature	Figma Variables	Figma Styles	Tokens Studio plugin	CSS Custom Properties
Value types	Color, Number, String, Boolean	Color, Text, Effect, Grid	All + typography, composition	Any CSS value
Multi-mode	✅ Native	❌	✅ Via sets	✅ Via classes/media queries
Aliasing	✅	❌	✅	✅ (`var(--ref)`)
API access	✅ REST API	✅ REST API	✅ Plugin + GitHub sync	N/A (code-native)
Code export	JSON via API	Manual or plugin	DTCG JSON, Style Dictionary	Already code
Prototyping logic	✅ Conditionals	❌	❌	N/A

Figma Styles are the predecessor — think of them as Variables with one mode and no aliasing. Tokens Studio adds features Figma Variables still lack (typography tokens, border shorthand) but introduces plugin dependency. For teams fully in Figma's ecosystem, native Variables are the starting point; Tokens Studio fills the gaps.

Real-world example

On a recent SaaS redesign, we built a design system in Figma with three variable collections: Primitives (48 color values, 8 spacing values), Semantic (112 aliased tokens), and Component (67 component-specific tokens). We defined two modes — light and dark — and a third "high contrast" mode for WCAG AAA compliance. The Figma REST API exported all variables nightly via a GitHub Action. Style Dictionary 4.1 transformed them into CSS custom properties for our Next.js 14 app and Kotlin values for the Android client. Total token sync time: ~18 seconds per build. Designers toggled modes in Figma to QA all three themes without leaving the canvas, cutting the theme review cycle from two days to half an hour.

Frequently asked questions about Figma Variables

Are Figma Variables the same as design tokens?

They're closely related but not identical. Design tokens are a platform-agnostic concept — named decisions (color, spacing, typography) stored in a format like the W3C DTCG spec. Figma Variables are Figma's native implementation of that idea, covering color, number, string, and boolean types. They don't yet cover every token type — typography and composite tokens are still partial. So Variables are a subset of design tokens, and most teams export Variables into a broader design token pipeline using Style Dictionary or Tokens Studio to fill the gaps.

When did Figma Variables become available?

Figma announced Variables at Config 2023 on June 21, 2023, and released them in open beta the same day. The Variables REST API followed in September 2023, enabling programmatic read/write access. Throughout 2024, Figma added scoping improvements, code syntax modes for variable inspection, and better collection management. By early 2025, Variables were considered stable and became the recommended approach over legacy Styles for color and numeric properties. The free plan still limits you to one mode per collection, which pushed most professional teams to Figma's paid Organization or Enterprise plans.

What's the alternative to Figma Variables?

The main alternative inside Figma is the Tokens Studio plugin (formerly Figma Tokens), which predates native Variables and supports more token types including typography, composition, and border shorthand. Outside Figma, teams sometimes manage tokens purely in code using JSON files and Style Dictionary, treating the codebase as the source of truth and syncing back to Figma. Another approach is using Figma Styles for colors and effects, though Styles lack aliasing and multi-mode support. For teams using other design tools, Penpot added its own variable system in 2024. We generally recommend starting with native Variables and layering Tokens Studio only when you hit coverage gaps.

Can Figma Variables be used for responsive design?

Yes, but indirectly. You can define modes like "Mobile" and "Desktop" in a collection and assign different spacing, font size, or padding values to each mode. Then, on a specific frame, you set the mode to "Mobile" to see all child layers resolve to mobile-appropriate values. This isn't true breakpoint-based responsiveness like CSS media queries — it's manual mode switching per frame. It's useful during design exploration but doesn't auto-switch at a breakpoint. We use this pattern to let designers toggle between viewport contexts quickly, then map those same tokens to Tailwind breakpoint utilities in code.

What is Figma Variables?