SXL Studio
Tokens

Scopes и Code Syntax

Настройка scopes переменных Figma и code syntax для Dev Mode через $extensions в SXL Studio — валидные scopes по типам, дефолты, шаблоны и примеры.

Overview

Две настройки $extensions управляют поведением переменной после экспорта:

РасширениеУправляет
figma.scopesГде переменную можно использовать в Figma (scope / видимость)
figma.codeSyntaxКак переменная выглядит в Dev Mode по платформам (Web, Android, iOS)

Обе опциональны. Scopes применяются только к типам, которые экспортируются как переменные (color и типы FLOAT / STRING / BOOLEAN); style- и внутренние типы их игнорируют.

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

Scopes

Scope ограничивает, в каких полях Figma предлагается переменная. Каждый тип токена резолвится в один вид переменной Figma (COLOR, FLOAT, STRING, BOOLEAN), и у каждого вида — фиксированный набор допустимых scopes.

Вид переменной Figma по типу токена:

ВидТипы токенов
COLORcolor
FLOATopacity, dimension, number, spacing, sizing, borderWidth, borderRadius, fontSize, lineHeight, letterSpacing, paragraphSpacing, paragraphIndent
STRINGfontFamily, fontWeight, text
BOOLEANboolean

Валидные scopes по виду

Только эти значения scope принимаются для каждого вида переменной (остальные отбрасываются при экспорте).

ВидВалидные 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

Примечание Невалидный для типа scope молча отбрасывается при экспорте. Например, CORNER_RADIUS на токене color игнорируется.

Дефолтные scopes по типу

Если figma.scopes не задан, SXL Studio применяет разумный дефолт по типу. Типы не из списка получают ALL_SCOPES.

$typeДефолтный 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 задаёт строку, показываемую для переменной в Dev Mode Figma, по платформам. Все ключи опциональны.

КлючПлатформаПример
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

Вместо ручного имени на каждый токен используйте шаблон — SXL Studio сгенерирует значение из пути токена.

ШаблонРезультат для 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}" }
  }
}

Как конвертируется путь Разделители /, ., _ заменяются на -, путь разбивается на слова, и каждый шаблон форматирует эти слова в своём стиле.

Наследование

Задайте $extensions на уровне группы — и каждый токен внутри его наследует. Ребёнок может переопределить отдельный ключ; непересекающиеся ключи мержатся.

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

Полный пример

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

Связанные страницы