Heron variable tools

About this plugin

Heron variable tools can help you manage variables efficiently.

Learn more here:

👉🏻 https://heronhq.com/variable-tools

🎉 Now you can import or update palette variables from https://huetone.ardov.me

Fix raw values as variables

Set rules like using "Spacing/anyName" variables for auto-layout padding, click "Fix Variables", and it'll auto-bind all unbound values - works for text & effect styles too. Try it out! ✨

Import variables from libraries

Import variables from your favorite libraries so you can create your theme based on these palettes. For now we support Tailwindcss, Chakra UI, Radix UI, MUI and Ant design.

Import and export design token format module

Import and export variables by JSON file, based on the Design Token Format Module. You can copy variables from one file to another.

Bulk editing variables' scoping

Select variables, then edit their color scoping, number scoping or if hiding from publishing. This will save lots of time for you.

Bulk editing code syntax by convention

You can select a naming convention and apply it to multiple variables. Heron variable tools will add code syntax for every variable based on the naming convention and their name. Now we support 7 types of convention.

1. CSS variable: var(--text-color)
2. SASS variable: $text-color
3. LESS variable: @text-color
4. Upper camel case: TextColor
5. Lower camel case: textColor
6. Upper snake case: TEXT_COLOR
7. Lower snake case: text_color

Bulk renaming variables

Bulk renaming variables' name or changing naming style.

Generate color guide

Generate color guide from your local color variables automatically.

Create/Update variables from guide

Create or update color variables from your color guide. Manage color values and descriptions in Figma canvas.

Copy and paste variables

Copy variables, paste them in another collection or file.

Swap styles to variables

Swap your old styles to new variables with the same name. Support ignoring style prefix.