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

В дизайне интерфейсов правильное расстояние между строками текста — ключевой фактор читаемости и визуальной гармонии. В Figma, как в одном из самых популярных инструментов для UI/UX-дизайна, настройка межстрочного интервала (line height) реализована гибко и интуитивно, но не всегда очевидно для новичков. Уменьшить расстояние между строками можно через панель свойств текста, где доступен параметр Line Height. Достаточно выбрать текстовый фрейм, найти этот параметр и задать нужное значение в пикселях, процентах или относительных единицах (em). Главное — сохранять баланс: слишком маленькое расстояние ухудшает восприятие, особенно при локализации или на мобильных экранах.

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

Межстрочный интервал, или line height, — это вертикальное пространство между базовыми линиями соседних строк текста. Он напрямую влияет на то, насколько легко пользователь может читать контент в интерфейсе. Слишком большое расстояние делает текст разрозненным, а слишком маленькое — приводит к «слипанию» строк, особенно если шрифт имеет высокие восходящие или нисходящие элементы (например, буквы «b», «p», «g»).
В веб- и мобильном дизайне правильный line height помогает создать ритм и иерархию. Это особенно важно при работе с многоязычными проектами, где одни и те же стили могут по-разному отображаться в разных языках. Например, кириллица часто требует чуть большего интервала, чем латиница, из-за более высоких символов.
Плохая типографика снижает конверсию. По данным Nielsen Norman Group, интерфейсы с плохо подобранным межстрочным интервалом вызывают у пользователей усталость глаз и увеличивают время чтения на 20–30%. Это значит, что даже незначительная ошибка в настройке line height может повлиять на юзабилити продукта.

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

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

1. Выделите текстовый элемент — кликните по тексту на холсте. Если текст состоит из нескольких фреймов, убедитесь, что выбран именно тот блок, который нужно изменить.
2. Перейдите в правую панель Inspector — там отобразятся все свойства текста, включая шрифт, размер, цвет и интервалы.
3. Найдите параметр Line Height — он расположен в разделе Text, сразу после Font Size. По умолчанию может быть указано значение в процентах (например, 140%) или в пикселях.
4. Уменьшите значение — введите новое число. Чтобы сузить интервал, задайте меньшее значение. Например, если было 28px, попробуйте 24px.
5. Проверьте результат — оцените, как выглядит текст. Убедитесь, что строки не соприкасаются, а символы не перекрываются.

Если вы используете текстовые стили (Text Styles), изменения затронут все экземпляры этого стиля. Это удобно для масштабирования, но требует осторожности: случайное изменение общего стиля может повлиять на весь дизайн-систему.

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

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

На практике большинство дизайнеров предпочитают пиксели, потому что они дают предсказуемый результат. Например, если font size = 16px, а line height = 20px, вы точно знаете, что между строками будет 4px свободного пространства (по 2px сверху и снизу).
Однако при работе с дизайн-системами или компонентами, которые должны масштабироваться, лучше использовать относительные значения. Это позволяет тексту адаптироваться под разные размеры без ручной корректировки.

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

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

• Игнорирование пробелов вокруг символов — некоторые шрифты (особенно рукописные или декоративные) имеют внутренние отступы. Уменьшая line height, можно обрезать части букв. Решение: проверяйте крайние символы («j», «y», «g») и оставляйте запас.
• Единый стиль для всех экранов — использование одного line height для мобильных и десктопных версий. На маленьких экранах текст должен «дышать» больше. Рекомендация: увеличивайте интервал на 10–15% для мобильных устройств.
• Редактирование стилей без согласования — изменение shared text style может сломать макеты у других дизайнеров. Перед правками уведомляйте команду или создавайте дубликат стиля.
• Слишком маленький интервал в многострочных полях — особенно актуально для форм, чатов, списков. Плотные строки утомляют глаз. Минимальный комфортный line height — 1.3–1.4 от размера шрифта.

Также стоит помнить, что Figma не всегда корректно импортирует line height из внешних источников (например, Sketch или Adobe XD). При переносе макетов проверяйте интервалы вручную.

Рекомендации по типографике в интерфейсах

Правильная типографика — это не только про красоту, но и про функциональность. Вот несколько проверенных практик, которые помогут вам грамотно настроить расстояние между строками.

• Следуйте принципу 1.4–1.6 — для основного текста (body text) оптимальный множитель line height составляет 1.4–1.6 от font size. Например, при 16px — 22–26px.
• Используйте grid-алignment — в Figma можно включить сетку, чтобы строки текста выравнивались по общей вертикальной сетке интерфейса. Это создаёт визуальную стабильность.
• Тестируйте с реальными данными — макеты с Lorem Ipsum могут скрывать проблемы. Подставьте настоящий текст — особенно длинные слова или цепочки цифр.
• Учитывайте язык — кириллица, китайский, арабский — каждый алфавит имеет свои особенности. Кириллические шрифты часто выше латинских, поэтому может потребоваться увеличение интервала.
• Автоматизируйте через плагины — существуют плагины вроде Auto Line Height или Typography Manager, которые помогают быстро применять стандарты ко всем текстовым элементам.

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

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

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

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

Заключение

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

• Line height регулируется в правой панели Figma через параметр Line Height.
• Пиксели (px) дают максимальный контроль, проценты и em — гибкость.
• Оптимальный интервал для основного текста — 1.4–1.6 от размера шрифта.
• Избегайте обрезки символов и тестирование с реальными данными.
• Используйте массовое редактирование и плагины для эффективной работы.