Межстрочный интервал в фигме где находится

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

Где находится межстрочный интервал в Figma

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

Figma предлагает три способа задания значения:

• в пикселях (px);
• в процентах (%);
• в относительных единицах em.

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

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

Типы значений межстрочного интервала: px, %, em

Выбор типа значения напрямую влияет на гибкость и предсказуемость поведения текста. Давайте разберём каждый формат подробно.

Пиксели (px)

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

Проценты (%)

Наиболее популярный вариант. Значение рассчитывается относительно текущего размера шрифта. Например, 18px шрифт с line height 140% даёт 25.2px. Такой подход гарантирует пропорциональность при масштабировании текста. Особенно актуален при создании библиотек компонентов и design systems.

Относительные единицы (em)

Аналогично процентам, но записывается как десятичная дробь (например, 1.4em). Используется реже, но полностью совместим с CSS, что упрощает коммуникацию с разработчиками.

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

Правильная настройка — это не просто выбор числа, а понимание контекста использования текста. Вот пошаговый алгоритм:

1. Определите тип текста: заголовок, подзаголовок, основной текст, подписи. Каждый требует своей высоты строки.
2. Учитывайте размер шрифта: чем больше размер, тем ниже может быть относительный line height. Например, для заголовков 32px часто хватает 110–120%, тогда как для основного текста 16px лучше использовать 140–160%.
3. Проверяйте на контрасте: добавьте фоновый цвет или тень, чтобы увидеть, не перекрываются ли строки.
4. Тестируйте в разных состояниях: расширенный текст, многострочные кнопки, динамические поля.

Для англоязычных шрифтов рекомендуемый диапазон — 1.4–1.6. Для кириллицы, из-за более высоких символов (например, «щ», «й»), лучше увеличить до 1.5–1.7. Это связано с тем, что высота строчных букв в русском алфавите в среднем на 10–15% больше, чем в латинице.

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

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

Ошибка 1: Нулевой или слишком маленький интервал

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

Ошибка 2: Жёсткая привязка к пикселям без учёта масштаба

Если вы задали line height = 20px для шрифта 14px, а потом увеличили шрифт до 20px, интервал останется прежним, что вызовет перекрытие. Лучше использовать % или em.

Ошибка 3: Разные значения в одном проекте

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

Ошибка 4: Игнорирование автоматических отступов

Некоторые шрифты имеют встроенные отступы (leading). Figma это учитывает, но не всегда корректно. Проверяйте, как текст выглядит при экспорте.

Адаптивность и межстрочный интервал в респонсивных макетах

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

При уменьшении экрана размер шрифта может меняться — например, с 18px до 16px. Если line height задан в пикселях, он не адаптируется. А вот при использовании процентов или em система автоматически пересчитает высоту строки.

Рекомендация: используйте переменные (Variables) в Figma, если работаете с последними версиями. Вы можете создать переменную для line height (например, lineHeight-body = 1.6) и применять её во всех текстовых стилях. Это обеспечит единые правила по всему проекту.

Подготовка к экспорту: как передать настройки верстальщикам

Один из главных вопросов после завершения макета: как точно передать параметры межстрочного интервала команде разработки? Figma генерирует CSS-подобный код, но важно понимать, что она показывает line height в пикселях, даже если вы задали его в процентах.

Чтобы избежать недопонимания:

• Добавьте комментарий к текстовому стилю: «Line height: 1.6em (или 160%)»;
• Используйте плагины вроде Stark или Design Lint для автоматической проверки типографики;
• Включите параметр в спецификацию проекта — например, в раздел «Typography» библиотеки компонентов.

Если вы используете design system, укажите стандартные значения line height для каждого уровня текста (heading, body, caption). Это сокращает количество вопросов от разработчиков и ускоряет реализацию.

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

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

Заключение

Межстрочный интервал в Figma — это не второстепенная настройка, а мощный инструмент контроля над восприятием текста. Он находится в правой панели свойств, в разделе «Text», и называется Line height. Его можно задавать в пикселях, процентах или em, но для большинства случаев предпочтительны относительные единицы.

• Line height находится в панели свойств справа, под размером шрифта.
• Предпочтительные единицы — % или em для адаптивности.
• Оптимальное значение для основного текста — 1.4–1.7, в зависимости от шрифта и языка.
• Используйте текстовые стили для единообразия.
• Передавайте параметры верстальщикам явно — через комментарии или спецификации.