🚧 Variables is currently in open beta. We’ll continue to add more features and polish the experience during this time. Find out what’s coming next →
Before you Start
Who can use this feature
Variables in prototypes and publishing variables to team libraries are available on the education plan and any paid plans
Anyone with can edit access to a file can create and manage variables
Anyone with access to a file can use variables from that file in their designs
Variables in Figma design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows.
For example, you can:
- Create design tokens for better efficiency when managing design systems
- Switch a frame between different device sizes and have spacing immediately update, according to a defined spatial system
- Preview how text flows in different languages by switching copy on a frame
- Create a fully functional checkout cart design that calculates order total based on which items were added to the cart
- Build a prototype of an interactive quiz that uses conditional logic to show whether a user answers a questions correctly or incorrectly
There are three main ways to use variables in Figma:
Variables for designs and design systems
Use variables and modes to implement design tokens for your design system, switch designs between different contexts—such as light/dark themes. With variables, you can design more efficiently and build a more powerful design system.
Figma tutorial: Intro to variables
This video tutorial covers the foundations of variables, how to use them to represent design tokens, and how to use color and number variables to account for different modes and themes.
Article: Overview of variables, collections, and modes →
Start your variables journey here! Learn about the different types of variables and what variable collections and modes are.
Article: Create and manage variables →
Learn how to create variables and collections, reference other variable definitions, and scope which variables can be used in designs.
Article: Apply variables to designs →
Learn how to apply existing variables to design properties.
Article: Modes for variables →
Learn how to create multiple definitions for a variable, each one associated with a mode. Also, learn how to use them to quickly switch the contexts of designs.
Article: The difference between variables and styles →
As Figma extends its feature set with variables, you might be wondering: What is the difference between variables and styles? When should I choose one over the other?
Community file: Variables playground →
Want to get hands-on experience with variables? Grab a copy of the variables playground file to practice while you learn.
Variables for advanced prototyping
With variables, you can build high-fidelity prototypes using fewer frames. Use variables with other advanced features like expressions and conditionals to take your prototypes to the next level.
In prototyping, variables are used to store object states or properties. Use prototype interactions to modify variable values, which can change the appearance, content, or visibility of objects in a design—all in a few simple frames.
Video tutorial: Prototype with variables
Watch and learn how to use variables in prototypes by following along with a realistic example. You’ll review how to modify variable values, how to build simple expressions, and how to use multiple actions and if/else logic to evaluate conditional checks.
Article: Use variables in prototypes →
Learn the basics of how to prototype with variables in Figma—including how to configure your variables, use the Set variable action to change variable values, and use variables with component variants and interactive components.
Article: Use expressions in prototypes →
Learn how to use expressions and variables in prototypes to generate dynamic string values, perform basic math operations with number values, or even evaluate boolean expressions.
Article: Multiple actions and conditionals →
Learn how to use multiple actions to stack an unlimited number of actions on the same trigger, or use conditionals to check if a condition is met before performing an action by using if/else logic.
Article: Variable modes in prototypes →
Learn how to use variable modes in your prototypes. You can set the values of specific modes based on context, or use specific mode values in your expressions.
Community file: Advanced prototyping playground →
Make a copy of our advanced prototyping playground file to get some more hands-on practice with variables in prototyping.
Variables using APIs
Variables are now supported in Figma’s Plugin API—for building plugins and widgets—and in the REST API. Since variables is currently in open beta, features and functions may change as we respond to feedback.
Developer docs: For the REST API →
Support for variables in the REST API includes endpoints for querying, creating, updating, and deleting variables.
Developer docs: For the plugin API →
Support for variables in the plugin API includes creating and reading variables, and binding variables to components. For example, a plugin can be built to import or export variables or to convert styles to variables.
Developer docs: For the widget API →
Widgets can access variables using the Plugin API. Widgets can create and read variables, but widget properties cannot be bound to variables.
Figma tutorial: Sync variable to GitHub
In this video tutorial, learn how to sync your variables with your codebase. We'll cover how to use our Variables GitHub Action example repo to sync your Figma variables and your codebase.
Community file: Syncing design systems using Variables REST API →
Learn how you can use Figma's variables REST API to set up automated workflows to sync changes between design files and your codebase.