Typography

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

В окне Export to Figma текстовые стили включаются переключателем Styles → Typography, строковые переменные переключателем Variables → String, числовые переключателем Variables → Number.

#Typography

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

Обратите внимание на высоту строки: число без единицы, например 1.5, становится процентом в Figma, а строка с px пиксельным значением. Запись "150%" пересчитывается в пиксели через базовый размер remBase, поэтому для процентной высоты строки пишите множитель 1.5. Значения auto и normal дают автоматическую высоту.

Ключи, которых нет в объекте, при экспорте сбрасываются к значениям Figma по умолчанию, а значение, записанное числом вместо ссылки, снимает ручную привязку переменной в стиле.

{
  "$type": "typography",
  "$value": {
    "fontFamily": "{fontFamily.sans}",
    "fontWeight": "{fontWeight.medium}",
    "fontSize": "{fontSize.body}",
    "lineHeight": 1.5,
    "letterSpacing": "0px"
  }
}

Форма Create Typography показывает четыре основных поля: Font Family, Font Weight, Font Size и Line Height. Остальные добавляются кнопкой Add optional: Letter Spacing, Text Case, Text Decoration, Paragraph Spacing, Paragraph Indent и флажок Vertical Trim.

При Apply Tokens к текстовому слою плагин сначала ищет экспортированный текстовый стиль с таким именем и применяет его; если стиля нет, выставляет шрифт, размер и остальные свойства напрямую.

#Font Family

Переменная String. Из списка семейств через запятую в переменную попадает первое.

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

#Font Weight

Переменная String со scope Font style, потому что Figma хранит начертание строкой, например «Semi Bold». Значение можно записать числом, именем начертания или числом с курсивом.

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

Если у группы fontWeight в figma.scopes указано что-то кроме Font style, файл покажет ошибку валидации: исправьте scope в форме токена или в JSON.

#Font Size

Переменная Number со scope Font size.

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

#Line Height

Переменная Number со scope Line height. Записывайте пиксели: переменная хранит число, а проценты для отдельной переменной пересчитываются через remBase.

{ "lineHeight": { "$type": "lineHeight", "tight": { "$value": "20px" }, "normal": { "$value": "24px" } } }

#Letter Spacing

Переменная Number со scope Letter spacing. Для переменной записывайте пиксели.

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

#Paragraph Spacing и Paragraph Indent

Переменные Number со scope Paragraph spacing и Paragraph indent.

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

#Text Case

Применяется к текстовому слою напрямую. Значения: none, uppercase, lowercase, capitalize, small-caps. Если шрифт не поддерживает капитель, слой остаётся без изменения регистра.

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

#Text Decoration

Применяется к текстовому слою напрямую. Значения: none, underline, strikethrough.

{ "textDecoration": { "$type": "textDecoration", "underline": { "$value": "underline" }, "strike": { "$value": "strikethrough" } } }

#Font Style

Тип поддерживается в JSON, но в текущей версии скрыт из меню создания и не применяется к слоям. Курсив задавайте ключом fontStyle внутри typography или через начертание в fontWeight, например "600 italic".

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

{
  "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": 1.5 }
    },
    "h1": {
      "$value": { "fontFamily": "{fontFamily.sans}", "fontWeight": "{fontWeight.medium}", "fontSize": "{fontSize.h1}", "lineHeight": "40px", "letterSpacing": "-0.5px" }
    }
  }
}

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

• Типы токенов
• JSON-формат токенов
• Scopes и Code Syntax
• Dimension, Number, Sizing, Spacing