Other

#Grid

Layout grids for frames. They export to a Grid style through the Styles → Grid switch. The value is one object or an array of grids.

Numeric fields may be references to numeric tokens; the style then binds them to variables. With STRETCH alignment the track size is not used, with CENTER the offset is not used. The grid editing form shows the same fields together with the colour and visibility.

{
  "grid": {
    "$type": "grid",
    "desktop": {
      "$value": { "pattern": "columns", "count": 12, "gutterSize": "{spacing.lg}", "alignment": "STRETCH", "offset": 0 }
    },
    "editor": {
      "$value": [
        { "pattern": "columns", "count": 12, "gutterSize": 24, "alignment": "STRETCH" },
        { "pattern": "rows", "sectionSize": 8, "gutterSize": 8, "alignment": "MIN" }
      ]
    }
  }
}

The Create Grid form has the Pattern, Count, Section Size, Gutter, Offset and Alignment fields. On Apply to a frame the plugin applies the exported grid style if it exists, otherwise it sets the grid directly. Grids apply to frames only.

#Boolean

A Boolean variable. Such variables have no scopes in Figma, so the token form has no Scopes section.

On Apply a boolean token toggles layer visibility.

{ "flags": { "$type": "boolean", "compact": { "$value": false }, "beta": { "$value": true } } }

#String

String constants: labels, currency codes, names. A String variable with all scopes. The Create String form accepts multi-line text. On Apply the string is written into a text layer.

{ "label": { "$type": "text", "cta": { "$value": "Get started" }, "currency": { "$value": "USD" } } }

#Template

A set of styles for the Apply Template command: not exported to Figma, applied to layers directly. Two forms.

A token with styles in $value:

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

A template file with a name and 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}" }
  }
}

The style keys are the same as in composition styles. Frequently used ones:

The Create Template form offers a property list and the Add property button; templates have no scopes and no references to other templates. The full value reference is on the Composition page.

#Composition

composition describes a Figma component in JSON: structure, properties, styles and variants. It has its own reference: Composition.

{ "$type": "composition", "name": "WButton", "structure": { "tag": "FRAME", "class": "root" }, "styles": { ".root": {} } }

#Custom

custom, like any unknown $type such as "baseUnit", stores any JSON and stays editable. The Create custom form has a Type field for the declared type and a Value field with JSON.

{ "meta": { "$type": "custom", "gridUnit": { "$value": 4 }, "config": { "$value": { "spacingScale": 1.5 } } } }

On export the plugin looks at the value shape: a string becomes a String variable, a number or math a Number variable, true/false a Boolean variable, a colour a Color variable, four numbers an Easing curve, and an object that looks like typography, a gradient, a shadow, a grid, a blur or a fill the matching style. A value that resembles no type stays in JSON, and the export result reports that the token was kept as custom and not exported.

#Related pages

• Token types
• Token JSON format
• Composition
• Scopes and Code Syntax