Figma Variables and Design Tokens: English Vocabulary for Designer-Developer Handoff

The handoff between designers and developers has always required shared vocabulary, but Figma Variables have added a new layer of terminology. Whether you are a developer consuming a design system or a designer explaining your token structure to an engineering team, precise English vocabulary makes collaboration smoother. This guide covers the key terms and the phrases that appear most in design-system discussions.

Core Vocabulary

Variable A named, reusable value stored in Figma that can be applied to design properties such as colour, spacing, corner radius, or typography. Variables replace hardcoded values in designs with named references.

“Instead of hardcoding #1A1A1A in every component, we now reference the variable color/text/primary — changing one variable updates every component that uses it.”

Collection A group of related variables in Figma, typically representing a single design concern such as colours, spacing, or typography. Each collection can have multiple modes.

“We have three collections: one for colour tokens, one for spacing, and one for motion — each maintained by a different part of the design team.”

Mode A named variant within a collection that provides a different set of values for the same variables. The most common examples are light mode and dark mode, but modes can also represent brands or platforms.

“We defined three modes in our colour collection: light, dark, and high-contrast — switching modes in Figma updates the entire design instantly.”

Alias A variable that references another variable rather than holding a raw value. Aliases create a layer of indirection that makes global changes easier to manage.

“The button background is an alias pointing to color/brand/primary, which itself points to the primitive blue-600 — changing the brand colour updates every alias automatically.”

Primitive token A design token that holds a raw value — a specific colour hex, a pixel measurement, or a font size number. Primitive tokens are the foundation layer and are not intended to be applied directly to components.

“Blue-600 is a primitive token — it holds the raw hex value. Components should never reference primitives directly; they should reference semantic tokens that point to primitives.”

Semantic token A design token named after its purpose rather than its raw value, such as color/background/primary instead of #FFFFFF. Semantic tokens are what components and styles reference, enabling theming.

“When we switch from light to dark mode, only the semantic tokens change — the component code doesn’t need to be updated because it was always pointing to semantic names.”

Token scope The set of Figma properties a variable is allowed to be applied to. For example, a colour variable might be scoped to fill and stroke but not to typography.

“We scoped the border-radius variables to corner radius only — designers can’t accidentally apply them to spacing, which prevents off-system usage.”

Resolved value The final, concrete value that a chain of aliases and modes produces. When Figma evaluates a semantic token in a specific mode, it follows alias references until it reaches a primitive, which is the resolved value.

“In dark mode, the resolved value of color/background/surface is #1C1C1E — even though the component only references the semantic name.”

Handoff The process of transferring completed designs from a designer to a developer, including all assets, tokens, annotations, and specifications the developer needs to implement the design accurately.

“Since we moved to Figma Variables, the handoff is much cleaner — developers can export the token values directly instead of manually copying hex codes from the inspector.”

Key Collocations

• bind a variable — “We need to bind a variable to every colour property before the handoff — hardcoded values won’t theme correctly.”
• switch modes — “You can switch modes at the frame level to preview how the entire screen looks in dark mode without duplicating any components.”
• resolve token values — “The Style Dictionary build step resolves token values and outputs platform-specific files for iOS, Android, and CSS.”
• export design tokens — “After each design sprint, we export design tokens to the repository so that the CSS and Swift variables stay in sync with the Figma source.”
• apply to fill — “Make sure the colour variable is applied to fill, not to stroke — the token scope we set only allows fill and opacity.”
• reference a variable — “Every interactive state in the button component references a variable rather than a hardcoded colour, so theming works automatically.”

Using This Vocabulary in Practice

One of the most common points of confusion in design-developer discussions is the difference between a primitive and a semantic token. A simple way to explain it: “Primitive tokens are the paint colours in the tin. Semantic tokens are instructions like ‘use the primary background colour.’ You apply the instruction, not the tin.” This analogy translates well across teams with different backgrounds.

When discussing handoffs, the phrase “in sync” appears constantly: “Are the tokens in the codebase in sync with Figma?” or “We need to keep the exported values in sync with whatever the designers change.” Related to this is the phrase “source of truth” — teams often debate which is the source of truth: Figma or the code repository.

Common Mistakes to Avoid

A common mistake is using “token” and “variable” interchangeably. In Figma, the product feature is called Variables. In the broader design system world, the output of those variables for use in code is called design tokens. You can say “we define variables in Figma and export them as design tokens for the codebase” — that is the most precise phrasing.

Practice Tip

Look at a public Figma community file that uses Variables (search for “design tokens Figma variables” in the Community). Try to identify: which variables are primitives, which are semantic tokens, and which are aliases. Then describe the structure out loud in English using the vocabulary from this article. This is the exact mental model you need for real design-system discussions.