How to create a Variable in Figma

A flower that represents Figma with the text "Create a Variable" beneath it.

A step by step guide on creating a Color, Number, String (i.e. text) or Boolean (i.e. On/Off) variable in Figma.

Step One: Open the Variables Window

A screenshot of Figma highlighting the settings icon to the right of "Local Variables" on the right menu side bar. Click it to open the variables window. If you can't find it, make sure you have selected the canvas (i.e. that no frame, asset or other object is selected).

On the right menu bar, next to Local Variables, click the settings icon.

Step Two: Create a new Variable

A screenshot of Figma showing the Variable window open. Highlighted is the + Create Button and the menu that appears when you click it. The options in the menu are Color, Number, String and Boolean. Click the relevant menu option to create a new variable.

Click + Create Variable and select the type of variable that you would like to create. Options are Color, Number, String or Boolean.

If a variable has already been created, the + Create Variable button can be found at the bottom left of the Variables Window.

A screenshot of Figma showing the Variable window open, it shows a single string variable with a value of “Hello World”. Highlighted is the + Create Button at the bottom left of the variable window and the menu that appears when you click it. The options in the menu are Color, Number, String and Boolean. Click the relevant menu option to create another new variable.

Step Three: Name the Variable

<p>A screenshot of Figma showing the Variable window open, it shows 4 variables with default names. The four variables are a color, number, string and boolean. The boolean name input is selected showing that when a new variable is created you can automatically rename it by typing in the new name. Alternatively you can double click the name input box and it will allow you to rename the variable.</p>
<p></p>

The name of a variable is automatically available for editing when creating a new variable.

Enter the name that you wish to use for this variable.

If you wish to change a variables name in the future, double click the name input of the variable and type in the new name.

Please note that it is recommended that you use Camel Casing (ideal), Kebab Casing, Snake Casing or Pascal Casing to allow the your design system to translate directly into code.

Step Four: Give the variable a value

A screenshot of Figma showing the Variable window open, it shows 4 variables with default names. The four variables are a color, number, string and boolean. The Color variable is selected and it shows that if you press the colored square within the value field that a color picker appears.

Double click on the text under the value column of a Color, Number or String to change the variable value.

With colors, you can also press the colored square to open up a color picker.

Booleans allow you to alter the state from On/Off (true/false) by clicking the flip switch.

Looking to learn more about things you can do with Variables or Figma ?

We recommend you check out our Figma Variables Guide or search our blog to find educational content on learning how to use Figma.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

How to create a Variable in Figma

A step by step guide on creating a Color, Number, String (i.e. text) or Boolean (i.e. On/Off) variable in Figma.

Step One: Open the Variables Window

Step Two: Create a new Variable

Step Three: Name the Variable

Step Four: Give the variable a value

Looking to learn more about things you can do with Variables or Figma ?

Any Questions?

Book a Free Consultation.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details