Design System Page
All components and tokens are rendered on a dedicated Figma page — your single source of visual truth.
How it works
The plugin generates a Figma page containing the token tables, themed component columns, story variants, and grouped preview sections. Instead of one flat dump, the page is organised into atomic groups (Atoms, Molecules, Organisms, Utilities, Other) inferred from scanner metadata and composition usage, so designers can scan the system quickly.
Usage
- 1
Click 'Generate Design System Page' in the plugin panel.
- 2
A page named 'Design System' is created (or updated) in your Figma file.
- 3
Token tables are rendered first, followed by the component catalogue sections.
- 4
Themes are rendered as columns, and each theme groups related components into higher-level sections.
- 5
Each component block contains its story variants, with responsive and state previews nested under the relevant story.
- 6
Re-running the command updates only changed components — unchanged frames are preserved, so annotations, comments, and manual positioning survive re-runs.