Variables
A variable stores reusable values like colour and text values that you can apply to different kinds of design properties and prototypes.
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