If you are building design system with Figma and need really good and automatized documentation, here are my top 5 plugins:
This plugin helps you generate a table displaying all your created variables. You can choose the collection to display, such as Colors, Typography, or Spacing for example. When you edit your variables, simply refresh the table to see the changes. It's a valuable tool for sharing and documenting your variables with your team.
Automate production of page and component design specification ("specs") of selected components, instances and frames. In just one click, you can generate a full page documentation including:
- Anatomy with marked layers and annotated dependencies, instance props and other unvarying attributes
- Props that compare attributes across variants to highlight differences and boolean prop layer visibility
- Layout and spacing of layers with autolayout, describing attributes and annotating artwork
- And much more...
With one click, this plugin documents all of the color and text styles for you.
Generate all possible instances for your components, including every combination of variants and component properties, all in a tidy labelled table.
It automatically generates a version number so you can identify it, and saves each version in Figma's history.
Here is our list of top design system resources that we use daily to design and build our own systems. We hope they’ll help you too.
Read moreTo automatize the the design process, we always look for the best Figma tools available. From documentation, to color contrast checlk, a lot of great plugins are available out there.
Read more