Seeking Plugin for Analyzing Font Weights and Sizes Across Entire Pages for Design System Creation

Ask the community
,
1

I’m working on a Design System for a company that has a complete UI for both mobile and web apps. I need a plugin to help me analyze the pages (or ideally the whole file) and extract font weights and sizes together to create typography styles based on the existing design.

So far, the plugins I’ve found only provide font weights and sizes separately, which isn’t very efficient for such a large design. I understand the list might be long, but this would save a lot of time compared to manually going through everything.

If there isn’t a plugin that does this, do you have any recommendations on how to approach this problem?

Plugins I’ve tried that almost solved the problem: FontScanner, Design Lint, TextManager

pls, help :sob:

2

For efficiently extracting font weights and sizes together to create typography styles in a design system, you can consider the following approaches:

1. Figma Plugins for Typography Analysis:

Font Scanner

  • Description: Helps in identifying and listing fonts used in your design, including font weights and sizes.
  • Usage: Although you’ve tried this, make sure you’re using the latest version and exploring all its features for extracting combined typography data.

Design Lint

  • Description: Identifies inconsistencies and helps in managing typography and styles.
  • Usage: This plugin can be useful for spotting inconsistencies which may help in organizing your typography data.

TextManager

  • Description: Manages text styles and helps in organizing typography.
  • Usage: Ensure that you’ve explored its full range of features for extracting combined font weights and sizes.

2. Additional Plugins to Explore:

Font Styles

  • Description: This plugin extracts text styles including font weights and sizes from your design file and organizes them.
  • Link: Font Styles

Style Dictionary

  • Description: Converts your design tokens, including typography, into a format that can be used in development.
  • Link: Style Dictionary

3. Custom Solutions:

Figma API

  • Custom Script: If existing plugins don’t meet your needs, consider using the Figma API to create a custom script or tool. This script can iterate through your design file, extract font weights and sizes, and compile them into a format suitable for creating typography styles.

4. Manual Approach:

  • Text Styles Panel: If all else fails, you might need to manually extract typography styles from the Text Styles panel in Figma. Although time-consuming, this ensures accuracy.

5. Community and Support:

  • Figma Community: Post your requirement in the Figma Community to see if anyone has developed or knows of a plugin that fits your needs.
  • Figma Support: Reach out to Figma Support for advice or feature requests that could help in your case.

These approaches should help you gather the necessary typography data more efficiently. If you need more details on any specific plugin or approach, let me know!

1 Like
3

Thank you Alok, I will try your suggestions and come back with the results :four_leaf_clover:

4

I haven’t tried out the list by @Alok but I use this one, and I believe it also meets your requirements.
https://www.figma.com/community/plugin/816627069580757929

1 Like