How to use Number Variables in Figma

Q: How do I apply a number variable to width, height or the auto-layout gap in Figma ?

Click the dropdown next to width, height or auto-layout gap and select the Apply Variable menu option . In the menu that appears, select the variable you wish to apply.

Q: How do I set a number variable to width, height or the auto-layout gap in Figma ?

Click the dropdown next to width, height or auto-layout gap and select the Apply Variable menu option . In the menu that appears, select the variable you wish to apply.

A flower that represents Figma with the text "Use Number Variables" beneath it.

A guide on applying number variables to numerical values and text values.

How to apply a number variable to width, height or the auto-layout gap

A screenshot of Figma that shows that if you select the dropdown next to width on the right menu side bar, a menu appears that allows you to apply a variable through the apply variable menu option. This also applies to height, auto-layout gap and min or max width and min or max height.

Click the dropdown next to width, height or auto-layout gap and select the Apply Variable menu option.

Please note that the same process applies for min/max width or min/max height.

A screenshot of Figma that shows that if, after you create a minimum width for a frame, if you select the dropdown next to it, you can apply a variable using the same mechanism as described above (i.e. pressing the Apply Variable menu option in the menu that appears..

In the menu that appears, select the number variable that you wish to apply.

A screenshot of Figma that shows that after you select Apply Variable, you can select a variable to apply from a menu that appears.

How to apply a number variable to the corner radius or auto-layout padding?

A screenshot of Figma that shows a frame selected. Highlighted on the right menu sidebar is the variable icon that appears when you hover over the corner radius or auto-layout padding. We have also highlighted that if you click the variable icon it will open up a menu, from which you can select a variable. Click a number variable to apply the variable.

Hover over the relevant input, click the variable icon to open the variables menu and select the variable.

How to apply a number variable to text?

A screenshot of Figma that shows a text element selected. Highlighted on the right menu sidebar is the variable icon that appears under the text section. We have also highlighted that if you click the variable icon it will open up a menu, from which you can select a number or a text variable. Click a number variable to apply the variable.

Select a text element and on the right menu sidebar, click the variable icon under Text to open the variables menu. From this menu select the variable that you wish to apply.

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 use Number Variables in Figma

A guide on applying number variables to numerical values and text values.

How to apply a number variable to width, height or the auto-layout gap

How to apply a number variable to the corner radius or auto-layout padding?

How to apply a number variable to text?

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