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.
To 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 moreWe’ve created a series of short video tutorials to help you get the most out of our Design System Starter Kit. Whether you're just getting started or customizing it for your brand, these videos will guide you through every step—fast, easy, and stress-free.
Read more