SXL Studio
Tokens

Token types

Complete map of all 38 SXL Studio token types: what each exports to in Figma, value shape, JSON examples, default scopes, and aliases.

Overview

SXL Studio supports 38 canonical token types. Each type is declared with $type (DTCG and legacy aliases are normalized automatically) and, on export, becomes a Figma variable, a Figma style, or stays internal (used by Apply / Generate / Code, not exported on its own).

Export targetCountWhat it becomes
Figma variable17A variable in a collection (COLOR / FLOAT / STRING / BOOLEAN)
Figma style10A local style (Paint / Effect / Text / Grid)
Internal / editable11Plugin-only logic or render; not exported directly

Key idea Pick the type by what you want in Figma: a reusable variable (colors, sizes, flags), a shared style (gradients, shadows, typography, grids), or an internal contract (border, animation, composition, custom).

Export targets

TargetTypes
Variable — COLORcolor
Variable — FLOATopacity, dimension, number, spacing, sizing, borderWidth, borderRadius, fontSize, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing
Variable — STRINGfontFamily, fontWeight, text
Variable — BOOLEANboolean
Style — Paintgradient, img, fill
Style — Effectshadow, backdrop-blur, blur, glass, effects
Style — Texttypography
Style — Gridgrid
Internal / editableborder, strokeStyle, fontStyle, textCase, textDecoration, transition, duration, cubicBezier, template, composition, custom

Token types by group

These are the seven groups in the Create token menu. Each row shows what the type exports to and a minimal $value example.

Styles

$typeExports asExample $value
colorVariable (COLOR)"#635BFF" or { "r": 0.4, "g": 0.36, "b": 1 }
gradientPaint style"linear-gradient(90deg, #635BFF, #A78BFA)"
imgPaint style"url(https://…/cover.png)"
fillPaint style[{ "type": "solid", "color": "#635BFF" }]
opacityVariable (FLOAT)0.6

Dimension

$typeExports asExample $value
dimensionVariable (FLOAT)"16px"
numberVariable (FLOAT)8
spacingVariable (FLOAT)"16px"
sizingVariable (FLOAT)"240px"

Borders

$typeExports asExample $value
borderInternal{ "color": "#E7EAF1", "width": "1px", "style": "solid" }
borderWidthVariable (FLOAT)"1px"
borderRadiusVariable (FLOAT)"8px"
strokeStyleInternal{ "dashPattern": [4, 4] }

Effects

$typeExports asExample $value
shadowEffect style[{ "offsetX": 0, "offsetY": 2, "blur": 8, "color": "#00000033" }]
backdrop-blurEffect style"8px"
blurEffect style"4px"
glassEffect style{ "blur": 12, "opacity": 0.6 }
effectsEffect style[{ "type": "DROP_SHADOW", "x": 0, "y": 2, "blur": 8, "color": "#00000033" }]

Typography

$typeExports asExample $value
typographyText style{ "fontFamily": "Inter", "fontSize": "16px", "fontWeight": 500, "lineHeight": "24px" }
fontFamilyVariable (STRING)"Inter"
fontWeightVariable (STRING)500
fontStyleInternal"italic"
fontSizeVariable (FLOAT)"16px"
lineHeightVariable (FLOAT)"24px"
letterSpacingVariable (FLOAT)"0.5px"
paragraphIndentVariable (FLOAT)"8px"
paragraphSpacingVariable (FLOAT)"12px"
textCaseInternal"uppercase"
textDecorationInternal"underline"

Animation

$typeExports asExample $value
transitionInternal"on-hover smart-animate 200ms ease-out"
durationInternal"200ms"
cubicBezierInternal"[0.4, 0, 0.2, 1]"

Other

$typeExports asExample $value
gridGrid style{ "pattern": "grid", "sectionSize": 8 }
booleanVariable (BOOLEAN)true
textVariable (STRING)"Checkout"
templateInternaltemplate definition object
compositionInternalcomposition definition object
customInternal (or inferred)any JSON value

Note custom (or a clean project-specific $type such as "baseUnit") stays editable. On export, SXL infers a safe target from the $value shape (#112233 → color, numbers → number, booleans → boolean, CSS gradients → paint); values it cannot infer safely stay opaque.

Composite value examples

Object and array types are the ones worth seeing in full.

Typography:

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

Shadow (array of layers):

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

Gradient:

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

Grid:

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

Fill (multi-layer):

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

Default scopes

Simple variable types get a sensible Figma scope by default (you can override it with figma.scopes). Types not listed default to ALL_SCOPES.

$typeDefault scope
colorALL_FILLS, STROKE_COLOR, EFFECT_COLOR
sizingWIDTH_HEIGHT
spacingGAP
borderRadiusCORNER_RADIUS
borderWidthSTROKE_FLOAT
opacityOPACITY
fontFamilyFONT_FAMILY
fontWeightFONT_STYLE
fontSizeFONT_SIZE
lineHeightLINE_HEIGHT
letterSpacingLETTER_SPACING
paragraphSpacingPARAGRAPH_SPACING
paragraphIndentPARAGRAPH_INDENT
dimension, number, text, booleanALL_SCOPES

Full scope behavior and filtering: Scopes & Code Syntax.

Inheritance and aliases

A group can declare $type once; every child token inherits it.

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

Legacy and plural $type values are normalized to the canonical key:

Raw $typeCanonical
stringtext
sizesizing
spacespacing
fontSizes / fontWeights / fontStyles …fontSize / fontWeight / fontStyle
borderRadiiborderRadius
boxShadowshadow
backgroundBlur / backdropBlur / background-blurbackdrop-blur
layerBlurblur

Prefer canonical names in production files. The full table lives on Token JSON format.