Back to Plugins
AP Variables Style Guide Generator

AP Variables Style Guide Generator

Turns your local variables into an on-canvas style guide.

Plugin Preview

AP Variables Style Guide Generator 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

Version3
CreatedSeptember 22, 2026
Last UpdatedSeptember 28, 2026
Categoryui-kits
CreatorAndrew
Stats1 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none