How to use variables and modes on Figma

intermediate 8 min read Updated 2026-03-18

Quick Answer

Variables and modes in Figma allow you to create dynamic design systems with different themes and states. Create variables for colors, spacing, and text, then use modes to switch between variations like light/dark themes instantly.

Try Figma Full Figma Review

Prerequisites

Basic Figma interface knowledge
Understanding of design systems
Familiarity with component creation
Knowledge of color and typography workflows

Step-by-Step Instructions

Access the Variables Panel

Open your Figma file and click on the Variables icon in the right sidebar, or press Shift + V. If you don't see the Variables panel, go to View > Variables to enable it. The Variables panel will appear on the right side of your screen.

You can also access variables through the Design panel by clicking the variable icon next to any compatible property.

Create Your First Variable Collection

In the Variables panel, click the + button or Create collection. Name your collection (e.g., "Brand Colors" or "Spacing System"). Choose the variable type: Color, Number, String, or Boolean. Click Create to establish your collection.

Organize related variables into the same collection for better management and easier mode switching.

Add Variables to Your Collection

Within your collection, click + Variable to add new variables. Name each variable descriptively (e.g., "primary-blue", "text-large", "spacing-xl"). Set the default value by clicking in the value field and entering your color hex code, number value, text string, or boolean state. Repeat this process for all variables you need.

Use semantic naming conventions like 'primary', 'secondary', 'success' rather than specific color names for better scalability.

Create and Configure Modes

In your variable collection, click the Mode dropdown (initially showing "Mode 1"). Click + Add mode and name it (e.g., "Light", "Dark", "Mobile"). Rename "Mode 1" to match your naming convention. For each variable, set different values across modes by clicking the value field under each mode column.

Keep mode names consistent across collections and consider creating modes for different themes, platforms, or screen sizes.

Apply Variables to Design Elements

Select any object or text in your design. In the Design panel, look for the variable icon ◐ next to properties like fill, stroke, corner radius, or text properties. Click the variable icon and choose Create variable or select an existing variable from the dropdown. The element will now use the variable value.

You can also drag variables directly from the Variables panel onto design elements for quick application.

Switch Between Modes

To preview different modes, select your frame or component and look for the Applied variables section in the Design panel. Click the mode dropdown and select the mode you want to preview. Alternatively, use the Variables panel and click on different mode names to switch the entire canvas view.

Use keyboard shortcuts: press V to quickly access variable mode switching for selected objects.

Publish and Share Variable Collections

Once your variables are set up, click Publish in the Variables panel to make them available across your team and other files. Add a description of your changes and click Publish. Team members can then access these variables in their files by going to Assets > Variables and enabling your published collection.

Document your variable naming conventions and mode purposes in your design system documentation for team consistency.

Common Issues & Troubleshooting

Variables not appearing in the dropdown when trying to apply them

Ensure you're trying to apply the correct variable type to the right property (e.g., color variables only work with fill/stroke). Also check that the variable collection is enabled in the Assets panel.

Mode switching not updating all elements

Some elements might be using local overrides instead of variables. Select the affected elements and reapply variables from the Design panel. Check that all related elements are using variables from the same collection.

Published variables not syncing to other files

Go to Assets > Variables in the destination file and ensure the variable collection is toggled on. You may need to refresh the file or check your team library permissions.

Cannot create certain variable types

Variable types are determined when creating the collection. To use different types, create a new collection with the desired variable type. You cannot mix variable types within a single collection.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.

Visit Figma View Figma Pricing