Variables → Selection

About this plugin

Replace static values with variables

Have you ever struggled manually replacing designs with static property values with variables? Now you can automate and precisely control what gets updated and from where.

How to use the plugin

1. Select something in the canvas
2. Select the scope of your variables, color or number
3. Select any collection as a source
4. Optional: provide the path to specific groups of variables
5. Optional: ignore nested instances, which will prevent overriding properties set in your components
6. Optional: ignore zero values, which will prevent variables with a zero value from being applied to properties with a 0
7. Apply

Additional features

1. Automatically maps scoped variables to where they can be applied
2. Support for external libraries
3. Based on selection, so you can control exactly what gets updated. From simple components to complex sets of variants

Supports

1. Variables types: colors, numbers, strings
2. Color properties: fill, stroke, effect
3. Color type: fill, stroke, opacity, gradient
4. Number properties: padding, gap, height & width, min/max height & width, stroke weight, radius, opacity, effects
5. Effect properties: position, blur, spread
6. Effect type: drop shadow, inner shadow, background blur, layer blur
7. Text properties: font family, font weight, font size, line height, letter spacing, paragraph spacing

Detach existing variables

Have you ever struggles to remove old variables in order to replace them with new ones? Now you can strip them out with a single click.

How to use the detach feature

1. Select something in the canvas
2. Optional: ignore nested instances, which will prevent overriding properties set in your components
3. Detach

Limitations

1. Strings can be used for font family and font weight
2. Text styles are ignored. You should use and manage text styles separately. You may find the plugin Variables -> Text Styles useful.

Notes

1. The larger your selection, the longer this process may take. It's recommended to scope your updates to components then to layouts.