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.
This checklist will help designers, developers, and other stakeholders align on essential components and processes, leading to a cohesive and user-friendly experience across all digital products.
Read moreEvery system relies on a rock-solid base or foundation. For a design system, foundations establish the baseline for all your future components and templates.
Read more