Token types

#Overview

SXL Studio supports 35 token types compatible with the Design Tokens Community Group (DTCG) format. Each type is defined by the $type field in a JSON file and determines how the value is interpreted, applied to Figma layers, and exported to code.

Types are divided into simple (single scalar value) and composite (object with multiple properties).

#Type mapping

#Styles

#Dimension

#Borders

Note: border and strokeStyle are composite types that don't export as Figma variables. They apply directly to layers.

#Effects

#Typography

#Animation

Note: animation tokens have no visual representation in Figma. They are designed for code export to ensure consistent motion systems between design and development.

#Other

#Simple vs Composite types

#Simple types

A simple token has a single scalar value: color, number, string, boolean.

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

Simple types: color, opacity, dimension, number, spacing, sizing, borderWidth, borderRadius, fontFamily, fontWeight, fontStyle, fontSize, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textCase, textDecoration, duration, cubicBezier, text, boolean, strokeStyle.

#Composite types

A composite token is an object with multiple properties:

{
  "heading-lg": {
    "$value": {
      "fontFamily": "Inter",
      "fontSize": "32px",
      "fontWeight": 700,
      "lineHeight": "40px",
      "letterSpacing": "-0.02em"
    },
    "$type": "typography"
  }
}

Composite types: typography, shadow, blur, backdrop-blur, effects, glass, gradient, fill, img, grid, border, transition, template, composition.

#Type inheritance

A type can be set at the group level — all child tokens inherit it:

{
  "spacing": {
    "$type": "spacing",
    "xs": { "$value": "4px" },
    "sm": { "$value": "8px" },
    "md": { "$value": "16px" },
    "lg": { "$value": "24px" },
    "xl": { "$value": "32px" }
  }
}

Priority: token → nearest parent group → file root.

#Variable scopes (Figma Scopes)

When exporting to Figma Variables, each token gets scopes — constraints on where the variable can be used:

Override scopes via $extensions:

{
  "brand-color": {
    "$value": "#6366F1",
    "$type": "color",
    "$extensions": {
      "figma.scopes": ["ALL_FILLS", "STROKE_COLOR"]
    }
  }
}

#Code Syntax

Set custom code syntax visible to developers in Figma Dev Mode:

{
  "brand-primary": {
    "$value": "#6366F1",
    "$type": "color",
    "$extensions": {
      "figma.codeSyntax": {
        "Web": "var(--brand-primary)",
        "iOS": "Asset.Colors.brandPrimary",
        "Android": "@color/brand_primary"
      }
    }
  }
}

#Related pages

• Overview: Tokens overview
• JSON format: Token JSON format
• Styles: Color, Gradient, Image, Fill, Opacity
• Dimension: Dimension, Number, Sizing, Spacing
• Borders: Border, Border Width, Border Radius, Stroke Style
• Typography: Font Size, Line Height, Font Weight and more
• Effects: Shadow, Blur, Glass and Effects
• Animation: Duration, Cubic Bezier, Transition
• Other: String, Boolean, Grid, Template