SXL Studio
Tokens

Dimension

Dimension group token types: Dimension, Number, Sizing, Spacing — numeric formats, scopes, and examples.

The Dimension group defines numeric scales used by layout and sizing.

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

Shared numeric syntax

Supported literals across this group:

  • numbers: 16, 1.5, -2;
  • unit strings: px, rem, em, %;
  • aliases: {spacing.md};
  • math expressions with aliases (for export/apply): {spacing.sm} * 2, round({size.base} / 3, 2).

Note: for FLOAT tokens except opacity and duration, % is converted using remBase during variable export.

Dimension

Universal numeric dimension token.

Default scope: ALL_SCOPES.

JSON
{
  "dimension": {
    "$type": "dimension",
    "icon-sm": { "$value": "16px" },
    "icon-md": { "$value": "24px" },
    "avatar": { "$value": "2.5rem" },
    "panel-width": { "$value": "320px" }
  }
}

Typical usage: width, height, padding, radius, stroke, and generic size-like fields.

Number

Unitless numeric token.

Default scope: ALL_SCOPES.

JSON
{
  "number": {
    "$type": "number",
    "grid-columns": { "$value": 12 },
    "z-overlay": { "$value": 100 },
    "ratio-video": { "$value": 1.7778 }
  }
}

Use number for abstract math values and non-length semantics.

Spacing

Semantic spacing token for gaps and paddings.

Default scope: GAP.

JSON
{
  "spacing": {
    "$type": "spacing",
    "0": { "$value": "0px" },
    "1": { "$value": "4px" },
    "2": { "$value": "8px" },
    "3": { "$value": "12px" },
    "4": { "$value": "16px" },
    "6": { "$value": "24px" },
    "8": { "$value": "32px" }
  }
}

Use spacing instead of generic dimension for gaps so variable suggestions in Figma are scoped correctly.

Sizing

Semantic width/height token.

Default scope: WIDTH_HEIGHT.

JSON
{
  "sizing": {
    "$type": "sizing",
    "control-sm": { "$value": "32px" },
    "control-md": { "$value": "40px" },
    "control-lg": { "$value": "48px" },
    "sidebar": { "$value": "280px" }
  }
}

Use sizing when the token meaning is explicitly element width/height.

Full example

JSON
{
  "spacing": {
    "$type": "spacing",
    "xs": { "$value": "4px" },
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" },
    "lg": { "$value": "24px" }
  },
  "sizing": {
    "$type": "sizing",
    "button-sm": { "$value": "32px" },
    "button-md": { "$value": "40px" },
    "button-lg": { "$value": "48px" }
  },
  "dimension": {
    "$type": "dimension",
    "header-height": { "$value": "64px" },
    "content-max-width": { "$value": "1200px" }
  },
  "number": {
    "$type": "number",
    "grid-columns": { "$value": 12 },
    "radius-factor": { "$value": 0.5 }
  }
}