Apply variables

About this plugin

Already have your variables set up and want to bulk apply them to your work? You can swap styles with variables or apply variables that match raw number values to elements in any file with access to your variables collections! 

Watch a demo video of the plug-in in action here.

Swap with variables by name

1. Example: elements with color style background/default applied to them will have the variable called background/default applied to them after the plug-in works its magic. 
2. Reads names from applied color styles or applied variables and lets you swap that with a variable of a given collection with the same name
3. Currently available for color variables.

Apply matching variables (autofix) to radius or AutoLayout dimension properties

1. Example: you have a variable called container-radius/default with a value of 8. After the plugin runs, all containers with 8 as their corner radius would have the container-radius/default variable applied. 
2. Currently available for number variables (corner radius, item spacing, padding and row gap).
3. If there are several variables with the same value, it chooses the first variable with the same scope settings as the property would need. If no variable matches the scope, it picks the first one that has generic scope that matches.
4. We rank variables by name, meaning a variable with padding in its name will be preferred for the auto layout properties. One with gap or spacing in its name will be preferred for the gap properties. One with radii, cornerRadius or radius will be preferred for the radius properties

Learn more about variable scoping from the Figma docs here

How to use

1. Ensure you have access to variables in your local file or through a published team library. 

2. Select the elements on the canvas that you want to apply your variables

3. Run the plugin and choose which kind of variable you want to apply: Swap with variables by name or Apply matching variables (autofix)

4. Select the name of the library with the variables you want to apply. It automatically lists all shared libraries that are active. If your library doesn't show up, reload/reopen the Figma file. You can also pick "Local" if your collection is local to this file.

5. Select the name of the collection that has the variables you want to apply 

6. Choose where you want the variables to be applied 

1. Selection (optimal performance) - If you’ve selected specific elements on the Figma canvas to apply variables 
2. Page - scans all elements on the current page and apply variables 
3. Document - scans all elements on every page within the Figma File and applies variables (can be slow)

7. Check the status message at the bottom of the page 

Made with ❤️ from your friends at Tokens Studio