Scopes and Code Syntax

Two variable settings are set in the token form and stored in $extensions:

Both are optional and affect only types that export as variables. Styles and internal types have no such sections. They are written to Figma when the Apply codeSyntax & scopes switch in the Export to Figma window is on, which it is by default.

{
  "color": {
    "brand": {
      "$type": "color",
      "$value": "#635BFF",
      "$extensions": {
        "figma.scopes": ["ALL_FILLS", "STROKE_COLOR"],
        "figma.codeSyntax": { "Web": "var(--color-brand)", "iOS": "Color.brand" }
      }
    }
  }
}

#Where to set them

• In the create or edit form of a token: the Scopes and Code Syntax sections.
• For many tokens at once: in the collection table select rows and choose Edit token fields… in the context menu, which has the same Scopes and the Code Syntax fields for Web, iOS and Android. Inherit from group… restores inheritance from the group. See Collections.
• In JSON: the $extensions field of a token or a group.

#Scopes

A scope limits the Figma fields in which a variable is offered. The set of allowed scopes depends on the variable kind the token type exports to.

#Allowed scopes per kind

Other values are treated as an error by the editor and are not written to Figma.

ALL_SCOPES means "everywhere" and cannot be combined with other values. For fontWeight only FONT_STYLE is allowed: Figma stores the face as a string, so the FONT_WEIGHT scope does not fit it and causes a file validation error.

#Default scopes

If figma.scopes is not set, the plugin picks a scope by type. Variable types not in the table get ALL_SCOPES.

{
  "spacing": {
    "$type": "spacing",
    "md": { "$value": "16px", "$extensions": { "figma.scopes": ["GAP", "WIDTH_HEIGHT"] } }
  }
}

#Code Syntax

figma.codeSyntax sets the string that Dev Mode shows next to the variable, separately per platform. All keys are optional.

{
  "$extensions": {
    "figma.codeSyntax": { "Web": "var(--color-brand)", "Android": "@color/brand", "iOS": "Color.brand" }
  }
}

#Templates

Instead of a name for every token, set a template: the plugin builds the name from the token path.

{
  "$extensions": {
    "figma.codeSyntax": { "Web": "{var(--css-variable)}", "Android": "{UpperCamelCase}", "iOS": "{lowerCamelCase}" }
  }
}

The path is split into words at the /, . and _ separators, and the template joins the words in its style.

#Inheritance

Set $extensions on a group, and every token inside inherits it. A token may override an individual key; the other keys are merged.

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

The token badge tooltip shows that settings are inherited from the group.

#Full example

{
  "color": {
    "$type": "color",
    "$extensions": { "figma.scopes": ["ALL_FILLS", "STROKE_COLOR"], "figma.codeSyntax": { "Web": "{var(--css-variable)}" } },
    "brand": {
      "primary": { "$value": "#635BFF" },
      "on-primary": { "$value": "#FFFFFF", "$extensions": { "figma.scopes": ["TEXT_FILL"] } }
    }
  },
  "radius": {
    "$type": "borderRadius",
    "md": { "$value": "8px", "$extensions": { "figma.scopes": ["CORNER_RADIUS"] } }
  }
}

#Related pages

• Token types
• Token JSON format
• Exporting variables and styles
• Tokens to code