Fonts

story.to.design supports mapping your Storybook fonts into Figma.

More specifically, it instructs Figma to use the same fonts you are using in your Storybook components. Those fonts have to be available in Figma, as Figma plugins cannot install new fonts or dynamically get them.

If the imported components in Figma are not using the font you expect, you might want to check:

  • The internal name of the font which is rendered in your Storybook.
  • If Figma recognizes this font.

One important thing to understand is that only the user importing components using story.to.design actually needs to have the font installed. Others, even if using those components, do not need it because Figma uses a clever system where the text’s vector paths are saved, allowing them to see the text properly rendered even without having the font installed.

What font is my Storybook using?

The font name story.to.design instructs Figma to use is the internal name of the font rendered within your Storybook. This is because Figma is not aware of font-family mappings used on the page and uses font names which appear inside font files. These names can be found in DevTools such as Chrome’s. Here is an example - check out the Rendered Fonts section:

Chrome DevTools showing rendered font

Now that you know the font name you are using, we can check if that font is available in Figma.

Checking the font is available in Figma

Head to any text component in Figma, and look for the Text section:

Figma text properties section

Then check if the font is available in the dropdown list:

Figma available fonts

If the font is not listed, then it is not available. The font needs to be installed. One option is to install the font locally, another is to install it to your organization if you have access to it.