SXL Studio
Tokens

Dimension

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

Overview

The Dimension group holds the numeric scales used by layout and sizing. Every type here exports as a FLOAT variable; they differ only by their default Figma scope.

$typeExports asDefault scopeTypical use
dimensionVariable (FLOAT)ALL_SCOPESGeneric dimensions
numberVariable (FLOAT)ALL_SCOPESUnitless numbers
spacingVariable (FLOAT)GAPGap / padding
sizingVariable (FLOAT)WIDTH_HEIGHTWidth / height

Shared numeric syntax

All four types accept the same value forms:

FormExample
Number16, 1.5, -2
Unit string"16px", "1.5rem", "2em", "50%"
Alias"{spacing.md}"
Math (with alias)"{spacing.sm} * 2", "round({size.base} / 3, 2)"

Note For FLOAT tokens (except opacity and duration), a % value is converted using remBase during variable export. Prefer explicit px where you need an exact number.

Dimension

The generic numeric type — use it when a value is a length but does not map to spacing or sizing specifically.

JSON
{ "$type": "dimension", "$value": "16px" }

Number

Unitless numeric values (multipliers, counts, ratios, line-height factors).

JSON
{ "$type": "number", "$value": 8 }
JSON
{ "spacing": { "$type": "number", "base": { "$value": 4 }, "scale": { "$value": "{spacing.base} * 1.5" } } }

Spacing

Gaps, paddings, and margins. Default scope GAP keeps these out of width/height fields in Figma.

JSON
{
  "spacing": {
    "$type": "spacing",
    "xs": { "$value": "4px" },
    "sm": { "$value": "8px" },
    "md": { "$value": "{spacing.sm} * 2" }
  }
}

Sizing

Component and element dimensions. Default scope WIDTH_HEIGHT.

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

Full example

JSON
{
  "spacing": {
    "$type": "spacing",
    "base": { "$value": "4px" },
    "sm": { "$value": "{spacing.base} * 2" },
    "md": { "$value": "{spacing.base} * 4" }
  },
  "sizing": {
    "$type": "sizing",
    "icon": { "$value": "20px" },
    "control": { "$value": "40px" }
  },
  "ratio": {
    "$type": "number",
    "golden": { "$value": 1.618 }
  }
}