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

В Figma расстояние между строками текста регулируется через параметр интерлиньяжа (line height), который можно настроить в панели свойств справа. Чтобы уменьшить расстояние, выберите текстовый элемент, найдите поле Line Height и установите значение меньше текущего — в процентах, пикселях или единицах em. Оптимальные значения зависят от шрифта и размера текста, но для компактного отображения часто используют значения от 100% до 130%.

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

Интерлиньяж — это вертикальное расстояние между базовыми линиями соседних строк текста. В типографике он играет ключевую роль в читаемости и восприятии блока текста. Слишком большое расстояние делает текст разрозненным, слишком маленькое — приводит к «слипанию» строк, особенно если используются буквы с нижними выносными элементами, такими как «g», «j», «p», «q», «y».

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

Оптимальный интерлиньяж зависит от нескольких факторов: начертания шрифта, его размера, длины строки и контекста использования. Например, для заголовков часто используется пониженный интерлиньяж — от 80% до 110%, чтобы усилить визуальную связность. Для основного текста комфортным считается диапазон 120–150%. Однако в мобильных интерфейсах иногда допускаются значения ниже 120%, если это оправдано эстетически и функционально.

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

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

1. Выберите текстовый элемент: кликните по тексту на холсте. Если нужно изменить несколько блоков, выделите их одновременно с помощью Shift или Ctrl (Cmd на Mac).
2. Откройте панель свойств: справа появится инспектор. Убедитесь, что активна вкладка Text (текст).
3. Найдите параметр Line Height: он расположен под размером шрифта (Font Size) и стилем (Font Weight). По умолчанию может быть установлено значение Auto или конкретное число.
4. Введите новое значение: кликните по полю Line Height и введите желаемое число. Можно использовать проценты (например, 90%), пиксели (16px) или относительные единицы (1.2em).
5. Проверьте результат: оцените, как выглядит текст. При необходимости скорректируйте значение, чтобы избежать наложений символов.

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

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

Допустим, у вас есть заголовок размером 32px, и текущий Line Height — 150% (48px). Вы хотите сделать его более компактным:

• Выделяем текст.
• В поле Line Height вводим 110% — получаем 35.2px.
• Оцениваем визуально: строки не сливаются, но выглядят плотнее.
• При необходимости корректируем до 100% или фиксируем в пикселях (например, 32px).

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

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

Когда лучше использовать проценты?

Проценты — наиболее универсальный вариант. Они сохраняют пропорции при изменении размера шрифта. Если вы увеличите Font Size до 24px, а Line Height задан как 120%, интервал автоматически станет 28.8px. Это удобно при создании дизайн-систем и компонентов с динамическим текстом.

Когда нужны пиксели?

Фиксированные значения в пикселях незаменимы, если вы точно знаете, какой интервал требуется. Например, в проекте может быть указано: «Заголовок H1: 32px / 36px». Здесь 36px — это Line Height. Такой подход исключает вариации и обеспечивает единообразие.

Типичные ошибки и как их избежать

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

• Слишком низкий интерлиньяж: например, 80% для обычного текста. Это вызывает визуальное давление и снижает читаемость.
• Игнорирование Auto-значений: некоторые дизайнеры всегда меняют Auto, не понимая, что оно оптимизировано под шрифт.
• Несогласованность между стилями: один и тот же уровень заголовка имеет разный Line Height в разных частях проекта.
• Отсутствие проверки на разных устройствах: текст с малым интервалом может выглядеть нормально на большом экране, но плохо читаться на смартфоне.

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

• Добавьте тестовую строку: “Hamburgefonstiv Agjpqy” — она содержит все проблемные символы.
• Увеличьте масштаб до 200–300%, чтобы увидеть наложение букв.
• Сравните с другими блоками текста в проекте — соблюдена ли иерархия?
• Используйте плагины, такие как Typography или Content Reel, для быстрой вставки реального текста.

Совместимость с браузерами и экспорт в код

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

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

• Проценты в Figma и CSS ведут себя одинаково — масштабируются относительно font-size.
• Безразмерные значения (например, 1.2) в CSS предпочтительнее, чем проценты, потому что они наследуются правильно.
• Пиксельные значения в CSS могут вызвать проблемы масштабирования на разных устройствах.

Экспериментальные подходы: CSS-совместимость и переменные шрифты

Современные технологии позволяют выходить за рамки стандартных настроек. Например, переменные шрифты (variable fonts) поддерживают динамическое управление не только весом и шириной, но и интерлиньяжем — через пользовательские оси.

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

• Подключите переменный шрифт, например, Inter Variable.
• Настройте его параметры (wght, wdth) в Figma.
• Отдельно задайте Line Height в процентах или пикселях.
• При экспорте в код разработчик может использовать ту же логику.

Такой подход особенно эффективен для адаптивных заголовков, где интерлиньяж может меняться в зависимости от ширины экрана.

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

Елена отмечает, что в Figma легко «перегнуть палку» с плотностью текста из-за высокой чёткости рендеринга на Retina-экранах. То, что выглядит нормально в макете, на реальном устройстве может показаться слишком тесным.

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

Заключение

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

• Изменяйте Line Height в правой панели Figma — параметр находится в разделе Text.
• Предпочтительные единицы — проценты или безразмерные значения для масштабируемости.
• Избегайте значений ниже 100% для основного текста.
• Тестируйте текст с выносными элементами и на разных экранах.
• Создавайте текстовые стили, чтобы обеспечить единообразие в проекте.