SXL Studio
Tokens

Typography

Типы токенов группы Typography: композит typography плюс font-, spacing- и text-format-токены — выверенные ключи, значения и примеры.

Overview

typography — это композит, который экспортируется как text-стиль Figma. Остальные — его отдельные части: часть экспортируется как переменные, часть применяется напрямую.

$typeЭкспортируется какДефолтный scope
typographyText-стиль—
fontFamilyПеременная (STRING)FONT_FAMILY
fontWeightПеременная (STRING)FONT_STYLE
fontSizeПеременная (FLOAT)FONT_SIZE
lineHeightПеременная (FLOAT)LINE_HEIGHT
letterSpacingПеременная (FLOAT)LETTER_SPACING
paragraphSpacingПеременная (FLOAT)PARAGRAPH_SPACING
paragraphIndentПеременная (FLOAT)PARAGRAPH_INDENT
fontStyleВнутренний (apply)—
textCaseВнутренний (apply)—
textDecorationВнутренний (apply)—

Typography

Композитный объект; каждый ключ опционален и может быть литералом или алиасом на соответствующий токен.

КлючТип / значения
fontFamilyстрока / алиас
fontWeightстрока или число / алиас
fontStyleregular, italic, bold, bold italic, …
fontSizeчисло / строка с единицей / алиас
lineHeightчисло / строка с единицей / % / алиас
letterSpacingчисло / строка с единицей / % / алиас
paragraphSpacingчисло / строка с единицей / алиас
paragraphIndentчисло / строка с единицей / алиас
textCasenone, uppercase, lowercase, capitalize, small-caps
textDecorationnone, underline, line-through
leadingTrim / verticalTrimCAP_HEIGHT, NONE
JSON
{
  "$type": "typography",
  "$value": {
    "fontFamily": "{fontFamily.sans}",
    "fontWeight": "{fontWeight.medium}",
    "fontSize": "{fontSize.body}",
    "lineHeight": "24px",
    "letterSpacing": "0px"
  }
}

Font Family

Экспортируется как переменная STRING. Дефолтный scope FONT_FAMILY.

JSON
{ "fontFamily": { "$type": "fontFamily", "sans": { "$value": "Inter" }, "mono": { "$value": "JetBrains Mono" } } }

Font Weight

Экспортируется как переменная STRING. Дефолтный scope FONT_STYLE. Принимает числовую насыщенность или имя.

JSON
{ "fontWeight": { "$type": "fontWeight", "regular": { "$value": 400 }, "medium": { "$value": 500 }, "bold": { "$value": 700 } } }

Font Size

Экспортируется как переменная FLOAT. Дефолтный scope FONT_SIZE.

JSON
{ "fontSize": { "$type": "fontSize", "body": { "$value": "16px" }, "h1": { "$value": "32px" } } }

Line Height

Экспортируется как переменная FLOAT. Дефолтный scope LINE_HEIGHT. Принимает длину или процент.

JSON
{ "lineHeight": { "$type": "lineHeight", "tight": { "$value": "20px" }, "normal": { "$value": "150%" } } }

Letter Spacing

Экспортируется как переменная FLOAT. Дефолтный scope LETTER_SPACING.

JSON
{ "letterSpacing": { "$type": "letterSpacing", "tight": { "$value": "-0.2px" }, "wide": { "$value": "0.5px" } } }

Paragraph Spacing

Экспортируется как переменная FLOAT. Дефолтный scope PARAGRAPH_SPACING.

JSON
{ "paragraphSpacing": { "$type": "paragraphSpacing", "md": { "$value": "12px" } } }

Paragraph Indent

Экспортируется как переменная FLOAT. Дефолтный scope PARAGRAPH_INDENT.

JSON
{ "paragraphIndent": { "$type": "paragraphIndent", "md": { "$value": "8px" } } }

Font Style

Применяется напрямую (не экспортируется как переменная/стиль). Комбинирует начертание и декорацию.

Значения: regular, italic, bold, bold italic, underline, line-through, none.

JSON
{ "fontStyle": { "$type": "fontStyle", "emphasis": { "$value": "bold italic" }, "link": { "$value": "underline" } } }

Text Case

Применяется напрямую. Значения: none, uppercase, lowercase, capitalize, small-caps.

JSON
{ "textCase": { "$type": "textCase", "upper": { "$value": "uppercase" }, "title": { "$value": "capitalize" } } }

Text Decoration

Применяется напрямую. Значения: none, underline, line-through.

JSON
{ "textDecoration": { "$type": "textDecoration", "underline": { "$value": "underline" }, "strike": { "$value": "line-through" } } }

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

JSON
{
  "fontFamily": { "$type": "fontFamily", "sans": { "$value": "Inter" } },
  "fontWeight": { "$type": "fontWeight", "regular": { "$value": 400 }, "medium": { "$value": 500 } },
  "fontSize": { "$type": "fontSize", "body": { "$value": "16px" }, "h1": { "$value": "32px" } },
  "typography": {
    "$type": "typography",
    "body": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.regular}", "fontSize": "{fontSize.body}", "lineHeight": "24px" }
    },
    "h1": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.medium}", "fontSize": "{fontSize.h1}", "lineHeight": "40px", "letterSpacing": "-0.5px" }
    }
  }
}

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