Управление типографикой: Стили, масштабирование и применение - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Управление типографикой: Стили, масштабирование и применение

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

Управление типографикой в дизайн-системе — это не просто выбор шрифтов. Это создание гибкой и масштабируемой системы, которая обеспечит единообразие и читаемость на всех платформах. В Figma для этого есть текстовые стили. Они позволяют централизованно управлять всеми аспектами типографики.

Создаём и организуем текстовые стили

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

Пошаговое создание текстового стиля

  1. Создайте текстовый слой. Напишите любой текст на фрейме.
  2. Настройте параметры текста. В правой панели Design выберите нужный шрифт, размер, начертание (например, Regular, Medium, Bold), межстрочный интервал (Line height), межбуквенный интервал (Letter spacing) и другие параметры.
  3. Создайте стиль. Рядом с разделом "Text" в правой панели нажмите на иконку с четырьмя точками (Style menu).
  4. Добавьте новый стиль. В появившемся окне нажмите на кнопку + (Create style).
  5. Присвойте имя. Дайте стилю осмысленное имя.

Совет: Используйте логичную систему именования для текстовых стилей, как вы это делали с цветовыми. Это упростит навигацию и понимание структуры типографики. Например: Heading/H1/Desktop, Body/Large/Regular, Button/Primary.

Организуем стили с помощью слешей

Как и с цветами, слеши (/) в именах стилей создают иерархическую структуру, которая автоматически группируется в Figma. Это особенно полезно для больших дизайн-систем.

Примеры именования:

  • Heading/H1
  • Heading/H2
  • Body/Large
  • Body/Small
  • Button/Primary/Text
  • Link/Default

Эта структура автоматически создаст папки "Heading", "Body", "Button", "Link" в списке ваших текстовых стилей. Они станут легкодоступными и упорядоченными.

Масштабируем типографику: система размеров

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

Используем шкалу размеров

Вместо того чтобы произвольно выбирать размеры шрифтов, используйте типографическую шкалу. Это набор размеров, которые гармонично сочетаются друг с другом. Есть разные подходы к построению таких шкал:

  • Линейная шкала: Простые арифметические или геометрические прогрессии (например, каждый следующий размер на 2px больше или в 1.2 раза больше).
  • Модульная шкала: Основана на золотом сечении или других математических соотношениях, что придаёт типографике визуальную гармонию.

Пример простой линейной шкалы:

  • 12px (Caption)
  • 14px (Body Small)
  • 16px (Body Regular)
  • 18px (Body Large)
  • 24px (Subtitle)
  • 32px (H3)
  • 48px (H2)
  • 64px (H1)

Адаптивная типографика

Для адаптивного дизайна может потребоваться создать отдельные текстовые стили для разных брейкпоинтов (например, Heading/H1/Desktop, Heading/H1/Tablet, Heading/H1/Mobile). Это обеспечит оптимальную читаемость на любых устройствах.

Применяем и управляем текстовыми стилями

После создания стилей их применение становится очень простым:

  1. Выберите текстовый слой.
  2. В правой панели Design нажмите на иконку с четырьмя точками рядом с разделом "Text".
  3. Выберите нужный стиль из списка.

Редактируем и обновляем стили

Одно из главных преимуществ текстовых стилей — возможность централизованного обновления. Если вам нужно изменить шрифт, размер или цвет для всех заголовков H1, достаточно отредактировать мастер-стиль:

  1. В правой панели Design найдите нужный текстовый стиль.
  2. Наведите курсор на стиль и нажмите на иконку "шестерёнки" (Edit style).
  3. Внесите необходимые изменения. Все текстовые слои, к которым применён этот стиль, автоматически обновятся.

Важно: Всегда используйте текстовые стили для типографики в вашей дизайн-системе. Избегайте ручного изменения параметров текста, так как это нарушит единообразие и усложнит поддержку.

Практическое задание

Представьте, что вы создаёте дизайн-систему для новостного портала. Вам нужно определить и создать текстовые стили для следующих элементов:

  1. Заголовок статьи: Крупный, заметный.
  2. Основной текст статьи: Хорошо читаемый, стандартного размера.
  3. Подпись к изображению: Мелкий, ненавязчивый текст.
  4. Заголовок раздела (например, "Последние новости"): Средний размер, выделяющийся.

Ваши действия:

  • Определите примерные размеры и начертания для каждого элемента.
  • Придумайте логичные имена для этих стилей, используя систему со слешами.
  • Создайте эти стили в Figma.
  • Попробуйте применить их к нескольким текстовым слоям, а затем измените один из мастер-стилей, чтобы увидеть, как обновляются все связанные элементы.

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