Dimension

The Dimension group holds numeric scales for spacing and sizes. All four types export as Figma Number variables and differ only in their default scope.

In the Export to Figma window they are owned by the Variables → Number switch.

The Create Dimension form: the value with a unit hint, description, Scopes and Code Syntax.

#Value forms

The rem and em units are converted to pixels through the remBase base size from config.json, 16 by default. It is set in the export window, field rem base: a number or a reference to a numeric token ({core.font.base}); the resolved value is shown next to a reference. That token cannot itself depend on rem, em or percentages, and when the reference cannot be resolved the export stops before any change and names the token. Percentages for these types are also taken from remBase: "50%" with a base of 16 gives 8. When you need an exact number, use px.

Math supports +, -, *, /, parentheses and the functions round, floor, ceil, trunc, min, max, clamp. In the editor a comma in a number is automatically replaced by a dot.

#Units and number notation

Units are case-insensitive: 10PT and 10pt are the same. The same rules work inside formulas: 10pt + 2px, {a} * 1,5. Inside the parentheses of a function a comma separates arguments, so min(1,5) is two arguments, 1 and 5; write decimals in functions with a point.

Units that cannot become pixels — vw, vh, vmin, vmax, ch, ex, fr, and deg where a length is expected — and malformed numbers such as 12abc or 1,234,567 are not exported: the token is skipped with the reason in the report, neighbouring tokens are exported.

#Dimension

A general length when the value is not specifically spacing or sizing.

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

#Number

Unitless numbers: multipliers, counters, ratios, line-height factors.

{ "$type": "number", "$value": 8 }

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

#Spacing

Spacing, padding and gaps. The Gap scope hides such variables from the width and height fields in Figma.

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

#Sizing

Sizes of components and elements. The Width and height scope.

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

#References between types

References are not limited to the same type: dimension accepts references to dimension and number, spacing to spacing, number and dimension, sizing to sizing, number and dimension. A reference to a token of a different nature, for example a colour, gives a validation error in the editor.

#How they apply to layers

The Apply Tokens button binds variables to layer properties by token name: width and height, gap, padding, corner radius, stroke width. Which property a token goes to is decided by its name and type: sizing goes to sizes, spacing to spacing and gaps, borderRadius to corner radii. More about bindings: Apply Tokens.

#Full example

{
  "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 }
  }
}

#Related pages

• Token types
• Token JSON format
• Scopes and Code Syntax
• Border, Border Width, Border Radius, Stroke Style