Documentation Studio — Specs, Tokens/Variables, Annotations, Redlines, dev-ready handoff

About this plugin

Documentation Studio turns a Figma page into real documentation — spec sheets, design tokens, annotations and measurements — in one plugin, in Design Mode and Dev Mode.── WHAT IT DOES ──────────────────────────────────────DOCS Scan a page and generate documentation three ways: a doc page with acover, contents and a section per component; one full spec sheet per component;or a compact summary board.SPECS Per-component spec sheets with Anatomy, Properties, Variants, Stylingand Layout & spacing — per-layer padding, gaps and sizes colour-coded likeFigma's inspector. Handoff mode adds measured dimensions and annotationsaround a clean copy of any frame.TOKENS Generate real Figma variable collections — colour, typography, spacing,radius — from 14 open-licensed base libraries (Tailwind, Material, Radix, OpenColor, Ant, Fluent, IBM Carbon, Atlassian, Polaris, Uber Base, Bootstrap,Chakra UI, GitHub Primer, Nord) or your own base colours. Ramps are generatedwith an OKLCH engine for even perceptual steps, with Light + Dark modes,semantic aliasing and bound text styles. Or document the tokens you alreadyhave, on canvas.USAGE Inventory every component instance and audit its health: overrides,hidden instances, renamed layers, local-vs-library components and hardcodedfills. Click any instance to jump straight to it.ANNOTATIONS Native Figma annotations — they live on the layer, move with it,carry Figma's own categories and show live property values in Dev Mode.MEASURE Native Figma measurements in Dev Mode; drawn overlays with outlinesand guides in Design Mode. Padding, gaps and sizes, with reusable presets.EXPORT Export the whole system as Markdown or HTML.── WHY THIS ONE ──────────────────────────────────────• One plugin for the whole documentation lifecycle, not one slice of it.• Uses Figma's native annotation and measurement APIs, so your notes andmeasurements stay live instead of becoming stale drawings.• Token generation is included, not gated.• Runs entirely on your machine. No account, no sign-in, no uploads — theplugin requests no network access at all.── GETTING STARTED ───────────────────────────────────1. Open the plugin on a page with components.2. Hit Scan on the Docs tab.3. Pick an output format and Generate.Everything lands to the right of your existing page content, selected andready to move.Feedback and bug reports:https://github.com/praveenmanchi/design-system-studio-plugin/issues