Figma plug-in: Variable Linter

Ensuring proper variable usage in Figma can be challenging, especially if you are working in a team or organization context where it is critical to use the correct variables. Often times you might be inheriting a set of shared variables but the working file(s) might reference orphaned, out of date variables. Or you might be on the design system team and see local variables that have been mis-applied or applied to test a design override and never reset to approved values. Going through files to rectify this by hand can be time consuming and open to errors.

This plugin works by having a selection made when invoking the plugin or selecting a component, component set or instance and clicking a button. The plugin even works with local components that might contain nested components from a shared library. The plugin parses the selection and reports on every variable in use, the source for that variable and the value of those variables. Given the depth of properties in a Figma design that uses variables, there can be hundreds of variables in a simple screen designed to show even the most basic of interfaces/experiences.

Getting started

Install the plug-in by visiting my Figma Community page and selecting Variable Linter and open it in a Figma file which you have edit access.

Scanning your stuff

Select a component, component set, instance or frame and run the plugin. Once the plugin runs, in the top half of the UI, all the variable collections found in your selection will appear along with any source parent file such as a shared design library. You can select which collections are approved or valid and click the "Approve" button:

Even orphaned variables (when Figma can't find the source) can be seen:

Once you've approved your collection(s), you can collapse the sources panel and the UI will show an expanded results table. The plugin allows for individual replacement for a surgical approach or you can select multiple occurrences and bulk replace. There is also a filter checkbox to display only unapproved variables to make replacement easier.

The plugin can also surface component set problems that are best handled directly by editing inside of Figma rather than through the plugin.

Replacing variables

In the following figure, I tested the plugin on a single property, the top left border radius with a value of 256. I want to change that to 999 and use the appropriately approved collection to do it:

Once you perform a replacement, the plugin will make the changes and rescan the selection:

The plugin is relatively quick. I selected a Figma Section that contained all the Card component sets in a design system. The plugin found over 50,000 variables applied to the components. The plugin utilizes lazy loading to load 100 variables at a time as you scroll down the list:

I must caution you to be extremely careful when running this plugin. Test it first on copies or instances to make sure it will function as you intend.

You can reach me via this site or my profile page in the Figma Community if you have questions or suggestions. Happy variable linting!