How to use Variable Fonts in Figma

Oscar de la Hera Gomez
A flower that represents Figma with the text “Variable Fonts” beneath it.

A step by step guide on implementing a Variable Font to text and customizing its parameters in Figma.

Variable Fonts were introduced to the world in February 2018 and have made huge advancements since them.

Click the link below to hear Tobias Kunisch (Design Lead, Google Fonts, Google) discuss how Fonts are Software now, and that's awesome.

Step One: Select the Text

A screenshot of Figma that shows you a frame with text on it. The text is selected.

In Figma, select the text you'd like to add a variable font to.

Step Two: Set the Variable Typeface

A screenshot of Figma that shows you a frame with text on it. We have highlighted the “Inter” typeface - which is the input found right below the “Text” section. If you click this input it will open up a dropdown to the left of the input which will allow you to change the font family (typeface) of the text.

Click the Typeface (Font Family) to open up a window.

In the window click All Fonts and in the dropdown that appears select Variable Fonts.

This will adapt the list to only should Variable Fonts.

Select a Variable Font from the list.


<p>A screenshot of Figma that shows you a frame with text on it. The typeface dropdown is open and on it, we have highlighted the “All Fonts” label that has a caret next to it. Press this to open a second dropdown that allows you to filter fonts.<br /></p>
<p></p>

<p>A screenshot of Figma that shows you a frame with text on it. The typeface dropdown is open and on top of it, the font filter dropdown is also open. We have highlighted the Variable Font option within the Font Filter dropdown. </p>
<p></p>
A screenshot of Figma that shows you a frame with text on it. The typeface dropdown is open and has been filtered to only show variable fonts. Highlighted below it are the variable fonts that you can pick from.

Step Three: Customize Variables

A screenshot of Figma that shows you a frame with text on it. The advanced type settings window has been opened using the three dots on the bottom right of the text section on the right menu side bar. In this window, the “variable” tab has been selected. We have highlighted the area beneath it, which is where the variable font parameters  appear. Use the sliders to change the values.

Open the advanced type settings by pressing the three dots at the bottom right of the Text section.

In the window that appears, select the Variable tab.

This will grant you access to change the parameters that are available for your variable font.

Changing the parameters will change the text in real time as you adapt the variables.

A screenshot of Figma that shows you a frame with text on it. The variables has been adapted from the prior screenshot and the visual shows how the parameter change causes a change in the text.

Looking to learn more about the basics behind styling frames, paths, shapes and text in Figma ?

Consult the list below to learn more about the basics behind styling text, shapes, paths and frames in 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.
delasign logo

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