Documentation

Install the npm package, load the plugin in Figma Desktop, and generate your first Design System page in minutes.

Connect the Figma plugin to your local dev server in one click — no manual config required.

The plugin triggers an on-demand scan of your components the moment you click 'Generate Design System Page' — no manual step required.

Control which component paths the scanner searches, which files to exclude, and whether to require Storybook stories.

The plugin scans your Storybook stories and renders each one as a Figma frame — automatically, without any manual work.

shadcn/ui components render correctly in Figma — borders, backgrounds, and rounded corners included — with no extra configuration.

Stories are parsed and used as the source of truth for what the plugin renders in Figma.

Class Variance Authority components are detected and all variant combinations rendered as a state matrix.

SVG icons used in your components are scanned, catalogued, and rendered correctly in Figma.

Any Tailwind arbitrary value — `w-[320px]`, `top-[calc(50%+2rem)]`, `text-[#ff6b00]` — is parsed and applied exactly in Figma.

All color tokens from your Tailwind config are extracted and bound as Figma Variables — on every plan.

Font sizes, weights, and line heights from your Tailwind config are captured as design tokens.

The full Tailwind spacing scale is embedded so padding, margin, and gap values are pixel-perfect.

Both colour themes are rendered in Figma — free users get side-by-side columns, Figma paid plan users get native Variable mode switching.

Per-theme font families — body and heading — are defined as design tokens, bound as Figma Variables, and applied to every text node automatically.

Every colour token in your Tailwind config is bound to a native Figma Variable — enabling live theme switching directly inside Figma.

Design tokens are synced in CSS-first mode by default, with DTCG still available for legacy or interoperability workflows.

Every Figma frame and layer is named after its story — so designers can navigate the layer panel without guessing what anything is.

All components and tokens are rendered on a dedicated Figma page — your single source of visual truth.

Reusable components are generated as native Figma symbols and rendered as instances when story props are compatible.

Components with responsive classes are rendered at sm, md, lg, and xl breakpoints automatically.

Hover, focus, disabled, and custom states are rendered as a matrix alongside the default.

Elements with `absolute` are pulled out of the auto-layout flow and placed as floating layers — just like CSS position: absolute.

next/image and <img> elements are fetched from your dev server and rendered as native image fills in Figma — no placeholders.

Linear, radial, and 3-stop gradients — including clip-path blob shapes — are converted to native Figma gradient fills with correct direction, stops, opacity, and masking.

Tailwind shadow, blur, and ring utilities are converted to Figma drop shadows, layer blurs, and stroke/shadow effects — pixel-perfect.

Push design token changes from Figma directly to your codebase as a GitHub pull request.

Changes in code are flagged in Figma. Changes in Figma flow back to code as a PR.

Direct access to the development team via a private support channel.