Как в фигме сделать межстрочный интервал

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

Что такое межстрочный интервал и как он работает в Figma

Межстрочный интервал (line height) — это вертикальное расстояние между базовыми линиями соседних строк текста. Он включает высоту самой строки, а также пространство сверху и снизу от символов. Правильно подобранный интервал делает текст лёгким для чтения, особенно в длинных абзацах, блогах или интерфейсах с большим объёмом информации.
В Figma этот параметр находится в правой боковой панели, в разделе текстовых свойств. При выделении текстового объекта вы увидите поле с надписью «Line height». По умолчанию оно может быть установлено в значение «Auto», что означает: используйте встроенные метрики шрифта для определения высоты строки. Это удобно, но не всегда предсказуемо, особенно при работе со шрифтами от разных производителей.
Figma рассчитывает line height на основе данных OpenType, таких как `ascender`, `descender` и `line gap`. Эти метрики могут сильно различаться у разных шрифтов, даже если они имеют одинаковый размер. Например, шрифт Inter и Roboto при размере 16px могут давать разную фактическую высоту строки в режиме Auto, что создаёт проблемы при создании согласованной дизайн-системы.

Как Figma отображает межстрочный интервал визуально

Когда вы задаёте line height, Figma применяет его к контейнеру текста. Если текст многострочный, каждая строка будет занимать указанную высоту. Важно понимать, что это не просто «расстояние между строками», а общая высота строки, включающая символы и отступы вокруг них.
Если вы установите слишком маленькое значение, символы могут обрезаться по верхнему или нижнему краю. Слишком большое — приведёт к избыточному белому пространству, что нарушит верстку и сделает интерфейс менее компактным. Оптимальное значение зависит от контекста: заголовки, основной текст, подписи — все требуют разного подхода.

Как настроить межстрочный интервал: пошаговое руководство

Настройка межстрочного интервала в Figma — процесс простой, но требующий внимания к деталям. Ниже приведена пошаговая инструкция, которая подойдёт как новичкам, так и опытным пользователям, желающим освежить знания.

1. Откройте ваш Figma-файл и выделите текстовый элемент с помощью инструмента Text (T).
2. Перейдите в правую панель свойств (Inspector) и найдите раздел Typography.
3. Найдите поле Line height — оно расположено сразу под полями Font size и Letter spacing.
4. Щёлкните по значению и введите новое число. Вы можете использовать:
   • Пиксели (например, 24px)
   • Проценты (например, 150%)
   • Без единиц (например, 1.5 — это то же, что и 150%)
5. Нажмите Enter, чтобы применить изменения.

После этого вы увидите, как изменилось вертикальное пространство между строками. Если текст находится внутри Auto Layout, контейнер автоматически изменит свою высоту, чтобы вместить обновлённый текст.

Примеры корректных значений

Для разных типов текста приняты свои стандарты:

• Основной текст (16px): line height 24px или 1.5
• Подзаголовки (20px): 28–32px
• Заголовки H1 (32px): 40–48px
• Мелкий текст (12px): 16–18px

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

Auto vs Manual: какой режим выбрать и когда

Один из самых частых вопросов дизайнеров: стоит ли использовать Auto или лучше перейти на ручное управление? Ответ зависит от проекта, масштаба и требований к консистентности.

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

Когда использовать Auto?

• На этапе прототипирования, когда важна скорость.
• При работе с кастомными шрифтами, имеющими хорошо прописанные метрики.
• Если вы уверены, что не будете менять шрифт в будущем.

Когда переходить на Manual?

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

Распространённые ошибки и как их избежать

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

Ошибка 1: Полагаться только на Auto без проверки

Многие считают, что Auto — это «умное» решение, которое всё сделает за вас. На практике это не так. Некоторые шрифты имеют завышенные или заниженные метрики, из-за чего текст выглядит слишком тесно или, наоборот, разреженно.

Ошибка 2: Игнорировать поведение в Auto Layout

Когда текст с фиксированным line height помещается в Auto Layout, он может создавать неожиданные отступы. Это происходит потому, что Figma добавляет дополнительное пространство сверху и снизу, чтобы центрировать строку по высоте.
Решение: используйте опцию «Text auto-sizing» — «None» или «Height only», в зависимости от задачи. Также можно вручную скорректировать padding контейнера.

Ошибка 3: Разный line height для одного стиля текста

Иногда дизайнеры случайно задают разные значения line height для одинаковых текстовых блоков (например, карточки товаров). Это нарушает визуальную целостность.
Решение: создайте текстовые стили (Text Styles) и применяйте их глобально. Тогда все заголовки, абзацы и подписи будут иметь одинаковые параметры.

Типографские практики: нормы и рекомендации

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

Правило 1.5 для основного текста

Для текста размером 14–18px оптимальный коэффициент line height — 1.5. Это эмпирическое правило, подтверждённое исследованиями читаемости. Например, при размере шрифта 16px line height должен быть 24px (16 × 1.5).
Для более крупных текстов (заголовков) коэффициент можно снижать до 1.2–1.3, так как большие символы уже имеют достаточное внутреннее пространство.

Учёт языка и начертания

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

Адаптация под платформу

• Web: чаще используется 1.4–1.6
• Мобильные приложения: 1.3–1.5 (из-за ограниченного экрана)
• Печать: 1.2–1.4 (бумага обеспечивает лучшую читаемость)

Экспертное мнение

Вопросы и ответы

Заключение

Межстрочный интервал — это не просто техническая настройка, а важный элемент пользовательского опыта. В Figma он управляется гибко, но требует осознанного подхода. Режим Auto удобен для старта, но в серьёзных проектах лучше перейти на ручное управление в пикселях или относительных единицах.

• Line height в Figma задаётся в панели свойств и может быть Auto, px или %.
• Для дизайн-систем предпочтительны фиксированные значения в пикселях.
• Разные шрифты по-разному ведут себя в режиме Auto — всегда проверяйте результат.
• Используйте текстовые стили для обеспечения консистентности.
• Оптимальный коэффициент для основного текста — 1.5, для заголовков — 1.2–1.3.