SXL Studio
Tokens

Other

Other group token types: String (text), Boolean, Grid, Template — valid formats, keys, and usage patterns.

The Other group includes utility token types that do not belong to visual style families.

String (text)

text stores string content.

  • canonical $type: text
  • alias $type: string
  • export: Variable (STRING)
  • default scope: ALL_SCOPES
JSON
{
  "text": {
    "$type": "text",
    "app-name": { "$value": "SXL Studio" },
    "empty-state": { "$value": "No items found" },
    "api-base-url": { "$value": "https://api.example.com/v1" }
  }
}

When applied to a Text node, text updates characters.

Boolean

boolean stores logical flags.

  • export: Variable (BOOLEAN)
  • default scope: ALL_SCOPES

Accepted literals

InputParsed value
true, 1, on, yes, enabletrue
false, 0, off, no, disablefalse
JSON
{
  "boolean": {
    "$type": "boolean",
    "show-beta-badge": { "$value": false },
    "feature-dark-mode": { "$value": "on" }
  }
}

When applied to nodes, boolean tokens control layer visibility.

Grid

grid defines frame layout grids.

  • export: Grid Style

Accepted $value shapes

  • alias: "{grid.desktop}"
  • object: one grid definition
  • array: multiple grid definitions

Grid object keys

KeyTypeNotes
patternstringcolumns, rows, grid
countnumber/string/aliasfor rows/columns
sectionSizenumber/string/aliascell/track size
gutterSizenumber/string/aliasgutter value
alignmentstringMIN, MAX, CENTER, STRETCH
offsetnumber/string/aliasoffset value
JSON
{
  "grid": {
    "$type": "grid",
    "desktop": {
      "$value": {
        "pattern": "columns",
        "count": 12,
        "gutterSize": 24,
        "alignment": "STRETCH",
        "offset": 0
      }
    },
    "editor": {
      "$value": [
        {
          "pattern": "columns",
          "count": 12,
          "gutterSize": 24,
          "alignment": "STRETCH"
        },
        {
          "pattern": "rows",
          "sectionSize": 8,
          "gutterSize": 8,
          "alignment": "MIN"
        }
      ]
    }
  }
}

Figma limitation: layout grids apply to frame-like nodes only.

Template

template is a style preset type for template workflows.

  • export: apply-only
  • used by Apply Template / Re-apply Template workflows

SXL Studio supports two practical shapes.

1) DTCG-style template token ($value is style object)

JSON
{
  "template": {
    "$type": "template",
    "card-default": {
      "$value": {
        "direction": "column",
        "widthType": "fill",
        "padding": "16 16",
        "gap": 8,
        "borderRadius": 12,
        "background": "{color.surface.base}",
        "boxShadow": "{shadow.card}"
      }
    }
  }
}

2) Template file format (name + styles variants)

JSON
{
  "$type": "template",
  "name": "Card",
  "styles": {
    "default": {
      "direction": "column",
      "padding": "16 16",
      "borderRadius": 12,
      "background": "{color.surface.base}"
    },
    "compact": {
      "direction": "column",
      "padding": "12 12",
      "borderRadius": 10,
      "background": "{color.surface.base}"
    }
  }
}

Common template style keys

background, color, fill, opacity, width, height, minWidth, maxWidth, minHeight, maxHeight, widthType, heightType, padding*, gap, wrapGap, border*, boxShadow, effects, layerBlur, backgroundBlur, glass, typography, font*, lineHeight, letterSpacing, paragraph*, textCase, textDecoration, direction, position, justifyContent, alignItems, alignContent, flexWrap, x, y, rotation.

Composition note

composition has its own dedicated documentation and contract. Use Composition for structure, props, selectors, and transitions.

Full example

JSON
{
  "text": {
    "$type": "text",
    "brand-name": { "$value": "Acme Corp" },
    "cta-label": { "$value": "Get Started" }
  },
  "boolean": {
    "$type": "boolean",
    "show-avatar": { "$value": true },
    "dark-mode": { "$value": false }
  },
  "grid": {
    "$type": "grid",
    "base": {
      "$value": { "pattern": "grid", "sectionSize": 8 }
    },
    "layout-12": {
      "$value": {
        "pattern": "columns",
        "count": 12,
        "gutterSize": 24,
        "alignment": "STRETCH"
      }
    }
  }
}