Other
Other group token types: Grid, Boolean, String (text), Template, Composition, Custom — verified value shapes, keys, and usage patterns.
Overview
$type | Exports as | Value in one line |
|---|---|---|
grid | Grid style | One grid object or an array of grids |
boolean | Variable (BOOLEAN) | true / false (string literals accepted) |
text | Variable (STRING) | Any string |
template | Internal (applied) | A style preset (object) or a template file |
composition | Internal (applied) | A component definition (see Composition) |
custom | Internal (or inferred) | Any JSON value |
Grid
Frame layout grids. Exported as a grid style. One object or an array of grid definitions.
| Key | Values |
|---|---|
pattern | columns, rows, grid |
count | Number (for columns / rows) |
sectionSize | Cell / track size (number / string) |
gutterSize | Gutter (number / string) |
alignment | MIN, MAX, CENTER, STRETCH |
offset | Offset (number / string) |
{
"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" }
]
}
}
}
Note Layout grids apply to frame-like nodes only.
Boolean
Exported as a BOOLEAN variable. Default scope ALL_SCOPES.
Accepted $value | Resolves to |
|---|---|
true / false | as-is |
"on" / "off" | true / false |
"yes" / "no" | true / false |
"1" / "0" | true / false |
| Alias | target |
{ "flags": { "$type": "boolean", "compact": { "$value": false }, "beta": { "$value": true } } }
String (text)
Plain string constants. Exported as a STRING variable. Default scope ALL_SCOPES.
{ "label": { "$type": "text", "cta": { "$value": "Get started" }, "currency": { "$value": "USD" } } }
Template
A style preset used by Apply Template workflows (applied directly, not exported). Two shapes are supported.
1) DTCG-style token — $value is a style object:
{
"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 — a root object with name + styles variants:
{
"$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}" }
}
}
Template style keys are the same as composition styles. The common ones by group:
| Group | Keys |
|---|---|
| Layout | direction, justifyContent, alignItems, gap, padding, overflow |
| Size | widthType, heightType, width, height, minWidth, maxWidth, minHeight, maxHeight |
| Position | position, top, right, bottom, left, x, y, alignSelf, rotate |
| Background & color | background, fill, color |
| Borders | border, borderColor, borderWidth, borderRadius, strokeAlign |
| Effects | boxShadow, effects, backgroundBlur, layerBlur, glass, opacity |
| Typography | fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, textCase, textDecoration |
Each key's exact values are documented on Composition · Styles, where the same style contract is described in full.
Composition
composition describes a Figma component as JSON (structure, props, styles, and more). It has its own full contract — see Composition.
{ "$type": "composition", "name": "WButton", "structure": { "tag": "FRAME", "class": "root" }, "styles": { ".root": {} } }
Custom
custom (or a clean project-specific $type such as "baseUnit") holds any JSON value and stays editable in SXL Studio.
{ "meta": { "$type": "custom", "gridUnit": { "$value": 4 }, "config": { "$value": { "spacingScale": 1.5 } } } }
On Export Variables & Styles, 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/internal.