Autospec - Design System Documentation

About this plugin

AutoSpec - Generate your design specs automaticallyAutospec reads your Figma layers and generates formatted documentation frames right next to your components. It literally turns any of your components into fully documented in one click.FeaturesInstantly convert frames and components into structured spec layoutsAutomatically numbers layers, adds highlight overlays, and builds a complete legendIncludes fill, stroke, typography, sizing, spacing, corner radius, and bound variablesDocumentation appears right beside your design, fully visual and editableDetects and displays Figma variables and stylesOrganized, readable spec frames built for clarity and handoffOne-Click Generation where you just Select, generate, and document instantlyWhat's available nowAnatomy where you can Select any frame or component and Autospec numbers every layer, draws highlight overlays, and builds a full legend card showing fill, stroke, type, sizing, spacing, corner radius, and any bound Figma variablesComing nextMeasure : dimension lines and spacing tokens for every auto-layout containerProperties : a visual prop sheet for every component property and variantProperty Table : a scannable table of props, types, and default values for dev handoffHow it worksSelect a layer or component on the canvasPick a doc typeHit Generate - BOOOOM.Built for designers who ship to engineers. Free to use.