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

color variables creator

create color variables from selection

by masha

users
12K
likes
246
saves
2.2K
comments
28
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v2 · Jan 20, 2024
First published
Oct 17, 2023
Publisher
masha
Features

What color variables creator does

Summarised from masha's description on the Figma Community.

  • select layers with fills that you want to turn into color variables

  • run the plugin

  • select collection and mode

On this page
Overview

About color variables creator

color variables creator is a free Figma plugin published by masha in 2023. It works in Figma Design and has 12,416 users and 246 likes on the Figma Community. It ranks #17 in Variables & Tokens on our lists.

In the developer's words

a plugin for those who handcraft their color scales ✨

how it works

  1. select layers with fills that you want to turn into color variables
  2. run the plugin
  3. select collection and mode

variable names will match the layer names.

(If you'd like to learn how to batch rename layers, I have a video for that)

plugin demo

Changelog

What's new

Version 2 · released Jan 20, 2024

The developer didn't publish release notes for this version.

Trust

Permissions and privacy

Network access

color variables creator 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.

Rankings

Where color variables creator ranks

Compare

color variables creator 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

color variables creator FAQ

What does color variables creator do?

create color variables from selection. It's a Figma plugin by masha that runs in Figma Design.

Is color variables creator free?

Yes. color variables creator is free to install and run from the Figma Community, with no paid tier listed.

Is color variables creator safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. color variables creator 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 creator?

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 creator?

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 color variables creator: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

color variables creator on figmaplugins.co

Style

Label

Size

Code

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