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

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

Что такое line height и зачем его настраивать

Line height, или межстрочный интервал, — это вертикальное пространство между базовыми линиями соседних строк текста. Он не ограничивается только высотой символа, а включает в себя дополнительный отступ сверху и снизу, который делает текст более «дышащим». В веб- и UI-дизайне этот параметр критически важен: слишком маленький интервал затрудняет чтение, особенно при длинных абзацах, а чрезмерно большой — разрывает визуальную связь между строками.

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

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

Как изменить расстояние между строками: пошаговая инструкция

Настройка интервала между строками в Figma — простая, но точная операция. Вот как это сделать:

1. Откройте ваш файл в Figma и выберите текстовый слой с помощью инструмента Text (T).
2. В правой панели инспектора свойств найдите раздел Text. Он содержит параметры шрифта, размера, цвета и межстрочного интервала.
3. Найдите поле Line height. Оно расположено рядом с размером шрифта и может отображаться как число (например, 20px) или коэффициент (например, 1.5).
4. Щёлкните по значению и введите новое. Вы можете использовать абсолютные значения в пикселях или относительные — в em или процентах.
5. Нажмите Enter. Интервал между строками обновится мгновенно.

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

Пример: увеличение интервала для заголовка

Допустим, у вас есть заголовок H1 размером 32px. По умолчанию line height составляет 1.4 (44.8px). Чтобы сделать текст визуально легче, вы можете увеличить значение до 1.6 (51.2px). Это добавит больше воздуха вокруг строк, что особенно эффективно на экранах с высоким разрешением.

Где найти настройку в интерфейсе

Иногда пользователи не могут быстро найти параметр line height. Он расположен в том же блоке, что и Font size, Letter spacing и Text align. Если панель свойств свёрнута, разверните её, чтобы увидеть все доступные опции.

Единицы измерения: px, em, % — что выбрать

Figma поддерживает несколько единиц для line height: пиксели (px), em и проценты (%). У каждой есть свои преимущества и области применения.

Использование em считается best practice, потому что оно обеспечивает масштабируемость. Например, если вы зададите line height = 1.5em, то при любом размере шрифта (14px, 24px, 48px) интервал будет пропорционально адаптироваться. Это особенно полезно при создании компонентов с переменным текстом.

Пример расчёта

• Шрифт: 20px
• Line height: 1.5em → 20 × 1.5 = 30px
• Если шрифт изменится на 28px, line height станет 42px

Такой подход экономит время и минимизирует ошибки при редактировании.

Создание и использование текстовых стилей для единообразия

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

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

1. Настройте текстовый слой с нужными параметрами, включая line height.
2. Выделите слой и нажмите на значок Create style рядом с полем Line height.
3. Введите имя стиля, например, «Body / Regular / 16/1.6».
4. Нажмите «Create». Стиль появится в библиотеке.

Теперь вы можете применять этот стиль к любому текстовому слою в проекте. Если позже потребуется изменить line height, достаточно обновить сам стиль — все связанные слои обновятся автоматически.

Структура именования стилей

Рекомендуется использовать понятную систему имён:

• Тип текста (Heading, Body, Caption)
• Начертание (Regular, Medium, Bold)
• Размер и line height (16/1.6)

Пример: Heading / Bold / 24/1.4

Это упрощает поиск и поддержку дизайн-системы, особенно в командной работе.

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

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

• Игнорирование авто-высоты текста. При изменении line height высота текстового блока может измениться, что приведёт к наложению на соседние элементы. Всегда проверяйте, как текст ведёт себя в контейнере.
• Использование разных единиц в одном проекте. Смешивание px и em усложняет поддержку и создаёт несоответствия. Лучше выбрать одну систему и придерживаться её.
• Копирование стилей из других проектов без проверки. Line height может быть завышен или занижен под конкретный шрифт. Перед применением проверяйте, подходит ли он под ваш контекст.
• Отсутствие тестирования на реальных данных. Дизайн часто проверяется на lorem ipsum, но реальный текст может быть длиннее или содержать символы с хвостами (g, j, y), которые требуют больше места.

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

• Всегда используйте режим Auto layout для контейнеров с текстом.
• Проверяйте текст в разных языках, особенно если продукт мультиязычный.
• Настройте line height с запасом — лучше немного больше, чем меньше.

Best practices типографики в Figma

Хорошая типографика — это не только красиво, но и удобно. Вот проверенные рекомендации по работе с line height и другими параметрами текста:

• Для основного текста (body) используйте line height от 1.4 до 1.6. Это оптимальный диапазон для читаемости.
• Для заголовков можно снижать интервал до 1.2–1.3, чтобы сохранить визуальную плотность.
• Для мелкого текста (подписи, кнопки) не опускайтесь ниже 1.2, иначе строки начнут сливаться.
• Используйте Auto Layout с направлением Vertical, чтобы контейнеры автоматически подстраивались под высоту текста.
• Создавайте текстовые стили для всех типов текста в интерфейсе — это ускоряет работу и снижает количество ошибок.

Таблица рекомендуемых значений

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

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

Профессионалы также рекомендуют использовать плагины вроде Typography или Content Reel для быстрой вставки реальных текстов и проверки интерлиньяжа. Это помогает выявить проблемы до финальной презентации.

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

Заключение

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

• Line height напрямую влияет на читаемость и качество макета.
• Предпочтительно использовать относительные единицы (em) для масштабируемости.
• Текстовые стили в Figma позволяют централизованно управлять интерлиньяжем.
• Избегайте смешивания единиц и всегда тестируйте на реальных данных.
• Интеграция с разработкой проще, если line height задан корректно и логично.