Token types

SXL Studio supports 39 token types. The type is set by the $type field; on export a token becomes a Figma variable, a Figma style, or stays internal: such tokens take part in Apply, composition generation and code, but are not exported to Figma themselves.

Pick the type by what you want in Figma: a reusable variable for colours, sizes, strings and flags, a shared style for gradients, shadows, typography and grids, or an internal contract for borders, transitions, compositions and arbitrary data.

#How to create a token

In the visual editor of a file, above the token list, there is a type bar: Color, Gradient, Images, Fill, Opacity, Dimension and a + button with all other types. The + menu is grouped into seven sections and has a type search.

The Add token menu: the Styles, Dimension, Borders groups and the start of Effects.

The Effects and Typography groups.

The Animation and Other groups.

Every type opens its own form: name, value with a format hint, description, and for variables also scopes, code syntax and the Hide from publishing flag. Details for every group are on its page.

#Export targets

#Which export switch owns a type

In the Export to Figma window types are enabled in groups. If a type does not export, check the matching switch.

#Types by group

The seven groups of the Add token menu. Every row shows a minimal $value example.

Styles

Dimension

Borders

Effects

Typography

Animation

Other

A custom token, like any unknown $type, stays editable. On export the plugin looks at the value shape: a HEX colour becomes a Color variable, a number or math a Number variable, true/false a Boolean variable, a string a String variable, and an object that looks like typography, a shadow, a gradient or a grid becomes the matching style. A value that resembles nothing stays in JSON and is not exported to Figma; the plugin reports it in the export result.

#Composite value examples

Typography:

{
  "$type": "typography",
  "$value": { "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 500, "lineHeight": 1.5, "letterSpacing": "0px" }
}

Shadow with several layers:

{
  "$type": "shadow",
  "$value": [
    { "offsetX": 0, "offsetY": 1, "blur": 2, "spread": 0, "color": "#0000001F" },
    { "offsetX": 0, "offsetY": 8, "blur": 24, "spread": 0, "color": "#00000029" }
  ]
}

Gradient:

{ "$type": "gradient", "$value": "linear-gradient(135deg, #635BFF 0%, #A78BFA 100%)" }

Grid:

{ "$type": "grid", "$value": { "pattern": "grid", "sectionSize": 8 } }

Fill with several layers:

{
  "$type": "fill",
  "$value": [
    { "type": "image", "url": "https://…/photo.jpg", "scaleMode": "FILL", "opacity": 0.7 },
    { "type": "solid", "color": "#00000029" }
  ]
}

#Default scopes

Variables get a default Figma scope; you can change it in the token form or through figma.scopes. Variable types not listed in the table get all scopes. boolean, duration, cubicBezier and easing have no scopes at all.

More: Scopes and Code Syntax.

#Inheritance and type aliases

A group can declare $type once; every token inside inherits it:

{
  "spacing": {
    "$type": "spacing",
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" }
  }
}

Legacy and alternative type names are mapped to the canonical ones:

Use the canonical names in production files. The full table is on the Token JSON format page.

#Group pages

• Color, Gradient, Image, Fill, Opacity
• Dimension, Number, Sizing, Spacing
• Border, Border Width, Border Radius, Stroke Style
• Typography and text tokens
• Shadow, Blur, Glass, Effects
• Duration, Cubic Bezier, Easing, Transition
• String, Boolean, Grid, Template, Custom
• Composition
• Scopes and Code Syntax