Using Spark spacing units in your Figma file
Once you’ve enabled our library in your file, you just need to select any layer and you’ll have 2 options for spacing:
- Apply a gap spacing variable
- Apply a padding spacing variable
Applying a gap spacing variable
What is a gap?
We refer to gaps as the space between elements within a component. For example, the gap between one form field and another in a form.
The gap between from fields.
On Figma you can set the gap for a container by setting a value on item spacing input on auto-layout panel.
The item spacing input.
To apply a variable just click on the item spacing dropdown and select Apply a variable
Applying a variable to a gap.
From there you can select the spacing variable that fits the best for you.
Make sure you select a gap variable, it is not mandatory but we highly recommend it.
Applying a gap variable
And that’s it!
Applying a padding spacing variable
What is a padding?
The inner white-space of a component, for example, the inner white space that a card has.
The padding of a card.
On Figma you can set the padding for a container by setting a value on the padding inputs on auto-layout panel.
The padding inputs.
To apply a variable just click on any of the padding dropdowns and select Apply a variable
Applying a variable to a gap.
From there you can select the spacing variable that fits the best for you.
Make sure you select a padding variable, it is not mandatory but we highly recommend it.
Applying a padding variable.