Spacing system

Spacing and dimensions are key elements in a design system, helping us create consistent visual hierarchy and layout rhythm. Let’s take a look at how to organize these important design variables.

Top-level directory

Please use spacing as the top-level directory for all spacing and dimension variables. Here are some common naming examples:

Semantic naming:

• spacing/sm - small spacing, suitable for compact element layouts
• spacing/md - medium spacing, suitable for regular element spacing
• spacing/lg - large spacing, suitable for block separation
• spacing/xl - extra large spacing, suitable for main area separation

Numeric naming (atomic variables):

• spacing/0 - no spacing (0px)
• spacing/1 - minimum spacing (usually 4px)
• spacing/2 - double minimum spacing (usually 8px)
• spacing/4 - quadruple minimum spacing (usually 16px)

Unit conversion

Variables Xporter provides intelligent unit conversion functionality. You can use the more intuitive px units for design in Figma, and then choose the “Use Rem Units” option when exporting. The tool will automatically convert them to accessibility-friendly rem units.

Learn more about unit conversion: