AP Variables Style Guide Generator
Turns your local variables into an on-canvas style guide.
Plugin Preview
About this plugin
Generates a complete Style Guide page directly from your file's local variable collections — no master components or shared library required, works in any file.Pick which collections (and even specific groups within them) to include, and the plugin builds a Section for each: a Colors section for color variables, a Tokens section for everything else — spacing, radius, typography, and so on — with a separate pair of sections per mode for multi-mode collections like Light/Dark.Typography tokens are composed into live text samples: font size, line height, letter spacing, weight, and family are pulled together and actually bound to your variables, so each sample stays wired up if you update a value later. Color swatches distinguish primitives (swatch + hex) from semantic aliases (swatch + what they reference).Re-running the plugin replaces a collection's previous sections instead of duplicating them, so it's safe to regenerate after changing your variables.
Plugin Details
| Version | 3 |
|---|---|
| Created | September 22, 2026 |
| Last Updated | September 28, 2026 |
| Category | ui-kits |
| Creator | Andrew |
| Stats | 1 installs, 0 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the ui-kits category.
UI Components Kit
pre-built UI component to be used in you design from Material UI , Chakra UI , and more ...
UI Kit
Turn technical debt into design consistency.
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries
Design System Hub – Curated Library of 150+ UX Design Systems & Figma Libraries