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

Межстрочный интервал — один из ключевых параметров типографики в Figma, влияющий на читаемость текста и общее восприятие макета. Изменить его можно как для отдельного фрагмента, так и для стилей, компонентов или всего проекта. Настройка производится через панель свойств справа, где доступны точные значения в пикселях, процентах или em-единицах. Главное — понимать разницу между Line Height, Leading и другими параметрами, чтобы не нарушить визуальную гармонию.

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

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

В типографике важно различать три основных термина: высота строки (line height), интерлиньяж (leading) и базовая линия (baseline). Интерлиньяж — это дополнительное пространство сверху и снизу от высоты символа, тогда как line height включает саму высоту шрифта плюс интерлиньяж. Figma оперирует именно значением line height, которое может быть абсолютным (в px) или относительным (в % или em).

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

Как изменить line height в Figma

Изменение межстрочного интервала в Figma — простая, но детализированная операция. Процесс начинается с выделения текстового объекта на холсте. После этого в правой панели свойств появляются параметры шрифта, включая размер, семейство, начертание и другие. Среди них находится поле «Line height», расположенное под настройками шрифта.

Для изменения значения достаточно кликнуть на текущее число и ввести новое. Figma поддерживает несколько форматов ввода: числовые значения с единицами измерения (px, %, em) или без них. Если вы вводите просто число, Figma автоматически трактует его как кратность размеру шрифта (например, 1.5 = 150% от размера шрифта).

Если текст состоит из нескольких фрагментов с разными стилями (например, жирное слово в абзаце), изменение line height повлияет на весь абзац целиком. Чтобы задать разные интервалы для разных частей, нужно разбить текст на отдельные объекты или использовать стилированные фрагменты внутри одного текстового блока.

1. Выделите текстовый элемент на холсте.
2. Перейдите в правую панель инспектора свойств.
3. Найдите раздел Typography и поле Line height.
4. Введите новое значение с нужной единицей измерения.
5. Убедитесь, что изменения корректно отображаются на всех строках.

Типы значений для line height

Figma позволяет задавать межстрочный интервал тремя способами: в пикселях (px), процентах (%) и em-единицах. Каждый из них имеет свои особенности и области применения.

• Пиксели (px) — абсолютное значение. Подходит для фиксированных макетов, когда требуется точный контроль над версткой. Например, line height: 24px при font size 16px даёт чёткий интервал без масштабирования.
• Проценты (%) — относительное значение, рассчитываемое от размера шрифта. Значение 150% эквивалентно 1.5 × размер шрифта. Удобно при использовании масштабируемых компонентов.
• Em-единицы — аналогичны процентам, но используют десятичную форму. Значение 1.5 em = 150%. Часто используется в веб-разработке и легко импортируется в CSS.

Выбор типа зависит от контекста. Для дизайн-систем рекомендуется использовать относительные значения (%, em), так как они обеспечивают гибкость при изменении размера шрифта. Абсолютные значения (px) предпочтительны для финальных макетов, где важно сохранить точные пропорции.

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

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

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

1. Настройте текстовый элемент с нужными параметрами, включая line height.
2. В правой панели нажмите иконку со звездочкой рядом с названием шрифта.
3. Введите имя стиля, например, «Body / Regular / 16/24».
4. Нажмите «Create».

Теперь этот стиль можно применять к любым текстовым объектам. При изменении стиля все связанные элементы обновятся автоматически. Это особенно полезно при глобальной настройке интервалов в больших проектах.

Ошибки и как их избежать

Несмотря на простоту настройки, пользователи часто допускают ошибки при работе с line height. Одна из самых распространённых — установка слишком маленького интервала, что делает текст трудным для чтения. Рекомендуемый диапазон: 1.4–1.6 для основного текста и 1.2–1.4 для заголовков.

Другая ошибка — использование разных единиц измерения в одном проекте. Например, часть стилей в px, другая — в %. Это затрудняет поддержку и согласованность. Лучше выбрать один формат и придерживаться его.

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

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

Экспорт и совместимость

При передаче макетов разработчикам важно, чтобы значения line height корректно интерпретировались. Figma интегрируется с плагинами вроде Zeplin, Avocode и напрямую с кодовой базой через Dev Mode. В Dev Mode разработчики видят точные значения в CSS, включая line-height.

Если в Figma установлено line height: 1.5em, в CSS оно отобразится как line-height: 1.5. Абсолютные значения (24px) переносятся без изменений. Это обеспечивает точное соответствие между дизайном и реализацией.

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

Интервью с Михаилом Власовым, руководителем дизайн-студии TypoLab

«Мы провели исследование с 200 участниками: 78% предпочитают line height 1.5 для основного текста. Но есть нюанс — для мобильных интерфейсов оптимально 1.4, чтобы экономить пространство. В Figma мы всегда используем текстовые стили с line height в em. Это позволяет нам быстро адаптировать интерфейсы под разные языки и размеры экранов.»

«Однажды клиент попросил уменьшить интервал на 2 px, чтобы “все поместилось”. Мы показали A/B-тест: с оригинальным и сжатым текстом. Читаемость упала на 40%. Клиент согласился оставить 1.5. Вывод: данные важнее мнений.»

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

Заключение

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

• Всегда используйте текстовые стили для управления line height.
• Предпочитайте относительные значения (% или em) в дизайн-системах.
• Тестируйте интервалы на длинных текстах и разных устройствах.
• Следите за единообразием в проекте — избегайте смешивания единиц.
• Учитывайте требования доступности и рекомендации WCAG.