Link spacing variables

About this plugin

Effortlessly link spacing variables to your design system, ensuring consistency and efficiency throughout the design process.

Depending on the scope you define for each variable, auto-layout spacings, width, height and corner radii can be linked.

How it works:

1. Create a collection: Start by creating a collection that contains all your spacing variables (e.g. xs, sm, md etc.). Make sure you set the right scope for each variable.
2. Select the layer(s): Choose the layer(s) in your design that you want to link with the spacing variables.
3. Run Apply spacing variables command from the plugin menu. If it's your first time using the plugin, it will prompt you to specify the collection that holds the spacing variables. No worries - we'll save that selection.
4. Automatic linking ✨: The plugin will automatically link all selected layers and any nested layers that utilize autolayout to the corresponding spacing keys in your collection.

Spacing variables won't be linked to nested instances: The plugin ignores nested instances of components within your selected layer(s) to prevent accidental overriding of values. You still have the flexibility to manually override values by explicitly selecting individual instances or layers within an instance.

Ensure the frame's mode matches spacing collection to apply correct values: If your spacing collection offers different modes based on viewport widths (e.g., desktop or mobile), it's crucial to ensure that the frame you're working on is set to the appropriate mode. This way, the plugin will apply the correct spacing values according to the chosen mode. Learn more about modes for variables.

Changing spacings collection: To change the spacing collection, simply navigate to the Apply spacing variables > Settings.

Github page