3.2.2 Design Tokens in Figma
In Figma, design tokens are implemented with two complementary features: variables and styles. Variables store single values with optional modes (like light/dark), while styles package multiple visual properties into reusable presets. Used together, they provide a single source of truth that scales across files, teams, and handoff (Figma, n.d.-b).
Figma’s variables and styles serve distinct purposes and are used in different ways, but both are essential for building robust design systems. The goal of this chapter is to provide a clear understanding of how Figma’s variables and styles can be leveraged to implement and manage design tokens effectively.
This chapter explores:
Variables in Figma
Figma variables are reusable, named values that help teams manage design decisions in a structured and scalable way. Variables can represent different data types; color, number, string, and boolean and are organized into collections for easy management. Variables are a core part of building flexible, consistent, and themeable design systems in Figma (Figma, n.d.-c).
Purpose of Variables
Variables define a value once and reuse it across files, components, and styles. When a variable changes, every reference updates automatically, which maintains consistency and enables theming and large-scale refactors.
Assigning Values to Variables
A variable can hold a literal value or a reference to another variable. For literal values, enter the value directly, for example, a color like #FFFFFF. Alternatively, a variable can reference an existing variable. This can be done by selecting the desired variable from the Library section. This links the variable to that source token rather than storing a manual value.
For example, if Primary/Dark references Palette/Blue/900, and Palette/Blue/900 is adjusted, all design tokens that ultimately depend on Primary/Dark will reflect this change as seen in Figure 3.
Collections and Modes
Variables are organized into collections (for example a collection named Colors or Spacing). A collection can have one or more modes. Modes allow assigning different values to the same variable across contexts, such as Light and Dark themes, brand variants, or platform-specific settings. Switching modes updates all layers and styles that reference variables from that collection.
Organization and Naming
Variables are organized in two complementary ways: by collection and mode, and by name. Each variable belongs to a collection, and each collection can define multiple modes. Within a collection, variables are commonly named using hierarchical, slash-separated paths to group related tokens and improve discoverability as systems grow. For example: monochrome/100.
This structure creates a folder-like grouping in Figma’s UI, which makes it easier to browse, search, and apply variables consistently across files and shared libraries. It also supports scalable naming patterns, such as base versus semantic tokens, and keeps related tokens close together. In Figure 4, the Colors collection “Kolibri_Sync_UI_Palette” includes Light and Dark modes, with groups for Monochrome, Purple, and Green to reflect the palette categorization.
Each variable supports an optional description in addition to its name. Descriptions can capture intent, usage guidelines, constraints, and links to related tokens (see Figure 5).
Types of Variables in Figma
Variables in Figma can store four types of values: Color, Number, String and Boolean (see Figure 6).
Table 2. Overview of Figma Variable Types
Variable Color
A single solid color value used for fills, strokes, and effects. Supports Hex, RGB, CSS (rgba(255, 255, 255, 1)), HSL, and HSB. Often used for brand colors, backgrounds, text, and borders.
Variable Number
Numeric values used for spacing, sizing, border radius, stroke width, opacity, grid metrics, and similar properties. Can vary by mode for responsive design (for example, different spacing scales for mobile vs. desktop).
Variable String
Text values used for font family names, asset URLs, or localization keys. Useful for swapping resources or text by mode (for example, language variants).
Variable Boolean
True/false flags that toggle states like visibility or feature enablement. Handy for switching design states across modes.
Limitations of Variables
Modes: The number of available modes depends on the current Figma plan; multiple modes are a Pro feature. See Figma’s documentation for details.
Stores single values: Variables can only store single values. For example, Users of Figma can save a solid color as a variable, but not a gradient or an image fill. Gradients and other complex visual properties must be managed through styles, not variables.
Styles in Figma
Figma styles are reusable sets of visual properties that can be applied to layers and components throughout the design. Styles help teams maintain visual consistency, speed up design workflows, and make it easy to update the look and feel of a project with just a few clicks (Figma, n.d.-d).
Purpose of Styles
A style in Figma is a named preset for a group of properties. When a style is applied to an element, the element inherits all properties defined in that style. If the style is updated, all elements using it are updated automatically.
Using Variables in Styles
A key feature of Figma styles is their ability to reference variables (see Figure 7).. Each property within a style, whether color, text, effect, or grid, can take a variable as its value. When the variable changes, all styles and elements that reference it update automatically
This approach enables advanced workflows like theming, localization, and responsive design, and ensures consistency across the entire project.
Organization and Naming
Just like variables, styles in Figma benefit greatly from a structured organization, especially within larger design systems. Styles are grouped by their type, Color, Text, Effect, and Layout Guide. Within these types, styles can be further organized using hierarchical, slash-separated names.
For example:
Color/Brand/PrimaryText/Heading/H1Effect/Shadow/Elevation-1Layout/Grid/8px-Column
This naming convention creates a folder-like structure in Figma’s UI, which makes browsing, searching, and applying styles more efficient (see Figure 8). The approach helps teams quickly locate the intended style, understand its role within the system, and maintain consistency across design files, while also reducing naming conflicts and cognitive load as the library grows.
Like variables, each style requires a name and supports an optional description.
Types of Styles in Figma
As mentioned Figma supports four style types to promote consistency and speed up workflows.
1. Color Style
Color styles are reusable presets for color properties applied to fills, strokes, and backgrounds. A style can reference variables, which enables theming through the variable while keeping the style as a convenient, UI-visible preset. Color styles are especially powerful for multi-paint presets, gradients with stops, images and videos.
Color styles include:
Solid color: A single color value, which can include alpha/opacity.
Gradients: Linear, radial, angular, and diamond gradients with one or more color stops.
Image fills: Bitmap images used as textures or backgrounds.
Video fills: Video assets used as animated backgrounds.
Multiple colors: A color style can include a list of paints, for example two gradients.
Figure 9 shows the color style “Gradient” with two gradients, one linear and one radial. On the left, the style is applied to a rectangle.
2) Text Style
Text styles are reusable presets that bundle typographic properties into a single definition. Applying a text style ensures consistent typography across headings, body text, labels, and more (see Figure 10). A text style can include:
Font and weight: Font family (e.g., Inter) and style/weight (e.g., Medium).
Font size: Numeric size (e.g., 14).
Line height: Auto or fixed value.
Letter spacing: Tracking value (e.g., 0%).
Text decoration: None, underline, strikethrough.
Case: Original, UPPERCASE, lowercase, Title Case (as presets).
Vertical trim: Controls cap-height/ascender alignment options (shown as Ag toggles).
List spacing: Spacing for list items.
Paragraph spacing: Space after paragraphs.
Effect Style
Effect styles are reusable presets for visual effects applied to layers.
An effect style can store:
Effect type: Selectable types include Inner shadow, Drop shadow, Layer blur, Background blur, Noise, Texture, and Glass.
Effect properties (vary by type):
Shadows (inner/drop): Color, opacity, blur, x/y offset, spread.
Layer blur: Blur amount applied to the layer itself.
Background blur: Blur amount applied to content behind the layer.
Noise/Texture/Glass: Parameters specific to the chosen effect type (intensity, scale, etc., depending on Figma’s controls).
Multiple effects: An effect style can include a list of effects (e.g., two shadows) managed via add/remove controls (see Figure 11).
Layout Guide Style
Layout guide styles define reusable layout grids for frames and components, helping maintain structure and alignment (see Figure 12). A layout guide style can specify:
Grid type: Grid, Columns, or Rows.
Properties by type:
Grid: Grid size (e.g., 10 px) and color/opacity.
Columns/Rows: Count, gutter, margin, and alignment (center/left/right), plus color/opacity.
Multiple grids: A frame can stack multiple grid definitions; styles capture a single preset, and additional grids can be added at the frame level.
Limitations of Styles
No Style Nesting: Styles cannot reference other styles. Each style is independent and must be managed separately. However, styles can use variables as references.
No Multiple Modes: Unlike variables, styles do not support multiple modes (such as light or dark themes or device-specific variants) within a single style. Similar flexibility can be achieved by referencing variables that have multiple modes, allowing styles to adapt indirectly when the variable’s mode changes.
Comparison of Figma Variables and Styles
While variables and styles often work together, they serve different purposes and have distinct strengths and limitations. Understanding their differences and how they complement each other enables more effective use of Figma’s design system features (Figma, n.d.-e).
Table 3. Comparison of Figma Variables and Styles
Purpose
Store reusable values for consistency, theming, and scalability.
Store reusable sets of visual properties for visual consistency and efficiency.
Types
Color, Number, String, Boolean
Color, Text, Effect, Layout Guide Style
Organization
Variables are organized into collections; each collection can define multiple modes. Variables often use hierarchical names to create logical grouping.
Styles are grouped by type and organized further using hierarchical naming.
How They Work
A variable is attached to a property (or used inside a style). When the variable changes, every place that references it updates.
A style is applied to layers or components. When the style changes, all layers using it update.
Modes
Support multiple modes per collection (e.g., light/dark, platform). Number of modes depends on plan.
No built‑in modes.
Limitations
Number of available modes depends on Figma plan (multiple modes require Pro).
Stores single, atomic values only, cannot store complex values like gradients or images.
Styles cannot reference other styles: They adapt indirectly when they reference variables that have modes.
Styles do not support multiple modes, but can reference variables that do.
Integration
Can be referenced in styles and by other variables for dynamic theming and consistency.
Can reference variables , but not other styles.
When to use variables vs. styles
Variables and styles serve complementary roles. Variables provide adaptable values (with modes and references), while styles package those values into reusable presets for layers and components. Used together, they enable consistent, theme-ready designs that scale across files, teams, and handoff.
Variables are best for token values that need to adapt by mode or cascade through references. Examples: brand colors, spacing, and more. Variables enable theming by switching modes such as Light and Dark.
Styles are best for applying a named preset of visual properties to layers and text. Examples: a gradient paint or a shadow stack with two shadows.
Last updated