Figma Sizing & Spacing

Figma Variables: Size & Spacing

Frames X features a universal Sizing and Spacing system that enhances your design with consistency. It uses spacing tokens (or Spacing Figma Variables) to control the distances between design elements in your interface.

The system improves upon the traditional 8px base unit approach by using a 1px base unit (spacing-1) within a 0-384px scale. This method allows for direct multiplication of the base token to generate the full range of space values, eliminating the need for any calculations.

Sizing & Spacing Variables Features

• Support for multiple spacing modes: Compact and Spacious.

• Tokens/Variables: spacing-1 to spacing-48.

• Scale range: 0px to 384px.

• Base unit: 1px.

Unlike most frameworks, Frames X UI Kit offers multiple sizing modes (Compact and Spacious). These modes allow your interface to expand and shrink depending on the level of accessibility you want to achieve.

Note: use sizing variables to enhance readability and avoid mixing Compact and Spacious modes within the same interface. To learn more about how to use Figma variables effectively, be sure to visit our Intro to Figma Variables Guide.