Style guides are formal or informal documents that outline the details of different aspects of a design system, such as colors, typography, or effects. Building style guides ensures the quality and consistency of the design, providing a single source of truth and therefore speeding up both the design and development processes.

When to use style guides

The timing of using style guides can vary. On one hand, design teams usually have internal style guides that evolve alongside design decisions. These style guides are usually simple, loosely defined, and sometimes even conflict with each other because they are often created in a relatively short amount of time. However, the main benefit of building them is to visualize the scope and scale of the design system, helping designers easily review and refine each guide later.

On the other hand, design teams often compile another version of style guides for external sharing. These style guides are usually well-detailed, precise, and stable. Their main goal is to provide a well-structured, comprehensive, and polished reference for both internal and external stakeholders, such as developers, marketing teams, and external collaborators.

What should be included

Building well-structured style guides can be frustrating, as there are many details to include, and they can easily be overlooked. Below is a suggestion of elements you should include when creating style guides:

Essentials

1. Time created
2. Title (For organizing multiple style guides)

For color style guides

1. Style name
2. Color value (Hex/ RGB/ RGBA/ HSL/ OKLCH)
3. Modes (If applicable)
4. Alias variable (If applicable)
5. A short text to explain style usage

For typography style guides

1. Style name
2. Font name
3. Font size
4. Line Height
5. Letter spacing
6. Paragraph spacing
7. A short text to explain style usage

For effect style guides

1. Style name
2. Drop shadow properties (Color, Opacity, X, Y, Blur, Spread)
3. Blur value (If applicable)
4. A short text to explain style usage

Plugins that automate style guides creation

Building style guides from scratch takes a significant amount of time and effort—not to mention the ongoing work of regularly checking and updating them. This is where plugins come into play, helping streamline the process and reduce manual effort. Below are the plugins that aims at automate the style guides creation process:

1. Spaciiing (Paid)

The “Catalogue” feature inside this plugin helps you create a style guide with a single click. Moreover, its recent update allows users to sync notes on style guides back to Figma for future regeneration, making the style guides truly interactive.

Pros: Support the creation of style guides for Figma styles and variables, covering a wide range of types, including colors, typography, effects, and numbers.

Cons: The output is not designed for presentation formats such as a 16:9 or 4:3 ratio. Additionally, it is a paid plugin costing $3 per month, but free users can access this feature after a 30-second wait.

2. Automatic Style Guides (Free)

This plugin helps you to transform your existing styles into beautifully crafted documents.

Pros: The output can be exported directly as a PDF for sharing purposes. Additionally, the generated results can be updated with dedicated command, which is really convenient.

Cons: This plugin does not allow users to specify which parts of the styles should be generated as style guides. Therefore when used in a large file, it may become laggy.

3. Variable Color Style Guide (Free)

This plugin helps you create style guides for your figma color variables.

Pros: You can choose to output the result as either a card or a table. Additionally, it automatically generates a link that allows you to quickly jump to a specific section. Description writes on figma native field is also supported.

Cons: This plugin separate documents based on variable mode when “card” output style is selected, making it hard to find and compare value for a single variable.

4. Color variables style guide (Free)

This plugin helps you create style guides for your figma color variables. Description writes on figma native field is also supported.

Pros: You can choose to output the result as either a card or a table.

Cons: It seems that the plugin does not support alias variables. When attempting to generate them, the plugin skips the generation and displays an error alert.

5. Color Variable Style Guide Generator (Free)

This plugin helps you create style guides for your figma color variables.

Pros: The output document is beautiful and elegant, best suit for designer who prefer simple design style.

Cons: This plugin does not allow users to specify which parts of the styles should be generated as style guides. In addition, it only support color value to be presented as HEX format.

6. Typography Style Guide Generator (Free)

This plugin helps you create style guides for your figma typography style.

Pros: The output document is beautiful and elegant, best suit for designer who prefer simple design style.

Cons: Some of the properties such as font size, line spacing, letter spacing and text case are generated without title, making it confusing and hard to read.

7. Color Style Guide (Free)

This plugin helps you create style guides for your figma color styles.

Pros: This plugin is simple to use, description writes on figma native field is also supported. It allows to display HEX, RGB and HSL at the same time.

Cons: This plugin does not allow users to specify which parts of the styles should be generated as style guides.

8. Print Style Guide (Paid)

This plugin provides comprehensive options to create style guides based on your figma styles and variables.

Pros: Comprehensive customize options.

Cons: This plugin does not allow users to specify which parts of the styles or variables should be generated as style guides. When creating style guides, this plugin will overwrite existing one instead of creating a new one. This might be unwanted behavior for designer who wants to track modifications on guides. Additionally, it is a paid plugin which cost $15 one time payment.

SHARE

RECOMMEND

• 

  Essential tips for building style guides in figma

  Style guides are formal or informal documents that outline t...

  2025.02.26
• 

  製作Figma樣式文件的必要訣竅

  樣式文件(Style guides)是用來規範設計系統各個元素的文件，無論是正式或非正式的，都會涵蓋顏色、字體、效果等細...

  2025.02.26
• 

  挖掘同一APP在iOS、Android平台上的UI元素外觀差異

  「選用的開發技術」及「是否使用平台原生UI」會影響APP在iOS、Android平台上的畫面呈現。本篇文章以台灣常見的A...

  2024.09.09

製作Figma樣式文件的必要訣竅

2025.02.26

語言所消弭的距離

2025.03.03