Настройка типографических переменных (шрифты, размеры, интервалы) - Быстрая дизайн-система для Next.js в Figma - Qpel.AI
QPEL.ai

Настройка типографических переменных (шрифты, размеры, интервалы)

Курс: Быстрая дизайн-система для Next.js в Figma0+

После цветовых переменных переходим к типографике — основе любого интерфейса. Правильно настроенные шрифты, их размеры и интервалы не только улучшают читаемость, но и ускоряют разработку, обеспечивая консистентность в вашем Next.js проекте.

Зачем нужны типографические переменные?

Типографические переменные позволяют управлять всем текстом в дизайне из одного места. Измените шрифт или размер заголовка в переменной — и изменения применятся по всему проекту. Не нужно вручную перебирать текстовые слои. Это особенно ценно для Next.js, где компоненты могут быть разбросаны по разным файлам и маршрутам.

Создаём коллекции типографических переменных

Как и с цветами, для типографики используем коллекции переменных в Figma. Это позволяет группировать параметры и применять их в разных режимах (например, для разных языков или плотностей интерфейса).

  1. Откройте панель Variables: Если она ещё не открыта, выберите Local Variables на панели Design.
  2. Создайте новую коллекцию: Нажмите + рядом с Collections и назовите её, например, Typography.

Настраиваем переменные для шрифтов

В Figma типографические переменные сложнее, чем цветовые, так как включают несколько параметров: семейство шрифтов, размер, насыщенность, высоту строки и межбуквенный интервал.

Семейство шрифтов (Font Family)

Начнём с основных шрифтов проекта. Для Next.js часто выбирают системные шрифты или Google Fonts, чтобы минимизировать время загрузки.

  1. Создайте переменную типа String: Назовите её fontFamily.primary и укажите название шрифта, например, "Inter".
  2. Если используете несколько шрифтов, создайте переменные для каждого: fontFamily.secondary: "Roboto".

Важно: Указывайте точное название шрифта, как оно отображается в Figma.

Размеры шрифтов (Font Sizes)

Определите шкалу размеров шрифтов для заголовков, основного текста, подписей и т.д. Рекомендуется использовать модульную шкалу для гармоничного вида.

  1. Создайте переменные типа Number: Назовите их fontSize.xs, fontSize.sm, fontSize.base, fontSize.lg, fontSize.xl и так далее.
  2. Присвойте значения в пикселях: Например, fontSize.xs: 12, fontSize.sm: 14, fontSize.base: 16, fontSize.lg: 18, fontSize.xl: 24.

Насыщенность шрифтов (Font Weights)

Определите используемые насыщенности (жирность) шрифтов.

  1. Создайте переменные типа Number: Назовите их fontWeight.regular, fontWeight.medium, fontWeight.bold.
  2. Присвойте значения: Например, fontWeight.regular: 400, fontWeight.medium: 500, fontWeight.bold: 700.

Высота строки (Line Height)

Высота строки (интерлиньяж) критически важна для читаемости. Часто её задают безразмерным числом (множителем от размера шрифта) или в пикселях.

  1. Создайте переменные типа Number: Назовите их lineHeight.sm, lineHeight.base, lineHeight.lg.
  2. Присвойте значения: Например, lineHeight.sm: 1.2, lineHeight.base: 1.5, lineHeight.lg: 1.75.

Межбуквенный интервал (Letter Spacing)

Межбуквенный интервал (кернинг) обычно используется для заголовков или специфических элементов.

  1. Создайте переменные типа Number: Назовите их letterSpacing.tight, letterSpacing.normal, letterSpacing.wide.
  2. Присвойте значения в процентах или пикселях: Например, letterSpacing.tight: -0.02 (для -2%), letterSpacing.normal: 0, letterSpacing.wide: 0.05 (для 5%).

Совет: Не перегружайте систему слишком большим количеством вариантов. Начните с базовых размеров и насыщенностей, которые покрывают 80% ваших потребностей.

Применяем типографические переменные к стилям текста

Теперь, когда у нас есть переменные, свяжем их с текстовыми стилями. К сожалению, Figma пока не позволяет напрямую связать все типографические параметры (семейство, размер, высоту строки, насыщенность) с одной переменной. Однако мы можем использовать переменные внутри текстовых стилей.

  1. Создайте текстовый стиль: Выделите любой текстовый слой, перейдите на панель Text и нажмите + рядом с Text styles. Назовите его, например, Heading/H1.
  2. Привяжите переменные:
    • В поле Font family выберите вашу переменную fontFamily.primary.
    • В поле Size выберите fontSize.xl.
    • В поле Weight выберите fontWeight.bold.
    • В поле Line height выберите lineHeight.sm.
    • В поле Letter spacing выберите letterSpacing.tight.
  3. Повторите для других стилей: Создайте стили для Heading/H2, Body/Base, Body/Small и т.д., используя соответствующие переменные.

Пример структуры типографических переменных

Вот как это может выглядеть в вашей коллекции переменных:

Collection: Typography
  Group: fontFamily
    fontFamily.primary: "Inter"
    fontFamily.secondary: "Roboto"
  Group: fontSize
    fontSize.xs: 12
    fontSize.sm: 14
    fontSize.base: 16
    fontSize.lg: 18
    fontSize.xl: 24
  Group: fontWeight
    fontWeight.regular: 400
    fontWeight.medium: 500
    fontWeight.bold: 700
  Group: lineHeight
    lineHeight.sm: 1.2
    lineHeight.base: 1.5
    lineHeight.lg: 1.75
  Group: letterSpacing
    letterSpacing.tight: -0.02
    letterSpacing.normal: 0
    letterSpacing.wide: 0.05

Важно: Использование переменных для типографики значительно упрощает адаптацию дизайна под разные языки (где может потребоваться другой шрифт) или создание тем, где, например, в "плотном" режиме уменьшается размер шрифта.

Теперь, когда мы настроили типографические переменные, наш дизайн стал ещё гибче и готов к быстрым изменениям. Но помимо текста, есть и другие важные элементы, которые нуждаются в стандартизации – это отступы, радиусы скругления и тени. В следующем разделе мы займёмся именно этим, чтобы завершить базовый набор наших дизайн-токенов.