How to Use Variables for Spacing in Figma: Simple Guide

In Figma, you can use Design Tokens or Styles to create variables for spacing. Define a spacing value as a variable, then apply it consistently across your design by referencing that variable in padding, margin, or layout grids.

Syntax

Figma uses Design Tokens or Styles to create reusable variables for spacing. You define a variable with a name and a value, then apply it to elements.

• Variable Name: A descriptive name like spacing-small.
• Value: The pixel or rem value, e.g., 8px.
• Usage: Apply the variable to padding, margin, or grid gaps.

plaintext

spacing-small = 8px
spacing-medium = 16px
spacing-large = 24px

Example

This example shows how to create a spacing variable and use it for padding in a Figma frame.

plaintext

1. Open Figma and go to the <strong>Variables</strong> panel.
2. Click <em>Create Variable</em> and name it <code>spacing-small</code>.
3. Set the value to <code>8</code> (Figma uses unitless numbers for spacing).
4. Select a frame or component.
5. In the right panel, set padding or margin to <code>{spacing-small}</code> to apply the variable.

This keeps spacing consistent and easy to update.

Output

The selected frame's padding updates to 8px using the variable, ensuring consistent spacing.

Common Pitfalls

Common mistakes when using spacing variables in Figma include:

• Not naming variables clearly, causing confusion.
• Applying fixed pixel values instead of variables, losing consistency.
• Forgetting to update variables when spacing needs change.
• Using variables inconsistently across components.

Always use descriptive names and apply variables everywhere spacing is needed.

css

/* Wrong way: */
padding: 10px;

/* Right way: */
padding: {spacing-medium};

Quick Reference

Action	Description
Create Variable	Define a spacing value in the Variables panel
Name Variable	Use clear names like spacing-small, spacing-large
Apply Variable	Use variable in padding, margin, or grid settings
Update Variable	Change value once to update all uses
Maintain Consistency	Use variables everywhere for spacing

Key Takeaways

Use Figma's Variables panel to create reusable spacing values.

Name spacing variables clearly for easy identification.

Apply spacing variables consistently across your design.

Update variables to change spacing everywhere at once.

Avoid hardcoding pixel values to keep designs flexible.