Figma Variables— Getting started ✌️😁

Figma variables are a great new feature from Figma that helps you to take your prototype to the next level.

It’s pretty intuitive once after doing it once — Check out my simple explanation of how to add color variables to your prototypes and how to change component’s colors based on user interactions 🤠

Check out the following simple step-by-step example to get started.

First lets create a button and a square:

Second, let’s create a local color variable. To do so, click on the background of the canvas and choose local variables:

Let’s call our new variable “square-color” and choose an initial color we like:

Next, let’s set our squares’ color to our new variable from within the “Libraries” menu:

Now go to the prototype section on the right and click on our button -> interactions -> on-click -> Set variable:

When we change the variable color during the prototype, the square color will update it self.

That’s it! Good job 🥳🥳 Press the demo play button and see the result:

Color is only one element you can control in your prototypes. You can also set boolean, string, and number variables and tie them together easily to form more advanced interactions. Changing a color is just the first step, now that you understand how to get it right it will be much easier to understand more complicated features.