Back to Plugins
Variable Color Style Guide

Variable Color Style Guide

🎨 Instant variable style guide generator!

design-systemswatchesgeneratordocumentationannotationscomponentscolor paletteautomaticcolor styles

Plugin Preview

Variable Color Style Guide preview

About this plugin

How It Works:

  1. Select Local Color Variable Collection: Begin by choosing the collection of local color variables you want to work with.
  2. Choose Desired Swatch Style: Pick from a variety of swatch styles to best represent your design.
  3. Done! Just like that, your variable style guide is generated.


Features:

  1. Variable Bounded Swatches: 🎨 Ensure that your swatches are always linked to the right variable.
  2. Alias Variable Mapping: 🔗 Variable connection to its respective alias.
  3. Customizable Master Component: 🛠️ Tailor the master component to fit your design needs.
  4. Multiple Swatch Styles: 🌈 Choose from a range of swatch styles to best showcase your colors.
  5. Hyperlinked Navigation: 🔍 With instant index, instantly jump to any section.
  6. Unlimited Variable Modes Supported: 🔄 Work effortlessly across any number of modes.


Bugs or Feature Requests?

Discord 90.roosevelt - I'd love to hear of any ideas or issues you may have!

Plugin Details

Version5
CreatedAugust 8, 2023
Last UpdatedFebruary 20, 2024
CategoryFile organization plugins
CreatorSajid
Stats2435 installs, 236 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:dist/bundle.js
  • Editor Types:
    figma
  • Allowed Domains:
    • https://cdn.jsdelivr.net
    • https://rsms.me