delasign
delasign

How to create a new variable within a Variable Group in Figma

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 08/10/2023 at 10:03
Last Updated on 08/10/2023 at 17:00
A flower that represents Figma with the text "Add a new Variable to a<br />Variables Group" beneath it.

A step by step guide on adding a new variable to an existing group within a collection.

Subscribe
Check out our Figma Variables Guide

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.

How to access variables in a Figma project

Step Two: Open the Sidebar

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. They are split across two groups, “all variables” and “colors”. Highlighted on the top left of the variables window is the sidebar icon. Click it to open the sidebar.

Click the icon on the top left to open the sidebar.

Step Three: Select the Collection

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. They are split across two groups, “all variables” and “colors”. The variable window sidebar is open and we have highlighted the collection selector on the top left of the side bar. Click it to change the selected collection. Please note that if you have not created a collection then you will not be able to change the collection.

Select the collection that holds the group that you wish to add a variable to.

Please note that other collections will only appear if they were previously created.

How to create a Variable Collection

Step Four: Select the Group

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. They are split across two groups, “all variables” and “colors”. The variable window sidebar is open and we have highlighted the “colors group”. This serves as an indication that you should the group that you wish to add a variable to from the side bar.

Using the sidebar, select the group that you wish to add a variable to.

Step Five: Add a new Variable

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. They are split across two groups, “all variables” and “colors”. The variable window sidebar is open and the “colors” group is selected and we have highlighted the “+ create variable” button on the bottom left of the main variable window. If you click this, it will open a menu that allows you to create a Color, Number, String or Boolean. Click the option of the variable that you wish to create.

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

Follow the tutorial below to complete the rest of the setup.

How to create a Variable in Figma

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.

Check out our Figma Variables Guide
Search our Blog

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.
delasign logo
You imagine it, we create it.

Book a Free Consultation.

An icon of an email.

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

We'd love to chat &
see how we can help.