On this page
About Typography Style Guide Generator
Typography Style Guide Generator is a free Figma plugin published by Jan Gugler in 2023. It works in Figma Design and has 34,327 users and 485 likes on the Figma Community. It ranks #6 in Typography and #11 in Design Systems on our lists.
In the developer's words
This plugin allows you to generate a typography style guide based on your defined local styles.
The generator is especially built for teams who work according to the Tailwind Design system and use the associated naming scheme (e.g., "Heading / L / Regular").
Styles will be grouped based on the prefix before the slash and sorted by font size. Relevant font information like family, size, line height, and others will be shown per style. If there is no prefix, then the styles will be added to a group called "Other".
There are three options when running the plugin:
- Create a style guide with all defined local text styles.
- Create a style guide with all defined local text styles and add a tag if the style is used on the currently open page. This is especially useful if you have a large design system and thus not all styles are relevant for a subproject, but you still want to show the whole set.
- Create a style guide with only the used local text styles on the current page.
Enjoy and looking forward to your feedback.
What's new
Version 3 · released May 31, 2024
- Sample text is now linked as a style
Permissions and privacy
Network access
Typography Style Guide Generator declares no network access, so it runs entirely inside Figma and can't send your file anywhere.
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest.
Where Typography Style Guide Generator ranks
Typography Style Guide Generator alternatives
- 1
Font Replacer Ultimate 🔁 Swap change and replace fonts
by Ilia Kolebaev
152K users445Free + paid featuresReplace fonts through all pages and artboards
- 2
Typescale
by Sam Smith
116K users1.6KFreeHarmonious typographic scales
- 3
Type Tool
by Space Ursa Design
96K users1KFreeAdvanced text transformations directly in Figma.
- 4
Font Replacer
by Görkem YILDIZ
39K users314FreeOne Click, Endless Font Possibilities
- 36K users309Free
Font Management, Font Pairs and Typography
- 6
Uwarp Font Replacer
by Uwarp
27K users409FreeEasily replace fonts, swap font families, and batch change typography
Typography Style Guide Generator FAQ
What does Typography Style Guide Generator do?
Automatically generate text style guides based on your defined local text styles. It's a Figma plugin by Jan Gugler that runs in Figma Design.
Is Typography Style Guide Generator free?
Yes. Typography Style Guide Generator is free to install and run from the Figma Community, with no paid tier listed.
Is Typography Style Guide Generator safe to use?
Figma plugins can only reach the internet through domains listed in their manifest. Typography Style Guide Generator declares no network access, so it runs entirely inside Figma and can't send your file anywhere. As with any plugin, check the developer's privacy policy before using it on client work.
How do I install Typography Style Guide Generator?
Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.
What are the best alternatives to Typography Style Guide Generator?
By user count, the closest alternatives are Font Replacer Ultimate 🔁 Swap change and replace fonts, Typescale and Type Tool. Compare all of them on the best Figma plugins for typography.
Built this plugin?
Use this page as a landing page for Typography Style Guide Generator: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.
Style
Label
Size
Code
<a href="https://figmaplugins.co/plugins/typography-style-guide-generator/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Typography Style Guide Generator on figmaplugins.co" width="220" height="48"></a>