SXL Studio
Tokens

Dimension

Dimension group token types: Dimension, Number, Sizing, Spacing — sizes, padding, numeric values with examples.

The Dimension group unites numeric tokens responsible for sizes, spacing, and arbitrary numeric values in a design system.

All types in this group export as Number Variable (FLOAT) in Figma.

Dimension

A universal size token. Suitable for any linear measurement: width, height, padding, radius.

CSS: length (px, rem, em).

JSON
{
  "size": {
    "$type": "dimension",
    "icon-sm": { "$value": "16px" },
    "icon-md": { "$value": "24px" },
    "icon-lg": { "$value": "32px" },
    "avatar": { "$value": "40px" },
    "header-height": { "$value": "64px" }
  }
}

Accepted formats:

FormatExampleDescription
Pixels"16px"Absolute value
Rem"1rem"Relative to root font size
Em"1.5em"Relative to current font size
Number16Interpreted as px
Percentage"50%"Percentage value

Default Figma Scope: ALL_SCOPES — variable available for any numeric property.

Applies to layers: Width, Height, Gap, Padding, Corner Radius, Stroke Weight.

Applying a dimension token to frame width

Number

An abstract numeric token without units. Used for unitless values: column counts, ratios, z-index, flex-grow.

CSS: number.

JSON
{
  "number": {
    "$type": "number",
    "grid-columns": { "$value": 12 },
    "aspect-ratio": { "$value": 1.778 },
    "z-overlay": { "$value": 100 },
    "z-modal": { "$value": 200 }
  }
}

Difference from Dimension: number carries no "size" semantics. It's a pure number. Figma scope — ALL_SCOPES.

Spacing

A spacing token. Semantically represents distances between elements: gap, padding, margin.

CSS: gap, padding, margin.

JSON
{
  "spacing": {
    "$type": "spacing",
    "none": { "$value": "0px" },
    "2xs": { "$value": "2px" },
    "xs": { "$value": "4px" },
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" },
    "lg": { "$value": "24px" },
    "xl": { "$value": "32px" },
    "2xl": { "$value": "48px" },
    "3xl": { "$value": "64px" }
  }
}

Default Figma Scope: GAP — variable will be suggested in Auto Layout Gap property.

Applies to layers: Gap (Auto Layout), Padding (top/right/bottom/left).

Tip: use spacing instead of dimension for gaps — it gives the correct Figma scope and makes the system more readable.

Sizing

A sizing token: element width and height.

CSS: width, height.

JSON
{
  "sizing": {
    "$type": "sizing",
    "button-sm": { "$value": "32px" },
    "button-md": { "$value": "40px" },
    "button-lg": { "$value": "48px" },
    "input-height": { "$value": "44px" },
    "sidebar-width": { "$value": "280px" }
  }
}

Default Figma Scope: WIDTH_HEIGHT — variable will be suggested for Width and Height properties.

Difference from Dimension: semantics. sizing specifically refers to element width and height. dimension is a universal size (can be padding, radius, anything).

Full example: spacing and sizing system

JSON
{
  "spacing": {
    "$type": "spacing",
    "$description": "Design system spacing scale",
    "0": { "$value": "0px" },
    "1": { "$value": "4px" },
    "2": { "$value": "8px" },
    "3": { "$value": "12px" },
    "4": { "$value": "16px" },
    "5": { "$value": "20px" },
    "6": { "$value": "24px" },
    "8": { "$value": "32px" },
    "10": { "$value": "40px" },
    "12": { "$value": "48px" },
    "16": { "$value": "64px" }
  },
  "sizing": {
    "$type": "sizing",
    "icon": {
      "xs": { "$value": "12px" },
      "sm": { "$value": "16px" },
      "md": { "$value": "20px" },
      "lg": { "$value": "24px" },
      "xl": { "$value": "32px" }
    },
    "button": {
      "sm": { "$value": "32px" },
      "md": { "$value": "40px" },
      "lg": { "$value": "48px" }
    }
  },
  "dimension": {
    "$type": "dimension",
    "header-height": { "$value": "64px" },
    "sidebar-width": { "$value": "280px" },
    "max-content-width": { "$value": "1200px" }
  }
}

Copy this, load into SXL Studio, and export — you'll get a complete spacing system in Figma Variables.