Heron variable tools

• 中文文档
• Buy Pro (opens new window)
  • Use code FIGMA for 30% off when checkout (End at 29 Feb 2024)

Heron variable tools is a powerful Figma plugin that helps you efficiently manage and create variables when building design systems.

Bulk editing variables

With this plugin, you can select some variables and then edit their scope and code syntax.

Why set the scoping of variables?

First, setting the scoping of variables can make you find the desired variables faster when choosing variables. For example, we set the scoping of the color variables under the Text category to be only for text. So when you select a text layer and assign it a color variable, you can only see these text colors and no other irrelevant colors.

For some variables in the color palette, we will not use them directly in the our design. Therefore, you can uncheck all these scopes, so you won't see them when assigning variables.

Why set the code syntax of variables?

Setting a code syntax for variables makes it easy for developers to view and copy the corresponding code in dev mode. Currently, Heron variable tools support 7 formats:

• CSS variables: var(--text-color)
• Sass variables: $text-color
• Less variables: @text-color
• Upper camel case: TextColor
• Lower camel case: textColor
• Upper snake case: TEXT_COLOR
• Lower snake case: text_color

After selecting a naming format, the plugin will automatically generate the corresponding code based on the variable name, without having to change one by one.

Export and import variable collections

Export variables as JSON files

Heron variable tools supports exporting variable collections as JSON files that comply with the Design Token Format Module (opens new window) standard. If you chose With all properties when exporting, the exported JSON will also contain data such as the scoping and code syntax of the variables.

Import variable collections from JSON files

The exported JSON file can be re-imported, so we can achieve the copying of variable collections.

Import variables from pre-set color palettes

Heron variable tools has built-in color palettes of many well-known design systems, you can directly import them as variables, and then build your own theme variables based on them. Currently, it supports Tailwindcss (opens new window), Chakra UI (opens new window), Radix UI (opens new window), MUI (opens new window) and Ant design (opens new window).

Copy and paste variables

Using Heron variable tools, you can also copy variables from one collection to another collection in the same file, or copy to another file.

Generate color guide from local variables

Using Heron variable tools, you can generate a color guide from local color variables. You can custom color format displayed in color cards, and the number of cards per line. You can also use custom color card component as needed, but there should be some layers inside that meet the following naming conventions:

• Text layer named $name will be displayed as variable name;
• Layer named $value-preview will serve as color preview layer;
• Text layer named $value will be displayed as variable color value;
• Text layer named $description will be displayed as variable description.

These layers don't all have to exist, you can set a few as needed.

Create or update variables from color guide

Conversely, you can also create or update variables through the color guide. The plugin will find instances that meet the following conditions within the selected range, and extract the content inside to generate or update variables.

• Instance named starting with Guide;
• The following layers are in each instance:
  • Text layer named $name will be recognized as variable name (required);
  • Layer named $value-preview, their fill color will be recognized as variable color value (one or the other);
  • Text layer named $value, their text will be recognized as variable color value (one or the other);
  • Text layer named $description will be recognized as variable description.

Swap old styles with variables

In previous designs, we used styles, now we can use Heron variable tools to replace all these styles with new same-name variables. In previous designs, you might use different prefixes to distinguish different themes, such as having ⚫️ Light/Text and ⚪️ Dark/Text styles at the same time, but after using variables, we want to replace them all with the variable ⬛️ Text. Heron variable tools supports ignoring the prefix of the style name, so you can enter Light or Dark in the ignored prefix, then you can swap both styles with the variable ⬛️ Text.