SXL Studio
Tokens

Other

Other group token types: String, Boolean, Grid, Template — string values, flags, grids, and component templates.

The Other group brings together specialized token types: strings, boolean flags, grids, and templates.

String (Text)

A string token for arbitrary text: labels, placeholders, URLs, identifiers.

Figma: exports as a String Variable (STRING).

$type: text (alias string is also supported).

JSON
{
  "text": {
    "$type": "text",
    "app-name": { "$value": "SXL Studio" },
    "footer-copyright": { "$value": "© 2024 SXL Studio. All rights reserved." },
    "placeholder-email": { "$value": "name@example.com" },
    "api-base-url": { "$value": "https://api.example.com/v1" }
  }
}

Applies to layers: Text Content (characters). When applied to a text layer, the plugin replaces the text content.

Default Figma Scope: ALL_SCOPES.

Tip: use string tokens for fixed text values that should be consistent across the project — app names, legal text, placeholder templates.

Boolean

A token with a logical value: true or false.

Figma: exports as a Boolean Variable (BOOLEAN).

JSON
{
  "boolean": {
    "$type": "boolean",
    "feature-dark-mode": {
      "$value": true,
      "$description": "Enable dark theme"
    },
    "show-beta-badge": {
      "$value": false,
      "$description": "Show beta badge"
    }
  }
}

Accepted values:

ValueResult
truetrue
falsefalse
1, "on", "yes", "enable"true
0, "off", "no", "disable"false

Applies to layers: controls layer visibility (visible = true/false) or a component Boolean property.

Default Figma Scope: ALL_SCOPES.

Tip: Boolean tokens are ideal for feature flags in a design system: show/hide an element, enable/disable a theme, toggle a state.

Grid

A grid token. Describes a layout grid for frames.

Figma: exports as a Grid Style.

Simple grid:

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

Column grid:

JSON
{
  "grid": {
    "columns-12": {
      "$value": {
        "pattern": "COLUMNS",
        "count": 12,
        "gutterSize": 24,
        "alignment": "STRETCH",
        "offset": 0
      },
      "$type": "grid"
    }
  }
}

Row grid:

JSON
{
  "grid": {
    "rows": {
      "$value": {
        "pattern": "ROWS",
        "count": 6,
        "gutterSize": 16,
        "sectionSize": 48,
        "alignment": "MIN"
      },
      "$type": "grid"
    }
  }
}

Object properties:

PropertyTypeDescription
patternstringGRID, COLUMNS, or ROWS
sectionSizenumberCell size (for GRID) or row/column size
gutterSizenumberGutter size
countnumberNumber of columns/rows
alignmentstringMIN, CENTER, MAX, STRETCH
offsetnumberStarting offset

Grid array:

JSON
{
  "grid": {
    "design-grid": {
      "$value": [
        { "pattern": "COLUMNS", "count": 12, "gutterSize": 24, "alignment": "STRETCH" },
        { "pattern": "ROWS", "sectionSize": 8, "alignment": "MIN" }
      ],
      "$type": "grid"
    }
  }
}

Applies to layers: Frame Layout Grids.

Figma limitation: Grid Style can only be applied to frames (FRAME). Other node types don't support layout grids.

Grid token examples: base 8px grid, 12 columns, rows

Template

A style template for applying a set of properties to a node. Template defines a collection of style properties (fill, stroke, effects, typography, etc.) that can be bound to any layer.

Figma: does not export as a Variable or Style. Applied directly via layer binding.

JSON
{
  "card-style": {
    "$type": "template",
    "name": "Card Default",
    "styles": {
      "fill": "#FFFFFF",
      "stroke": "#E5E7EB",
      "strokeWidth": 1,
      "cornerRadius": 12,
      "shadow": {
        "color": "#0000001A",
        "offsetX": 0,
        "offsetY": 2,
        "blur": 8,
        "spread": 0
      }
    }
  }
}

styles properties:

Template supports an arbitrary set of style keys: fill, stroke, strokeWidth, cornerRadius, shadow, opacity, blur, and others. When applied, the plugin maps each key to the corresponding Figma node property.

Auto-layout and sizing:

  • direction: row | column | grid | none — toggles auto-layout direction.
  • widthType: fill | hug | fixed — horizontal sizing rule (layoutSizingHorizontal).
  • heightType: fill | hug | fixed — vertical sizing rule (layoutSizingVertical).
  • justifyContent, alignItems, flexWrap, gap, padding, borderRadius — CSS-like aliases.

If the template sets only height (no width) and the horizontal axis was initially HUG/FILL, the plugin preserves that behavior — width continues to hug content. To explicitly pin both axes, set widthType: "fixed" and/or heightType: "fixed".

JSON
{
  "card-row": {
    "$type": "template",
    "name": "Row",
    "styles": {
      "direction": "row",
      "widthType": "hug",
      "heightType": "fixed",
      "height": 48,
      "padding": "8 16",
      "gap": 8,
      "alignItems": "center"
    }
  }
}

Tip: Template is a powerful tool for creating appearance "recipes." Instead of binding 5 separate tokens to a layer, create one Template with the full set of styles.

Full example

JSON
{
  "text": {
    "$type": "text",
    "brand-name": { "$value": "Acme Corp" },
    "cta-label": { "$value": "Get Started" },
    "empty-state": { "$value": "No items found" }
  },
  "boolean": {
    "$type": "boolean",
    "dark-mode": { "$value": false },
    "show-avatar": { "$value": true },
    "enable-animations": { "$value": true }
  },
  "grid": {
    "$type": "grid",
    "base-8": {
      "$value": { "pattern": "GRID", "sectionSize": 8 }
    },
    "12-col": {
      "$value": {
        "pattern": "COLUMNS",
        "count": 12,
        "gutterSize": 24,
        "alignment": "STRETCH"
      }
    },
    "baseline-4": {
      "$value": {
        "pattern": "ROWS",
        "sectionSize": 4,
        "alignment": "MIN"
      }
    }
  }
}