{"id":3203,"date":"2024-08-05T09:07:03","date_gmt":"2024-08-05T14:07:03","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3203"},"modified":"2024-08-05T09:07:04","modified_gmt":"2024-08-05T14:07:04","slug":"figma-typography-variables","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/figma-typography-variables\/","title":{"rendered":"Figma Typography Variables"},"content":{"rendered":"\n

When we were recording the \u201cFigma for Developers, v2<\/a>\u201d workshop, I mentioned that Variables<\/a> were in beta and that they couldn’t be used with typography yet<\/em>. Coincidentally, typography support was added the next day after the recording. Figma variables are also no longer in beta.<\/p>\n\n\n\n

Let the record show, I was<\/em> correct during the recording\u2014and that’s the important part, right? Let\u2019s review what Figma Variables<\/a> are, then explore how to use them with your typography system.<\/p>\n\n\n\n

A Brief Review of Variables in Figma<\/h2>\n\n\n\n

In Figma, Variables are placeholders for reusable values\u2014just like JavaScript. These values include colors, numeric values, and more. <\/p>\n\n\n

\n
\"Variable
The variable types in Figma<\/figcaption><\/figure>\n<\/div>\n\n\n

Once set, you can use them across different design elements in your Figma designs. Variables can also be shared with your team and used across multiple Figma files. This makes it easy to make sweeping changes to your design system with a few button clicks.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Using Variables to Control Typography in Figma<\/h2>\n\n\n\n

Previously, Figma’s variables were great for colors and spacing, ensuring consistency. However, we lacked the same flexibility with fonts. We had to use various styles and components for different themes or brands. Styles are still incredibly useful, but they lack the ability to change a single<\/em> value used by multiple styles. This makes a task like switching a font incredibly tedious as you\u2019d have to update every single style.<\/strong> In the course, we explored some approaches using various plugins in an attempt to automate this process, but the constraint was still there. This was a significant limitation and meant that we had to combine multiple approaches in order to maintain consistency throughout our design system.<\/p>\n\n\n\n

Now that variables can be used with typography, you can now define variables for font settings. Figma now supports using variables for the following properties: <\/p>\n\n\n\n

    \n
  • font family<\/li>\n\n\n\n
  • font weight & style<\/li>\n\n\n\n
  • font size<\/li>\n\n\n\n
  • line height<\/li>\n\n\n\n
  • letter spacing<\/li>\n\n\n\n
  • paragraph spacing & indentation<\/li>\n<\/ul>\n\n\n\n

    Each of these properties can be controlled using the same variable types that we saw when we walked through variables during the course, with numbers and strings being the most pertinent for defining typography properties. For example, you can use a string variable to define the font family.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    With the values set, you can select a variable when selecting the font family in the left-side panel in the Figma canvas. Changing the variable will now change all text in your designs that reference this variable, allowing you to quickly make changes across your entire design by updating a single value.<\/strong><\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Here’s a quick video demonstrating setting a block of text to a variable, then changing that variable:<\/p>\n\n\n\n\t\t

    \n\t\t\t