By definition, a variable is something that can vary in value or take on multiple values. Variables in Figma store reusable values like color values and numbers that can be applied to all kinds of design properties and even prototypes. Sound similar to styles? Well, not quite. Because of their dynamic nature, variables allow designs to change when used in different contexts.
For example, you can switch your designs between light and dark modes, instantly change all the strings of a modal to a different language, or have padding values change when designing for a different device size. A variable's values can also reference other variables, making updating design systems a breeze. If you have coding experience, you may be familiar with the concept of variables already. If not, don't worry, no coding knowledge is needed.
In this video, We'll cover how variables work and how to use them to represent design tokens and account for different modes and themes. To follow along, grab a copy of the design from the community file linked in the description below. Already got the basics down?
Check out the next video to learn how to use variables in prototypes. WorldPeace is an e-commerce site that delivers organic produce to your home. Like most brands, WorldPeace has a set of colors used repeatedly for different functions like paragraph text or to call attention to a primary button. We could use styles to create reusable colors for our palette, but let's see how variables can offer a more flexible design process.
Here is the color palette for the WorldPeace website. First, let's create a variable for each color. Deselect everything on the canvas.
and find the Local Variables section in the right sidebar. Local variables include all variables created in the current file. Click the Open Variables button to open the Variables panel.
Then, click Create Variable to create our first variable. A dropdown appears with four types of variables. Color, used for color fills.
Number, for dimensions, corner radius, and auto layout properties. String. for text layers and variant properties. And lastly, Boolean, defined by a true-false toggle to toggle things like layer visibility.
Support for variable types will expand in the future, so stay tuned. Let's choose Color and give our new variable a name. In the next column, type the variable's value or use a custom color picker. We've created our first variable.
For more editing options, hover over the variables row and click the settings button. There you can describe how to use the variable, hide the variable from publishing, and more. We have a few more colors to go, so let's create variables for each one.
Great! Now let's organize them into groups. Let's select the gray color variables, right-click and choose New Group with Selection. Double-click the group name in the sidebar and rename it to color forward slash gray.
Select the rest of the colors and create a new group called color forward slash brand. Notice how the forward slashes turn color into a parent group with gray and brand groups nested within it. Our color palette is all set up. Let's name our first collection of variables.
This will help us organize and find them later. Open the Collection dropdown and select Rename Collection. We'll call it Primitives as these are the core building blocks for WorldP's. Semantic names like Accent Color or Primary Color express how an element should be used in designs. The variables in the Primitives collection lack semantic names as they don't express a function or intent.
This is because they won't be used directly in designs. Instead, we'll create a new collection of variables that reference the primitive values, give those variables semantic names, and use them in designs. To learn more about semantic naming, check out Lesson 2, Define Your Design Systems Documentation, from our Intro to Design Systems course. In software, this method of defining values by referencing other values is called tokenization.
It's widely used because it helps maintain consistency in designs. You'll see why in just a bit. Open the Collection dropdown and select Create Collection.
We'll call this Tokens. Now we'll create variables for the text colors we need based on their font. functions primary secondary brand and invert while world peas is using semantic names use whatever suits your design best create a new color variable and name it text dash primary then click the fill box and select the libraries tab here we'll see a list of color variables including the ones we created for the primitives collection we'll go with color gray 900 Let's create a few more color variables for the rest of our text functions. Next, we'll create color variables for surfaces such as background colors with functions that match the ones used for text.
We'll also create a color variable to use for borders. Lastly, let's group these new variables into their respective categories, surface, text, and border. Great! Now let's apply variables from the Tokens collection to our designs.
Take a look at this watermelon product page. Let's select the button and go to the Fill section of the right sidebar. Open the Style Picker and you'll see a list of variables and color styles. The variables appear as fills in rectangles, while styles appear in circles.
Find the Surface Brand variable from the Tokens collection and apply it to the button. For the web page's background color, select the top-level frame and apply the surface primary variable. We'll also go through stroke properties and text layers to apply the appropriate colors to them. A few variables in this collection reference the same variable.
For example, text primary, text brand, surface invert, and border primary are defined by the same color variable from the Primitives collection, color gray 900. If we change the definition of color gray 900, then the variables referencing it will follow suit. Cool! But what if we want to change just the border color?
If we used styles, we would have had to find and select every layer with a stroke to update its color. A tedious chore with a higher chance for human error, especially if your designs live in multiple files. If we organize styles semantically, an update to the color palette means we'd have to individually update every instance of that color style since styles can't reference other styles. Since we used variables to reference other variables, we can change the definition of border primary to a different variable from the primitives collection. Any layer using border primary updates accordingly, and it only took a few seconds.
This is why we tokenize our variables. Keep in mind, this doesn't mean you should get rid of using styles. Styles can store sets of values, allowing for reusable properties like gradients or shadows. Variables can only store raw, single values. We want to be able to quickly switch WorldP's designs between light and dark modes.
But how? This is where modes and variables come in. Modes allow designs to change when used in different contexts.
For example, string variables can be used for contexts like localizing language, number variables can account for spatial changes across different device sizes, and boolean variables can toggle layer visibility, to show a warning if a product is almost sold out. Let's go back to our tokens collection to set up light and dark modes using color variables. Click the plus button in the column header. Figma duplicated colors from the first mode column to the new one. The first column already accounts for our light mode.
Let's rename it to light. The second column will account for our dark mode, so let's rename it to dark. Then, Choose different variables from our Primitives collection to define them. All our hard work is about to pay off!
Select the frame for the watermelon listing and go to the layer section in the right sidebar. Since the frame has layers with variables applied, the change variable mode button appears. Let's click it, open tokens, and select dark. The entire frame changed to the values we set for dark mode! But wait, what was that auto option in the dropdown?
Auto means an object's mode is based on its parent's mode. So if we set this object's mode to auto, and drag it between a frame with light mode and a frame with In dark mode, it changes according to the context. If the parent has no mode, then the object defaults to the first mode of the variables collection. In this case, it's light mode. Our color variables worked out so well, let's try using the same token and semantic methods on number variables to define spacing and corner radii values.
Let's open the collection of primitives, the core building blocks for World Peas, to define their values. Since this part is similar to color variables, let's jump forward to our spacing and corner radii values all finished. Neat!
Spacing variables and radius variables live in their own respective groups. The spacing variables have names and values based on multipliers of 8, since World Peas uses an 8-point grid system. while corner radius variables use t-shirt sizes, also with values in multiples of 8. Now that our primitives are set up, let's reference them from the tokens collection. Spacing tokens will use t-shirt sizing as names.
The first one, spacing-none, has a value of 0, while the rest reference the spacing variables from the primitives collection. Let's add radius tokens, radius minimal, radius rounded, and radius full, each referencing radius variables from the permutas collection. Lastly, organize our new variables into two groups, spacing and radius. It's time to use the new variables from our tokens collection on our webpage. Select the container with categories and product information.
and hover over the Gap Between field in the Auto Layout panel. Click the Variable icon and choose Spacing 2XL from the tokens collection. For Horizontal Padding, choose Spacing 2XL and Vertical Padding, Spacing XL.
Lastly, select the Add to Basket button, click the Variable icon in the Corner Radius field, and apply the variable Radius Full. Let's finish applying our new number variables to the rest of the webpage. Now, what happens if we change spacing2xl to a different value?
Just like before, we can easily choose a different value from the primitives collection, and anything referencing spacing2xl will change accordingly. Currently, World Peace is set up for light and dark modes, but what if we need a brutalism aesthetic as well? We could go into our tokens collection to set up one mode for light with Brutalism, and one for dark with Brutalism.
However, if values from the Brutalism modes change, we might have to double the work to update them. Instead, let's open our Primitives collection and create a new mode. We'll name it Brutal Theme and update the first mode to Modern Theme.
For the shades of grey, let's use shades of purple instead. For brand colors, we'll use the same orange color. Since we're using a Brutalism aesthetic, we want corners of objects to be sharp instead of rounded. So let's change the radius values to 0. We'll leave spacing values as is.
And that's it! Let's select the product page and open the Change Variable Modes dropdown. Since the Primitives collection now has multiple modes, It appears as an option.
Hover over and select Brutal Theme. Amazing! The colors changed and corners that were once rounded are now sharp edges.
Now let's change the Tokens mode to Dark. Nice! Because we already did the heavy lifting to define and apply light and dark modes, creating a new Brutal Theme made this a breeze.
This is just the beginning of variables. If you want to learn more, check out the resources linked below. Want to know how to use Boolean and String variables in prototypes? Check out the Prototype with Variables tutorial where we use expressions and conditions to create realistic prototypes.
If you're wondering how to incorporate variables into your team's design system, or curious what's coming next with variables, be sure to like and subscribe to get notified of future tutorials and product news. See you next time.