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:
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
Then check if the font is available in the dropdown list: