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#12 in Variables & Tokens

Color Variables Style Guide

color variables -> style guide

by andrei alikimovich

users
33K
likes
260
saves
2.9K
comments
27
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v7 · Mar 14, 2024
First published
Jul 22, 2023
Publisher
andrei alikimovich
Features

What Color Variables Style Guide does

Summarised from andrei alikimovich's description on the Figma Community.

  • Set up local color variables

  • Get the plugin started

  • Choose a collection with color variables

  • Push the button

  • Done!

  • Manifest

    Create Style Guide

    A quick action you can run from the Actions menu (Cmd/Ctrl + K).

On this page
Overview

About Color Variables Style Guide

Color Variables Style Guide is a free Figma plugin published by andrei alikimovich in 2023. It works in Figma Design and has 32,601 users and 260 likes on the Figma Community. It ranks #12 in Variables & Tokens and #19 in Design Systems on our lists.

In the developer's words

Easily create color style guides based on color variables!

How it works:

  1. Set up local color variables
  2. Get the plugin started
  3. Choose a collection with color variables
  4. Push the button
  5. Done!

Supports multiple modes!

Changelog

What's new

Version 7 · released Mar 14, 2024

  • BIG UPDATE:
  • + table view
  • + hsl and lch color modes
  • + works 30% faster
Trust

Permissions and privacy

Network access

Color Variables Style Guide declares no network access, so it runs entirely inside Figma and can't send your file anywhere.

Extra permissions

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

Read from the plugin's published manifest. Questions about data handling go to the developer's support page.

Rankings

Where Color Variables Style Guide ranks

Compare

Color Variables Style Guide alternatives

  1. 1

    Tokens Studio for Figma

    by Jan Six

    369K users7.6KFree + paid features

    The scalable design tokens solution for Figma

    View details
  2. 2

    Design System Organizer

    by Arthur

    205K users3.1KFree + paid features

    Extended swap for variables/styles/components, export variables/styles, bulk-audit library & mockups

    View details
  3. 3

    Styles & Variables Organizer

    by Chenmu Wu

    140K users3.3KFree + $15 upgrade

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

    View details
  4. 4

    Export/Import Variables

    by Honza Toman

    91K users1.7KFree

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

    View details
  5. 5

    Styles to Variables

    by Yann-Edern Gillet

    90K users1.1KFree

    Convert your Figma Styles into Variables

    View details
  6. 6

    Variables Pro

    by Figterate

    82K users479Free

    Variables Pro | Swap, Import, Export Variables

    View details
FAQ

Color Variables Style Guide FAQ

What does Color Variables Style Guide do?

color variables -> style guide. It's a Figma plugin by andrei alikimovich that runs in Figma Design.

Is Color Variables Style Guide free?

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

Is Color Variables Style Guide safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. Color Variables Style Guide declares no network access, so it runs entirely inside Figma and can't send your file anywhere. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install Color Variables 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 Color Variables Style Guide?

By user count, the closest alternatives are Tokens Studio for Figma, Design System Organizer and Styles & Variables Organizer. 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 Color Variables Style Guide: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Color Variables Style Guide on figmaplugins.co

Style

Label

Size

Code

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