Heron variable tools

About this plugin

Extremely powerful variable management tool

❇️ Use code FIGMA to get a 30% discount

Checkout here and enter promo code FIGMA to get 30% off.

Swap styles to variables

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

Import and export as JSON

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

Export variables as CSS variables

Deliver CSS variable files to developers

Copy/Paste variables between files

between fiCopy variables, paste them in another collection or file.

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.

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 color guide

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

Learn more here:

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