ever been the person handling the design system in your team and had to manually document the anatomy of every single component?
i create documentation for each component we build breaking down every element, labelling parts, noting sizes, colours, spacing , literally everything my developer team needs. it’s honestly one of the most time consuming parts of maintaining a design system. doing it manually for every component was getting really hectic and i always wanted to automate it.
so i built autospec - a plugin that generates the full anatomy of any component with a single click. i've been using this plugin internally and its been helping us a lot and wanted to get feedback from people who are using it, so i can make it bigger and improve it based on the feedback i get.
These are just intial versions and i've been cooking a lot in the background with many features.
Here is what it can do for now :
- select any component and hit generate anatomy
- automatically detects and annotates every element inside the component
- labels each element with numbered markers (1, 2, 3…)
- generates a detailed table on the left panel mapping each number to the element name, size, colour, and other design specs
- gives developers a clear visual breakdown of how the component is structured and what design tokens are being used.
i’m a designer who builds figma plugins to automate parts of the design workflow. would love to hear your thoughts on this one.
Link : https://figmaplugins.co/autospec
Community link : https://www.figma.com/community/plugin/1617583429485136783/autospec-design-system-documentation