Variable Collections in Figma are organized containers used to group related variables and their modes together. They help designers build scalable design systems by keeping colors, spacing, typography values, responsive values, localization content, themes, and other reusable design values organized in one place.
For professional Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.
A Variable Collection is a container that stores related variables and their modes. Instead of keeping every variable in one large list, designers can create separate collections for different purposes such as Colors, Spacing, Typography, Content, Responsive Values, or Themes.
For example, a design system can have a collection named Colors containing variables such as primary, secondary, background, surface, text, border, and error colors.
Variable Collection
|
+-- Variables
| +-- color/primary
| +-- color/secondary
| +-- color/background
| +-- color/text
|
+-- Modes
+-- Light
+-- Dark
Variable Collections make large design systems easier to organize, maintain, scale, and update. They separate different categories of design values while allowing each collection to contain its own variables and modes.
| Variable Collection | Variable |
|---|---|
| Container for related variables | Stores a reusable value |
| Can contain multiple variables | Contains one variable definition |
| Can contain multiple modes | Can have different values across modes |
| Used for organization | Used as a reusable design value |
| Example: Colors | Example: color/primary |
A collection can be understood as a structured system containing variables, groups, and modes.
Collection: Colors
|
+-- Group: Brand
| +-- Primary
| +-- Secondary
|
+-- Group: Text
| +-- Primary
| +-- Secondary
|
+-- Group: Surface
| +-- Background
| +-- Card
|
+-- Modes
+-- Light
+-- Dark
| Collection | Typical Variables | Purpose |
|---|---|---|
| Colors | Primary, Secondary, Background, Text | Color system and themes |
| Spacing | 4, 8, 12, 16, 24, 32 | Consistent spacing |
| Typography | Font sizes, line heights | Typography system |
| Radius | Small, Medium, Large | Corner-radius system |
| Content | Labels, messages, text | Localization and reusable text |
| Responsive | Padding, gaps, dimensions | Device-specific layouts |
| Motion | Duration, easing | Animation consistency |
Figma's Variables view allows designers to create and manage collections, variables, modes, and groups. The current Figma interface provides access to Variables from the left navigation bar.
A Figma variable collection is a set of variables and modes used to organize related variables. Each collection can contain up to 5,000 variables.
Collection names should clearly communicate the purpose of the values stored inside them.
A clear naming structure makes a design system easier for designers and developers to understand.
After creating a collection, variables can be added to it. Figma currently supports Color, Number, String, Boolean, Timing, and Easing variable types.
Collection: Colors
Variables:
color/primary
color/secondary
color/background
color/surface
color/text-primary
color/text-secondary
color/error
color/success
Groups provide another level of organization inside a collection. For example, a Colors collection can contain groups for Brand, Text, Surface, Border, and Status.
Colors
|
+-- Brand
| +-- Primary
| +-- Secondary
|
+-- Text
| +-- Primary
| +-- Secondary
|
+-- Surface
| +-- Background
| +-- Card
|
+-- Status
+-- Success
+-- Warning
+-- Error
Groups make variables easier to organize, search, and locate inside a collection.
A Variable Collection can contain multiple modes. A mode stores one value for each variable in the collection. Modes are useful when the same design needs different values depending on context.
Collection: Colors
Variable Light Dark
------------------------------------------
color/background #FFFFFF #121212
color/surface #F5F5F5 #1E1E1E
color/text-primary #111111 #FFFFFF
color/text-secondary #666666 #CCCCCC
color/primary #2563EB #60A5FA
Modes can represent different contexts such as Light/Dark themes, languages, device sizes, and other design variations.
One of the most common uses of collections and modes is creating a theme system.
Collection: Colors
Light Dark
-------------------------------------------
Background #FFFFFF #121212
Surface #F8F8F8 #1E1E1E
Text Primary #111111 #FFFFFF
Text Secondary #666666 #CCCCCC
Primary #2563EB #60A5FA
Once these variables are applied to the design, switching the appropriate mode can change the values throughout the design without manually editing each layer.
Number variables can be organized into a spacing collection to create a consistent spacing scale.
Collection: Spacing
space/4
space/8
space/12
space/16
space/24
space/32
space/40
space/48
This helps designers use predefined spacing values instead of entering random numbers throughout the interface.
Variable collections can also organize responsive values. For example, a collection can contain Desktop, Tablet, and Mobile modes with different spacing or dimension values.
Collection: Responsive
Variable Desktop Tablet Mobile
--------------------------------------------------
page/padding 48 32 16
section/gap 40 32 24
card/gap 24 20 16
container/radius 16 14 12
Variable modes can represent different device contexts and allow values such as spacing and padding to change according to the selected mode.
String variables can be organized into a collection for localized content.
Collection: Content
Variable English Hindi
---------------------------------------------
welcome/title Welcome स्वागत है
login/button Login लॉगिन
logout/button Logout लॉगआउट
cart/title Cart कार्ट
This approach allows designers to preview how different languages affect the layout and content without manually replacing text in every frame.
Variable Collections are useful when implementing a token-based design system. A team can separate primitive values from semantic values.
Primitives
|
+-- blue/500
+-- blue/600
+-- gray/100
+-- gray/900
+-- spacing/4
+-- spacing/8
Semantic Tokens
|
+-- color/action/primary
+-- color/text/primary
+-- color/surface/default
+-- spacing/component/gap
Variables can reference other variables through aliasing, which supports token-based design systems and helps maintain a consistent source of truth.
| Primitive | Semantic |
|---|---|
| Represents raw design values | Represents intended usage |
| Example: blue/500 | Example: action/primary |
| Usually independent of component purpose | Connected to UI meaning |
| Useful as a foundation | Useful for application-level design tokens |
A scalable naming convention helps teams understand variables quickly.
Collection: Colors
Brand
color/brand/primary
color/brand/secondary
Text
color/text/primary
color/text/secondary
color/text/disabled
Surface
color/surface/background
color/surface/card
Status
color/status/success
color/status/warning
color/status/error
Use names based on purpose rather than temporary visual descriptions whenever possible.
| Collection | Group |
|---|---|
| Higher-level container | Sub-organization inside a collection |
| Can contain variables and modes | Organizes variables within a collection |
| Useful for major categories | Useful for subcategories |
| Example: Colors | Example: Text |
Identify Design Values
↓
Create Variable Collection
↓
Define Naming Structure
↓
Create Variables
↓
Organize Variables into Groups
↓
Create Modes if Required
↓
Assign Values
↓
Apply Variables to Designs
↓
Test Different Contexts
↓
Publish/Share as Appropriate
Once variables are created, they can be applied to supported design properties. For example, color variables can control fills and strokes, while number variables can control dimensions, spacing, typography-related properties, and other supported numeric properties.
Variable Collection
↓
Variable
↓
Apply Variable
↓
Design Property
↓
Reusable UI
One major advantage of variables is centralized control. If a variable value is changed, designs using that variable can reflect the updated value instead of requiring every layer to be manually edited.
Before:
Primary = Blue
After:
Primary = Purple
All linked components and layers
can use the updated variable value.
Collections become especially valuable when creating a professional design system. A design system can use separate collections for foundational and contextual values.
Design System
|
+-- Primitives
|
+-- Colors
|
+-- Typography
|
+-- Spacing
|
+-- Radius
|
+-- Motion
|
+-- Content
|
+-- Responsive
This structure makes it easier to scale a design system as more components, products, brands, and platforms are added.
Variables can be published to team libraries, allowing teams to reuse shared variable definitions across files and maintain consistency across projects.
Design System File
↓
Variable Collections
↓
Publish Library
↓
Other Figma Files
↓
Reuse Variables
↓
Consistent Design
For large projects, avoid putting every variable into one collection. Separate collections based on logical responsibilities.
| Collection | Purpose |
|---|---|
| Primitives | Raw colors, spacing, sizes |
| Semantic | Purpose-based tokens |
| Typography | Text-related values |
| Spacing | Layout spacing system |
| Responsive | Device/context values |
| Content | Localized strings |
| Motion | Animation timing/easing values |
Names such as Collection 1 or Test Collection make the system difficult to understand.
A very large collection can become difficult to navigate and maintain.
Using names such as primaryColor, color-primary, and Primary in the same system creates confusion.
Modes should represent meaningful contexts such as themes, languages, or device variations.
When appropriate, use aliases and semantic naming rather than duplicating raw values everywhere.
A variable collection may look correct in the Variables view but still produce unexpected results when applied to actual components.
Suppose you are designing an e-commerce application. You can organize the variables into multiple collections.
Colors
├── color/primary
├── color/background
├── color/surface
├── color/text
└── color/error
Spacing
├── space/4
├── space/8
├── space/16
├── space/24
└── space/32
Typography
├── font/size/small
├── font/size/body
├── font/size/title
└── font/line-height/body
Responsive
├── page/padding
├── card/gap
└── section/gap
Create a Colors collection with two modes.
Collection: Dashboard Colors
Light Dark
-----------------------------------------
Background #FFFFFF #101010
Surface #F5F5F5 #1A1A1A
Text Primary #111111 #FFFFFF
Text Secondary #666666 #BBBBBB
Primary #2563EB #60A5FA
Border #DDDDDD #333333
Apply these variables to dashboard frames and components. Switching the mode allows the same design structure to represent different themes.
Create a Responsive collection with Desktop, Tablet, and Mobile modes.
Collection: Responsive
Variable Desktop Tablet Mobile
--------------------------------------------------
Page Padding 48 32 16
Section Gap 40 32 24
Card Gap 24 20 16
Corner Radius 16 14 12
This approach can help designers preview how the same system behaves across different device contexts.
Variable collections can also support interactive prototypes. Variables can be updated through prototype actions, while multiple modes can represent different contexts. Figma also provides a Set variable mode action for changing the variable mode during prototype playback.
User Interaction
↓
Prototype Trigger
↓
Set Variable / Set Variable Mode
↓
Variable Collection
↓
Updated Value or Mode
↓
UI Changes
Components can use variables to maintain consistent values across repeated UI elements. For example, buttons can use shared color, spacing, radius, and typography variables.
Button Component
|
+-- Background → color/action/primary
+-- Text → color/text/on-primary
+-- Padding → spacing/button
+-- Radius → radius/button
+-- Typography → typography/button
When the underlying variable values change, components using those variables can remain aligned with the design system.
Variables can also improve developer handoff because developers can inspect variable information used by designs. Figma's Dev Mode can expose details such as the variable name, collection, mode, and value.
Designer
↓
Variable Collection
↓
Design Component
↓
Dev Mode
↓
Variable Details
↓
Developer Implementation
Collections can help organize accessible color themes and other context-specific values. For example, a design system can provide standard and high-contrast color modes where appropriate.
Collection: Accessibility Colors
Mode 1 → Standard
Mode 2 → High Contrast
Variable modes can be used for accessible themes such as high-contrast variations where the design system requires them.
Before creating a large collection, identify what values the product needs and decide how they should be organized.
Design System
|
├── Primitives
│ ├── Colors
│ ├── Spacing
│ ├── Radius
│ └── Typography
|
├── Semantic
│ ├── Text
│ ├── Surface
│ ├── Border
│ └── Action
|
├── Responsive
│ ├── Desktop
│ ├── Tablet
│ └── Mobile
|
├── Content
│ ├── English
│ ├── Hindi
│ └── Other Languages
|
└── Motion
├── Duration
└── Easing
Variable Collections are one of the most useful organizational structures for building scalable Figma design systems. They provide a central place to organize related variables and modes, while groups provide additional internal structure.
When combined with meaningful naming, aliases, modes, components, and libraries, Variable Collections can help teams create consistent interfaces that are easier to maintain and adapt to different themes, devices, languages, and product contexts.
Figma Variables
↓
Variable Types
↓
Variable Collections
↓
Variable Groups
↓
Variable Modes
↓
Variable Aliasing
↓
Design Tokens
↓
Components + Variables
↓
Responsive Systems
↓
Themes
↓
Localization
↓
Prototyping with Variables
↓
Advanced Design Systems
Variable Collections provide a structured way to manage reusable design values in Figma. Instead of scattering individual variables throughout a project, designers can organize them into purposeful collections such as Colors, Spacing, Typography, Responsive, Content, and Motion.
With collections, groups, modes, aliases, components, and libraries working together, Figma designers can build flexible and scalable design systems that are easier to maintain, update, test, and hand off to developers.
