It took me 2 years to figure out that typography in Figma is not how text properties work in code.
I'm sharing what I know about font weight and font family acting like a "pair" in Figma and how I work around that in Tokens Studio to avoid frustrating errors.
Hi designers, Sam I am here 🫶
It's confession time, and today I want to talk about typography.
Until I started using Tokens Studio, or Figma Tokens as it was called back then, I knew (almost) NOTHING about CSS. I studied user experience design at the University of Toronto and during my 2 year program, I learned very little about how my designs would be brought to life. I wrongly assumed that the way I worked with text styles in Figma was THE way typography worked. Period.
WRONG!
I have a few fun horror stories around this, but today, I'm going to share with you what I've learned about the "unique" way Figma handles font weights. Even if you aren't a Tokens Studio enthusiast yet, this is still valuable information to know when working with engineers building your designs.
And for my tokenaughts, if I can save you from wanting to throw your computer in the bin the next time that "Error setting font family/weight combination for Font Family/Font Weight" message pops up, then my two years of frustration and wanting to cry under my desk will be time well spent. 🤬
Font family and font weight “pairs” in Figma
Alright, here's the T.
Figma forces us to treat the font family and font weight as "pairs". This means if we already have typography design decisions set up in Figma and we want to change to a different font family, the font weights we have previously selected might not work anymore.
This is because of the way Figma displays the value of the font weight as a string of text "ExtraLight" instead of its numeric value (100). To make it more interesting, the font weight in Figma also combines the font styling properties in its written value, so "ExtraLight" and "ExtraLight italic" are considered a unique font weight and font family pair in Figma. 🫠
So if my current font family has a weight written as "ExtraLight" and my new font family has it written as "UltraLight", if we change the font family, the weight won't necessarily change with it.
We have to manually check and adjust every font weight as we change its "paired" font family in Figma.
Most of the time, the differences between font weight values aren't as obvious as a completely unique word. The inconsistent use of spaces and capital letters within the string values for font weights can be a breaking change for these case-sensitive string values, which, as a non-developer, I can honestly say I never thought to pay attention to.
This approach is not how it works in code. 😳 Let me explain.
How font-weight works in CSS
I'll use CSS for simplicity, but my quick search of Tailwind CSS, Human Design, and Android developer docs all have similar way of approaching font weight and font styling as independent properties.
In CSS, the font-weight property defines the thickness of the glyph (the character, letter or number) and is typically defined in a numeric value.
Additional styling properties, like slanting of glyphs (italic) or width of glyphs (condensed or expanded) are defined independently.
We can use dev-mode in Figma to show us what engineers see in CSS.
For the font family of Inter I have "Semi Bold" selected as the font weight in the dropdown in Figma. The CSS shows the font weight as 600, its numeric value, and the font style as normal.
In this example, the font family Inter is the same, but I have "Semi Bold Italic" selected as the font weight in the dropdown in Figma. The CSS still shows the font weight as 600, but the font style is listed as italic.
So, in code, we have independent design decisions for font weight and font styling, and font weight is commonly written in its numeric value. This ensures consistency across any font family we choose. Looking at the CSS for semi-bold in italics for Inter and Montserrat, the only thing that changes is the font family name; the rest of the code stays the same.
So technically, each font family has a unique value represented as a "string" of text in Figma, which is different from the CSS code, which has identical numeric values for font-weight at 600 and font style as italic.
If we were to work in code using Figma's string values to combine font-weight + styling properties, the font family and weight would work like a pair.
If I have Inter as my font family in code with the font-weight Semi Bold Italic and replace Inter with Satoshi, the code will break because there is no font-weight pair for Satoshi in semi-bold, Figma applies it as Medium Italic.
So, if you aren't interested in design tokens, you can stop reading now and book a coffee chat with your favourite front-end developer and ask them what they think about Figma's approach to font weights.
You should have enough info to have an awesome convo and I'm sure you'll learn even more!
Tokens Studio
Figma’s approach to pairing the font family and font weight (plus styling properties) becomes a bit of a challenge if I'm working with Tokens Studio, a no-code tool for designers to capture design decisions as tokens (in code).
I'm working with Tokens Studio because I want to supercharge my workflow. I want to take a file that already has typography fully fleshed out and swap out the font family. This is a fast way for me to create a new design systems foundation file for a client or iterate on an existing project.
However, in Tokens Studio, if I change the fontFamily token value from Montserrat to Noto Sans, many of the font-weight pairs are going to break because the font-weight pair for Noto Sans is Semi Bold (2 words), not SemiBold` (1 word). Sounding familiar?
When we change the value of our tokens in Tokens Studio, it tries to push that change to Figma using their plugin API. When there are inconsistencies in the string value of our token that don't match its paired font family, Figma throws an error that blocks Tokens Studio from finishing the API request to interact with their text styling properties.
So, to avoid this very frustrating, manual process of trying to get the font family and font-weight pairs working properly, I've created a Figma community file of the templates I use to import the exact string values from Figma into Token Studio so everything works automagically!
There are written instructions in the file, and a link to my YouTube vlog/tutorial on this topic.
🔗 Figma Community File - Import Typography
The YouTube vlog covers:
A short version of the font family + weight challenges we covered in this blog
A step-by-step walkthrough of the steps in the Figma community file to
Quickly add a new font family and font-weight pair in Tokens Studio by saving them first as a text style in Figma
Use the Import feature in Tokens Studio to create design tokens for the font family and font-weight pairs or entire text styles.
Rename the "particle" tokens to be used in typography "composite" tokens
How to add our new typography into a different Figma file where tokens are already set up by copying and pasting the JSON files (it's not that scary I promise)
How to "remap" the existing tokens to our new font family and font-weight tokens
Pro tips on creating a visual preview for your new Typography tokens and how to organize them using the documentation token feature in Tokens Studio
Hope you found this helpful! Feel free to reach out if you have questions about the community file or YouTube video
Hi there! Can you provide new feedback since Figma has updated their variables? Has anything improved for you? Thank you!
Thank you so much Sam ! This is one out of so many reasons why Figma variables ain't tokens. I struggle so much to explain it ^^