Scopes & Code Syntax

#Why Scopes and Code Syntax matter

When tokens are exported to Figma as Variables, they are available for binding to any property by default — fill color, stroke, dimension, gap, font. In practice this is inconvenient: a designer looking for a color also sees spacing tokens and font sizes in the picker. Search becomes chaotic.

Scopes solve this by limiting where a variable appears in the Figma UI:

• Variable color/primary → visible only when picking fills, strokes, and effect colors
• Variable spacing/md → visible only when adjusting gap
• Variable borderRadius/lg → visible only in the corner radius field

Code Syntax solves a different problem — binding to code. When a developer opens a design in Dev Mode, they see ready-to-use syntax for their platform instead of an abstract variable name:

• Web: var(--color-primary) or $color-primary
• iOS: Color.primary
• Android: @color/primary

Both mechanisms are configured through the $extensions field in a token's JSON file.

#How it works in JSON

Both settings live inside the token's $extensions block:

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#0066FF",
      "$extensions": {
        "figma.scopes": ["ALL_FILLS", "STROKE_COLOR"],
        "figma.codeSyntax": {
          "Web": "var(--color-primary)",
          "Android": "ColorPrimary",
          "iOS": "Color.primary"
        }
      }
    }
  }
}

Important: keys in $extensions are flat strings: "figma.scopes", "figma.codeSyntax", "figma.hide", "figma.modify". This is not a nested figma: { scopes: ... } object.

#Scopes — variable visibility

#Figma variable types

Figma supports 4 variable types. The table below lists SXL Studio token types that create Variables during Export Variables:

fontStyle, strokeStyle, textCase, textDecoration, duration, cubicBezier, transition, template, and composition may carry reference settings in JSON/UI, but they do not create standalone Figma Variables through Export Variables.

#Valid Scopes by type

COLOR

FLOAT

STRING

BOOLEAN

#Default Scopes per token type

When you do not specify figma.scopes explicitly, SXL Studio uses recommended values as a reference in the editor UI. Here is the full mapping:

Note: this table is a reference for the plugin's editor UI. During export, if figma.scopes is not specified in JSON, the plugin does not write scopes to the variable — Figma's default behavior is used.

#Invalid scope filtering

If you specify a scope that doesn't match the variable type (e.g., CORNER_RADIUS for a color), the plugin silently discards it. Only valid scopes from your list are applied.

{
  "brand-color": {
    "$type": "color",
    "$value": "#FF5500",
    "$extensions": {
      "figma.scopes": ["ALL_FILLS", "CORNER_RADIUS", "OPACITY"]
    }
  }
}

Result: only ALL_FILLS is applied (the others are invalid for COLOR).

#Code Syntax — code bindings

Code Syntax defines how a variable appears in Figma's Dev Mode for developers on different platforms.

#Format

{
  "$extensions": {
    "figma.codeSyntax": {
      "Web": "var(--color-primary)",
      "Android": "ColorPrimary",
      "iOS": "Color.primary"
    }
  }
}

All three keys are optional. Specify only the platforms relevant to your team.

#Auto-generation templates

Instead of writing a name manually for every token, you can use templates. The plugin automatically generates the value from the token path:

Template usage example:

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#0066FF",
      "$extensions": {
        "figma.codeSyntax": {
          "Web": "{var(--css-variable)}",
          "Android": "{UpperCamelCase}",
          "iOS": "{lowerCamelCase}"
        }
      }
    }
  }
}

Result after export for token color.primary:

• Web → var(--color-primary)
• Android → ColorPrimary
• iOS → colorPrimary

How path conversion works: separators /, ., _ are replaced with -, then the path is split into words. Each template formats the words in the appropriate style.

#Group-level inheritance

The most convenient approach is to set $extensions at the group level, so all tokens inside inherit the settings:

{
  "color": {
    "$extensions": {
      "figma.scopes": ["ALL_FILLS", "STROKE_COLOR", "EFFECT_COLOR"],
      "figma.codeSyntax": {
        "Web": "{var(--css-variable)}",
        "Android": "{UpperCamelCase}",
        "iOS": "{lowerCamelCase}"
      }
    },
    "primary": {
      "$type": "color",
      "$value": "#0066FF"
    },
    "secondary": {
      "$type": "color",
      "$value": "#6633CC"
    },
    "danger": {
      "$type": "color",
      "$value": "#FF3B30"
    }
  }
}

In this example all three tokens (primary, secondary, danger) will receive:

• Scopes: ALL_FILLS, STROKE_COLOR, EFFECT_COLOR
• Code Syntax via templates

#Per-token override

If a specific token needs different settings, specify $extensions directly on it. Inheritance is a shallow merge: a child key replaces the same parent key, while parent keys not mentioned by the child are kept.

{
  "color": {
    "$extensions": {
      "figma.scopes": ["ALL_FILLS", "STROKE_COLOR", "EFFECT_COLOR"],
      "figma.codeSyntax": {
        "Web": "{var(--css-variable)}",
        "Android": "{UpperCamelCase}",
        "iOS": "{lowerCamelCase}"
      }
    },
    "primary": {
      "$type": "color",
      "$value": "#0066FF"
    },
    "text-only": {
      "$type": "color",
      "$value": "#333333",
      "$extensions": {
        "figma.scopes": ["TEXT_FILL"],
        "figma.codeSyntax": {
          "Web": "var(--text-body)"
        }
      }
    }
  }
}

