SXL Studio
Tokens

Scopes & Code Syntax

Configure Figma variable scopes and Dev Mode code syntax through $extensions in SXL Studio tokens — valid scopes per type, defaults, templates, and examples.

Overview

Two $extensions settings control how a variable behaves after export:

ExtensionControls
figma.scopesWhere a variable can be used in Figma (its scope / visibility)
figma.codeSyntaxHow the variable appears in Dev Mode per platform (Web, Android, iOS)

Both are optional. Scopes only apply to types that export as variables (color and the FLOAT / STRING / BOOLEAN types); style and internal types ignore them.

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

Scopes

A scope limits which Figma fields a variable is offered in. Each token type resolves to one Figma variable kind (COLOR, FLOAT, STRING, BOOLEAN), and each kind allows a fixed set of scopes.

Figma variable kind by token type:

KindToken types
COLORcolor
FLOATopacity, dimension, number, spacing, sizing, borderWidth, borderRadius, fontSize, lineHeight, letterSpacing, paragraphSpacing, paragraphIndent
STRINGfontFamily, fontWeight, text
BOOLEANboolean

Valid scopes by kind

Only these scope values are accepted for each variable kind (others are dropped on export).

KindValid figma.scopes
COLORALL_SCOPES, ALL_FILLS, FRAME_FILL, SHAPE_FILL, TEXT_FILL, STROKE_COLOR, EFFECT_COLOR
FLOATALL_SCOPES, TEXT_CONTENT, CORNER_RADIUS, WIDTH_HEIGHT, GAP, STROKE_FLOAT, EFFECT_FLOAT, OPACITY, FONT_SIZE, LINE_HEIGHT, LETTER_SPACING, PARAGRAPH_SPACING, PARAGRAPH_INDENT, FONT_WEIGHT
STRINGALL_SCOPES, TEXT_CONTENT, FONT_FAMILY, FONT_STYLE, FONT_VARIATIONS
BOOLEANALL_SCOPES

Note An invalid scope for a type is silently filtered out on export. For example, CORNER_RADIUS on a color token is ignored.

Default scopes by type

If you do not set figma.scopes, SXL Studio applies a sensible default per type. Types not listed default to ALL_SCOPES.

$typeDefault scope
colorALL_FILLS, STROKE_COLOR, EFFECT_COLOR
sizingWIDTH_HEIGHT
spacingGAP
borderRadiusCORNER_RADIUS
borderWidthSTROKE_FLOAT
opacityOPACITY
fontFamilyFONT_FAMILY
fontWeightFONT_STYLE
fontSizeFONT_SIZE
lineHeightLINE_HEIGHT
letterSpacingLETTER_SPACING
paragraphSpacingPARAGRAPH_SPACING
paragraphIndentPARAGRAPH_INDENT
dimension, number, text, booleanALL_SCOPES
JSON
{
  "spacing": {
    "$type": "spacing",
    "md": { "$value": "16px", "$extensions": { "figma.scopes": ["GAP", "WIDTH_HEIGHT"] } }
  }
}

Code Syntax

figma.codeSyntax sets the string shown for a variable in Figma Dev Mode, per platform. All keys are optional.

KeyPlatformExample
WebCSS / SCSS / Lessvar(--color-brand), $color-brand
AndroidKotlin / XMLColorBrand, @color/brand
iOSSwift / SwiftUIColor.brand, UIColor.brand
JSON
{
  "$extensions": {
    "figma.codeSyntax": { "Web": "var(--color-brand)", "Android": "@color/brand", "iOS": "Color.brand" }
  }
}

Code Syntax templates

Instead of writing a name per token, use a template — SXL Studio generates the value from the token path.

TemplateResult for color.brand.primary
{var(--css-variable)}var(--color-brand-primary)
{$sass-variable}$color-brand-primary
{@less-variable}@color-brand-primary
{UpperCamelCase}ColorBrandPrimary
{lowerCamelCase}colorBrandPrimary
{UPPER_SNAKE_CASE}COLOR_BRAND_PRIMARY
{lower_snake_case}color_brand_primary
JSON
{
  "$extensions": {
    "figma.codeSyntax": { "Web": "{var(--css-variable)}", "Android": "{UpperCamelCase}", "iOS": "{lowerCamelCase}" }
  }
}

How the path converts Separators /, ., _ become -, the path is split into words, and each template formats those words in its style.

Inheritance

Set $extensions at the group level and every token inside inherits it. A child can override a single key; non-overlapping keys merge.

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

Full example

JSON
{
  "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"] } }
  }
}