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

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

Основные понятия о межстрочном интервале в Figma

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

Figma позволяет управлять line height независимо от размера шрифта. Это даёт дизайнерам полный контроль над вертикальной ритмикой. Интервал можно задавать в абсолютных единицах (px), относительных (%), а также в виде коэффициента (multiplier), который масштабируется вместе с размером шрифта.

Важно понимать, что line height в Figma — это не просто «расстояние между строками», а общая высота строки, включая пространство над и под символами. Это означает, что при увеличении line height увеличивается и общая высота текстового блока, что может повлиять на расположение других элементов.

Чем отличается line height в Figma от других программ?

В отличие от графических редакторов вроде Photoshop, где межстрочный интервал часто называется «интерлиньяж» и задаётся в пунктах, Figma работает с более современным подходом. Здесь line height — часть системы типографских стилей, интегрированная в компоненты и библиотеки.

Кроме того, Figma учитывает метрики шрифта (асцендер, десцендер, кегль), поэтому значение line height может вести себя иначе при использовании разных шрифтов, даже при одинаковом размере. Например, у шрифта Inter и Roboto могут быть разные внутренние отступы, что влияет на визуальное восприятие интервала.

• Figma использует систему прозрачного управления стилями через Design System;
• Line height можно сохранить как часть текстового стиля и переиспользовать;
• Поддержка нескольких форматов значений: px, %, em, multiplier.

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

Изменение межстрочного интервала для конкретного текстового элемента — самая частая задача. Процесс прост и интуитивен, но требует внимания к деталям.

Первым шагом выберите нужный текстовый объект на холсте. Убедитесь, что выделен именно текст, а не группа. Затем перейдите в правую панель свойств (Inspector). Там найдите раздел Typography, где будут указаны шрифт, размер, насыщенность и другие параметры.

Поле Line height находится сразу под размером шрифта. По умолчанию оно может быть установлено в Auto или иметь числовое значение. Чтобы изменить его, кликните по полю и введите новое значение. Можно использовать:

1. Число с единицей измерения (например, 24px);
2. Проценты (например, 150%);
3. Десятичный множитель (например, 1.5).

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

Пошаговая инструкция

1. Выделите текстовый слой на холсте.
2. Откройте панель свойств справа.
3. Найдите поле Line height в секции Typography.
4. Введите новое значение: 20px, 140% или 1.4.
5. Нажмите Enter или кликните вне поля для применения.
6. Оцените результат визуально и при необходимости скорректируйте.

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

Работа с текстовыми стилями и Line Height

Одно из главных преимуществ Figma — возможность создания и применения текстовых стилей. Это особенно важно при работе над крупными проектами, где требуется единообразие.

Текстовый стиль в Figma может включать не только шрифт и размер, но и межстрочный интервал. Это значит, что вы можете создать стиль «Заголовок H2», в котором уже заложено значение line height = 1.3, и применять его по всему проекту без повторной настройки.

Чтобы создать текстовый стиль с настроенным интервалом:

• Настройте текст: шрифт, размер, цвет, жирность и line height;
• Выделите этот текстовый слой;
• В правой панели нажмите значок «Create style» (звёздочка) рядом с выпадающим списком текстовых стилей;
• Введите имя стиля, например, «Body / Regular / 16pt / 1.5»;
• Убедитесь, что галочка «Include in style» стоит напротив всех нужных параметров, включая Line height.

После этого стиль станет доступен во всех фигмах-файлах, подключённых к одной библиотеке.

Типы значений Line Height: когда что использовать

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

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

Пример:
Если у вас шрифт 16px, а line height = 24px, то каждая строка будет занимать ровно 24 пикселя по вертикали.

Значение в процентах (%) — относится к размеру шрифта. 100% = высоте шрифта, 150% = в полтора раза больше. Удобно при A/B-тестировании интервалов, но менее гибко при масштабировании.

Значение в виде множителя (multiplier) — наиболее рекомендуемый формат. Например, 1.5 означает, что line height = размер шрифта × 1.5. Преимущество в том, что при изменении размера шрифта интервал масштабируется пропорционально.

• Для заголовков: 1.2–1.4;
• Для основного текста: 1.4–1.6;
• Для мелкого текста (подписи): 1.2–1.3.

Ошибки и проблемы, которые встречаются при настройке

Даже опытные дизайнеры иногда сталкиваются с типичными ошибками при работе с line height.

Одна из самых распространённых — использование слишком маленького интервала. Это делает текст плотным, «тяжёлым» для глаз, особенно на мобильных устройствах. Рекомендуемый минимум для основного текста — 1.4× от размера шрифта.

Другая ошибка — игнорирование автовысоты текстового фрейма. Если вы увеличили line height, но фрейм не растянулся, текст может обрезаться. Решение — либо вручную изменить высоту, либо применить Auto Layout с режимом «Fill container».

Также часто встречается несоответствие между стилями. Например, два блока с одинаковым размером шрифта, но разным line height, потому что один создан до внедрения дизайн-системы.

Как избежать проблем

1. Всегда используйте текстовые стили из библиотеки;
2. Проверяйте line height при импорте текста из других источников;
3. Тестируйте текст на разных устройствах и при увеличении масштаба;
4. Документируйте типографскую шкалу в дизайн-системе.

Советы по оптимальной типографике в интерфейсе

Правильная типографика — основа удобного интерфейса. Вот несколько проверенных практик.

Во-первых, соблюдайте вертикальный ритм. Все элементы на странице должны выравниваться по общей сетке. Line height должен быть кратен базовому интервалу (например, 4px или 8px). Это создаёт ощущение порядка и профессионализма.

Во-вторых, учитывайте язык. Для кириллицы часто требуется чуть больший line height, чем для латиницы, из-за более высоких символов (например, «Ё», «Ж»). Тестирование с реальным контентом обязательно.

В-третьих, сочетайте line height с другими параметрами: letter spacing, paragraph spacing, отступами между блоками. Они работают вместе, создавая иерархию.

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

«Многие дизайнеры фокусируются на шрифте и размере, забывая про line height. А ведь именно он определяет, насколько комфортно пользователь будет читать текст. Я рекомендую всегда начинать с типографской шкалы: определить 3–5 уровней текста (H1, H2, Body, Caption) и для каждого зафиксировать font size, weight и line height. Это экономит часы работы и делает продукт зрелее.»

— Марина Петрова, Арт-директор, UX-консультант, 12 лет в digital-дизайне

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

Заключение

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

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

• Line height можно настраивать в px, % или как множитель — предпочтительнее последний.
• Всегда используйте текстовые стили для единообразия.
• Проверяйте, чтобы текст не обрезался при увеличении интервала.
• Соблюдайте вертикальную сетку и кратность значений.
• Документируйте типографские правила в дизайн-системе.