Token color.text-only:

• Scopes → only TEXT_FILL (not ALL_FILLS + STROKE_COLOR + EFFECT_COLOR)
• Code Syntax → only Web: "var(--text-body)" (Android and iOS will not be set because the figma.codeSyntax value is replaced as a whole)

Inheritance rule: $extensions is merged from root/group to leaf. If a child defines figma.scopes, it replaces parent scopes as a whole. If a child defines figma.codeSyntax, it replaces the entire parent code syntax object. Keys not defined by the child continue to be inherited.

#Additional extensions

#figma.hide

Hides a variable from publishing. The variable is created in Figma but is not visible in other files when using the library.

{
  "foundation": {
    "base-unit": {
      "$type": "number",
      "$value": 4,
      "$extensions": {
        "figma.hide": true
      }
    }
  }
}

Useful for foundation tokens that serve only as a base for calculations or aliases — library consumers should not see them.

#figma.modify

Color modifiers — a chain of transformations for color tokens:

{
  "color": {
    "primary-light": {
      "$type": "color",
      "$value": "{color.primary}",
      "$extensions": {
        "figma.modify": [
          { "type": "lighten", "value": 0.2, "space": "oklch" },
          { "type": "alpha", "value": 0.8, "space": "srgb" }
        ]
      }
    }
  }
}

Only four modifier types are supported:

Supported color spaces: srgb, hsl, lch, oklch, p3. Modifiers are applied as a top-to-bottom chain: each step takes the previous result as input.

#When Scopes and Code Syntax are applied

Settings are applied during variable export to Figma, but only if the Apply codeSyntax & scopes flag is enabled in the export dialog.

Current default in Export settings: OFF.

More about export in Export Variables & Styles.

#Full example: design system

{
  "color": {
    "$extensions": {
      "figma.scopes": ["ALL_FILLS", "STROKE_COLOR", "EFFECT_COLOR"],
      "figma.codeSyntax": {
        "Web": "{var(--css-variable)}",
        "Android": "{UpperCamelCase}",
        "iOS": "{lowerCamelCase}"
      }
    },
    "brand": {
      "primary": {
        "$type": "color",
        "$value": "#0066FF",
        "$description": "Primary brand color"
      },
      "secondary": {
        "$type": "color",
        "$value": "#6633CC"
      }
    },
    "text": {
      "$extensions": {
        "figma.scopes": ["TEXT_FILL"]
      },
      "body": {
        "$type": "color",
        "$value": "#333333"
      },
      "muted": {
        "$type": "color",
        "$value": "#999999"
      }
    }
  },
  "spacing": {
    "$extensions": {
      "figma.scopes": ["GAP"],
      "figma.codeSyntax": {
        "Web": "{var(--css-variable)}",
        "Android": "{lowerCamelCase}",
        "iOS": "{lowerCamelCase}"
      }
    },
    "xs": { "$type": "spacing", "$value": "4px" },
    "sm": { "$type": "spacing", "$value": "8px" },
    "md": { "$type": "spacing", "$value": "16px" },
    "lg": { "$type": "spacing", "$value": "24px" },
    "xl": { "$type": "spacing", "$value": "32px" }
  },
  "borderRadius": {
    "$extensions": {
      "figma.scopes": ["CORNER_RADIUS"],
      "figma.codeSyntax": {
        "Web": "{var(--css-variable)}"
      }
    },
    "sm": { "$type": "borderRadius", "$value": "4px" },
    "md": { "$type": "borderRadius", "$value": "8px" },
    "lg": { "$type": "borderRadius", "$value": "16px" },
    "full": { "$type": "borderRadius", "$value": "9999px" }
  },
  "fontSize": {
    "$extensions": {
      "figma.scopes": ["FONT_SIZE"],
      "figma.codeSyntax": {
        "Web": "{var(--css-variable)}"
      }
    },
    "sm": { "$type": "fontSize", "$value": "12px" },
    "base": { "$type": "fontSize", "$value": "14px" },
    "lg": { "$type": "fontSize", "$value": "18px" },
    "xl": { "$type": "fontSize", "$value": "24px" }
  }
}

After export:

• Colors color.brand.* are visible in fills, strokes, and effects
• Colors color.text.* are visible only in text fills
• Spacing spacing.* is visible only in the gap field
• Border radii borderRadius.* are visible only in corner radius
• Font sizes fontSize.* are visible only in font-size
• All variables display correct code syntax in Dev Mode

#Tips

1. Start with groups — set $extensions at the color, spacing, borderRadius level. This covers 90% of cases.
2. Use templates — {var(--css-variable)} for CSS, {UpperCamelCase} for Android, {lowerCamelCase} for iOS. Don't write names manually.
3. Hide foundation tokens — use figma.hide: true for base values that library consumers should not see.
4. Don't overuse scopes — avoid ALL_SCOPES everywhere. Specific scopes help designers find the right variable faster.
5. Check compatibility — a scope must match the variable type. Invalid scopes are silently discarded.

#Related sections

• Tokens Overview — general token tab structure
• Token Types — all supported types
• Export Variables & Styles — exporting to Figma with scopes applied
• Tokens to Code — code generation based on Code Syntax