How to batch rename variables in Figma

When building a design system, the consistency and standardization of variable naming are crucial. However, as the project scale expands and team collaboration deepens, we often need to rename a large number of variables.

Why do we need to batch rename variables?

In our daily work, the need for batch renaming variables is everywhere:

• Team norm changes：When the team decides to adopt a new naming convention, all existing variable names need to be adjusted
• Project migration integration：When merging multiple design systems from different sources, variable names need to be unified
• Framework switch：When migrating from one design framework to another, variable names need to be adjusted to conform to the new framework
• Error correction：When system-level spelling errors or naming errors are found, batch correction is required

Manually modifying hundreds of variables in Figma is not only time-consuming and labor-intensive, but also prone to omissions or errors. Heron Variable Tools is a tool that solves these pain points.

Powerful Features

In the Heron Variable Tools plugin, select multiple variables and click the Rename button at the bottom to enter the batch renaming function.

Batch Change Naming Convention

Different development teams and frameworks have different preferences for naming styles. Using Heron Variable Tools can quickly change the naming convention of variables. For example, if you originally used snake_case (e.g., text_secondary), you need to update all variables to lowerCamelCase (e.g., textSecondary). You can select lowerCamelCase in the plugin and preview the changes in the preview area. If there are any issues with the renaming of individual variables, you can directly modify them. After confirming that everything is correct, you can click the Rename button to apply the changes.

The plugin supports the following naming conventions:

• UPPER CASE
• lower case
• UpperCamelCase
• lowerCamelCase
• snake_case
• kebab-case
• space separated

Batch Add Prefix

When managing large design systems, adding a unified prefix to variables is a common requirement. When your design system needs to support multiple brands, you may need to add prefixes to variables for different brands. For example, you have a basic color system A, and now you need to copy a new color system for sub-brand B. Using the batch add prefix feature, you can quickly change primary-500 to brandA-primary-500 and brandB-primary-500, clearly distinguishing variables for different brands.

Batch Add or Replace Suffix

This is a special feature of Heron Variable Tools, which is especially suitable for migrating between different design frameworks. When your team decides to migrate from a Material Design color system (using a 0, 10, 20…90, 95, 99, 100 numbering system) to a Tailwind CSS color system (using a 50, 100, 200…900, 950 numbering system), manually modifying the numeric suffix of each color variable will be a nightmare. Using the add or replace suffix feature of the Heron Variable Tools plugin, you can complete this conversion with one click, greatly improving the migration efficiency.

Heron Variable Tools (30% OFF)

Extremely powerful variable tool in Figma

Try it now

Custom Find and Replace

The plugin also provides flexible “find and replace” functionality. For example, if you accidentally named all instances of secondary as seondary when creating a design system. After discovering this error, you need to correct dozens of variable names containing this spelling error. Using the “find and replace” feature, you can quickly correct all variable names containing seondary to secondary, ensuring the accuracy of the names.

Of course, the “find and replace” feature also supports complex regular expressions to meet your more complex needs.

Summary

The batch renaming feature of Heron Variable Tools transforms repetitive manual work into simple clicks. Whether it’s unifying naming conventions, adding prefixes and suffixes, converting number systems, or batch correcting errors, this plugin can help you complete these tasks efficiently.

In the process of building and maintaining a design system, time should be spent on more valuable design decisions rather than repetitive manual operations. Heron Variable Tools is a powerful tool that can free designers from manual work and improve efficiency. If you are building a design system using Figma, this plugin is definitely worth a try.