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

Расстояние между строками в тексте — один из ключевых параметров, влияющих на читаемость и визуальную гармонию дизайна. В Figma этот параметр называется интерлиньяжем (line height) и настраивается непосредственно в панели свойств при выделенном текстовом элементе. Изменить его можно как вручную, так и с использованием числовых значений, процентов или единиц измерения, что позволяет точно контролировать вертикальный ритм макета.

Что такое интерлиньяж и зачем он нужен

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

В типографике существует понятие «золотого правила»: оптимальный интерлиньяж обычно составляет от 120% до 150% от размера шрифта. Например, для шрифта 16px комфортным будет значение line height от 19.2px до 24px. Однако эти цифры зависят от начертания, длины строки и плотности символов.

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

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

Чтобы настроить расстояние между строками, выполните следующие шаги:

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

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

Для быстрого доступа используйте сочетание клавиш Ctrl+Alt+T (или Cmd+Option+T на Mac), чтобы быстро переключиться на текстовый инструмент. После выделения текста параметр line height становится доступен мгновенно.

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

Если вы часто используете одинаковые параметры, рекомендуется создать собственный текстовый стиль:

• Настройте шрифт, размер, насыщенность и line height так, как нужно.
• Нажмите на значок Create style рядом с полем Line height (или в верхней части панели Text).
• Присвойте стилю имя, например «Body / Regular / 16px / 1.5».
• Сохраните. Теперь этот стиль можно применять к другим текстовым блокам через выпадающий список стилей.

Такой подход особенно полезен при работе в команде или при создании дизайн-систем. Все участники проекта будут использовать единые стандарты, что минимизирует ошибки и ускоряет процесс разработки.

Единицы измерения и их особенности

Figma поддерживает три основных формата для указания интерлиньяжа:

• Пиксели (px) — фиксированное значение, удобное для точного контроля. Подходит, когда вы знаете точную высоту строки.
• Проценты (%) — относительное значение, рассчитываемое от размера шрифта. Например, 150% от 16px — это 24px.
• Безразмерные числа (unitless) — наиболее гибкий вариант. Значение 1.5 означает множитель, который масштабируется пропорционально при изменении размера шрифта.

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

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

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

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

Также стоит избегать смешивания разных единиц измерения в одном проекте. Если в одной части макета используется 1.5, а в другой — 24px, это создаёт диссонанс и усложняет передачу макета разработчикам.

Как проверить корректность интерлиньяжа

• Прочитайте текст вслух — если глаз цепляется за пробелы или наоборот, чувствуется теснота, значит, интерлиньяж требует корректировки.
• Увеличьте масштаб макета до 200% — на крупном масштабе проблемы с вертикальным ритмом становятся очевидны.
• Проверьте, как текст выглядит на реальных устройствах через Figma Mirror или прототип.

Советы по оптимальному расстоянию между строками

Выбор идеального интерлиньяжа зависит от нескольких факторов: размера шрифта, длины строки, жирности начертания и типа контента. Для заголовков допустимо меньшее значение — от 100% до 120%, так как они содержат меньше строк. Для основного текста лучше придерживаться диапазона 140–160%.

Для моноширинных шрифтов (например, кода) интерлиньяж стоит увеличить до 160–200%, чтобы улучшить различимость символов. В то время как для светлых шрифтов с высокой контрастностью может потребоваться больше воздуха — зрительно они кажутся плотнее.

• Для шрифтов 14–16px используйте line height 1.4–1.6.
• Для 18–24px (подзаголовки) — 1.3–1.5.
• Для 30px и выше (заголовки) — 1.1–1.3.

Представьте, что вы читаете текст на телефоне в движущемся транспорте. Хватает ли места между строками, чтобы взгляд не сбивался? Если нет — увеличьте интерлиньяж хотя бы на 10%.

Экспорт и совместимость с другими системами

При передаче макета разработчикам важно, чтобы значения интерлиньяжа были понятны и легко реализуемы. Современные CSS-движки поддерживают все те же форматы, что и Figma: px, %, unitless. Однако есть нюансы.

Безразмерные значения (например, 1.5) являются предпочтительными в веб-разработке, так как они не зависят от контекста и хорошо масштабируются. Проценты могут вести себя по-разному в зависимости от родительского элемента, поэтому их стоит использовать осторожно.

Figma автоматически показывает значения line height в правой панели при выделении элемента. Разработчики могут скопировать их напрямую или экспортировать через плагины вроде Tokens Studio или Zeplin.

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

По её словам, одна из главных проблем — отсутствие единых стандартов в командах. «Мы внедрили систему текстовых стилей в Figma, где каждый стиль содержит не только шрифт и размер, но и обязательный line height. Это уменьшило количество правок на 40%», — добавляет она.

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

Заключение

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

• Интерлиньяж напрямую влияет на читаемость текста.
• Предпочтительный формат — безразмерные значения (например, 1.5).
• Создавайте текстовые стили для единообразия в проектах.
• Тестируйте текст на разных устройствах и при разных масштабах.
• Синхронизируйте параметры с командой через библиотеки стилей.