Creating a component specification and style guide are essential parts of the design process. It’s nearly impossible to imagine a design handoff without those two design artifacts. Yet, preparing the documents manually can take a lot of time. Hopefully, there is a simple solution for this problem — Figma plugins. This article will explore two Figma plugins that can help automate documentation.

Generate component specification using EightShapes

EightShapes Specs created by Nathan Curtis can help you automate the production of page and component design specifications of selected components, instances and frames.

Suppose we want to generate a specification of a button component that has a few properties (style, state, icon, and label).

Button UI component created according to the Material Design guidelines.

The plugin can generate a component’s anatomy, properties and layout spacing.

Running EightShapes Specs for the button UI component.

Anatomy. The plugin generates UI component anatomy. It marks layers and annotated dependencies and other unvarying attributes.

Button component anatomy.

Properties. The plugin compares attributes across each variant to highlight differences and layers associated with boolean props.

List of properties of a button component.

Layout and spacing. The plugin shows the spacing of layers with auto layout, describing attributes and annotating artwork with markers and lines.

Layout spacing for the button component.

Generate style guide using Automatic Style Guides

Automatic Style Guides created by Jordan Geizer prepares a formal style guide documentation from your local styles (text and color styles).

Suppose we want to create a style guide for the mobile app design project with two text and color styles.

Mobile app design project that features two color and text styles.

The plugin generates a Figma page with your color and text styles that you can export as a PDF file and share with your team.

Color styles used in mobile design.
Text styles used in mobile design.

Want to learn UI design?

Try Uxcel. Uxcel will help you learn and improve your design skills with interactive UI courses and skill tests built specifically for professional designers. You will get 25% off discount for the Pro Yearly subscription if join through this link.

The best way to learn UX design

This post contains affiliate link(s)

How to automatically generate a component specification and style guide in Figma was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.