Heron variable tools

Extremely powerful variable management tool❇️ Use code FIGMA to get a 30% discountCheckout here and enter promo code FIGMA to get 30% off.

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

Import and export as JSONImport 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 variablesDeliver CSS variable files to developersCopy/Paste variables between filesbetween fiCopy variables, paste them in another collection or file.

Fix raw values as variablesSet 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 librariesImport 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' scopingSelect 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 conventionYou 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.CSS variable: var(--text-color)SASS variable: $text-colorLESS variable: @text-colorUpper camel case: TextColorLower camel case: textColorUpper snake case: TEXT_COLORLower snake case: text_colorBulk renaming variablesBulk renaming variables' name or changing naming style.

Generate color guideGenerate color guide from your local color variables automatically.

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

Learn more here:

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