0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#13 in Variables & Tokens

Variable Color Style Guide

🎨 Instant variable style guide generator!

by Sajid

users
17K
likes
389
saves
3.5K
comments
36
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v5 · Feb 20, 2024
First published
Aug 8, 2023
Publisher
Sajid
On this page
Overview

About Variable Color Style Guide

Variable Color Style Guide is a free Figma plugin published by Sajid in 2023. It works in Figma Design and has 17,281 users and 389 likes on the Figma Community. It ranks #13 in Variables & Tokens and #19 in Design Systems on our lists.

In the developer's words

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!

Changelog

What's new

Version 5 · released Feb 20, 2024

  • Bug Fixes:
  • Resolved a bug causing Hex/RGB codes to display as "NaN" for variables with multi-level alias references, ensuring accurate color representation.
  • Corrected variable naming within instances to use only the specific variable name, omitting the preceding group path for clearer identification.
  • New Feature:
  • HSB color model is now also supported.
Trust

Permissions and privacy

Network access

Variable Color Style Guide can only connect to the 2 domains declared in its manifest: cdn.jsdelivr.net and rsms.me.

  • cdn.jsdelivr.net
  • rsms.me

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest.

Rankings

Where Variable Color Style Guide ranks

Compare

Variable Color Style Guide alternatives

  1. 1

    Styles & Variables Organizer

    by Chenmu Wu

    134K users3.2KFree + $15 upgrade

    Apply styles and variables to all your designs with one click!

    View details
  2. 2

    Export/Import Variables

    by Honza Toman

    85K users1.7KFree

    Export variables from one file and import them to another. Supports modes, references, and scopes.

    View details
  3. 3

    Design Tokens

    by Lukas Oppermann

    62K users1.9KFree

    Export design tokens to JSON or GitHub.

    View details
  4. 4

    Figma Tailwindcss

    by Jan D'Hollander

    53K users606Free

    Export design tokens to tailwind theme

    View details
  5. 5

    Kigen

    by vijay verma

    34K users1.7KFree

    Create Design System Variables, Tokens, Styles and more with documentation

    View details
  6. 6

    variables2css

    by Kai-Uwe Hella

    28K users353Free

    Convert Figma Variables to CSS, Sass, Tailwind, Json, Javascript (Styled-Components), Less or Stylus

    View details
FAQ

Variable Color Style Guide FAQ

What does Variable Color Style Guide do?

🎨 Instant variable style guide generator. It's a Figma plugin by Sajid that runs in Figma Design.

Is Variable Color Style Guide free?

Yes. Variable Color Style Guide is free to install and run from the Figma Community, with no paid tier listed.

Is Variable Color Style Guide safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. Variable Color Style Guide can only connect to the 2 domains declared in its manifest: cdn.jsdelivr.net and rsms.me. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install Variable Color Style Guide?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Variable Color Style Guide?

By user count, the closest alternatives are Styles & Variables Organizer, Export/Import Variables and Design Tokens. Compare all of them on the best Figma plugins for variables & tokens.

For developers

Built this plugin?

Use this page as a landing page for Variable Color Style Guide: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Variable Color Style Guide on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/variable-color-style-guide/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Variable Color Style Guide on figmaplugins.co" width="220" height="48"></a>