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

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

Чтобы изменить расстояние между строками в Figma, выберите текстовый слой, откройте панель свойств справа и найдите поле «Line Height». Установите значение в пикселях, процентах или как «multiplier» (например, 1.5). Рекомендуется использовать относительные значения для масштабируемости и согласованности в системе дизайна.

Содержание статьи:

Что такое line height и зачем он нужен
Как изменить расстояние между строками в Figma
Единицы измерения: px, %, multiplier — в чём разница
Лучшие практики: от чего зависит оптимальное расстояние
Частые ошибки и как их избежать
Настройка типографической системы в Figma
Экспертное мнение: почему это важно для UX
Вопросы и ответы
Заключение

Что такое line height и зачем он нужен

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

В вебе и мобильных приложениях line height напрямую влияет на конверсию. Исследования Google показывают, что оптимизированный межстрочный интервал может повысить удержание пользователей на странице до 18%. Это особенно критично для текстовых интерфейсов: инструкций, статей, форм регистрации, описаний продуктов. В Figma вы не просто «дизайнируете» — вы создаёте условия для эффективного взаимодействия.

Полезно знать: Line height не равен font size. Это отдельный параметр, который может быть больше, меньше или равен размеру шрифта. Например, при font size 16px line height 24px — это 1.5x, что считается стандартом для текста.

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

Изменить line height в Figma можно всего за три действия. Этот процесс одинаков для всех типов текстовых слоёв — от заголовков до длинных абзацев.

Выберите текстовый слой на холсте. Можно кликнуть по тексту или найти его в панели Layers.
Откройте панель свойств справа — она автоматически подгрузит все типографические параметры выбранного слоя.
Найдите поле «Line Height» (обычно ниже «Font Size» и рядом с «Letter Spacing»). Кликните в поле и введите нужное значение.

После ввода значения Figma мгновенно обновит отображение текста. Вы увидите, как строки «раздвигаются» или «сжимаются». Не забудьте проверить результат на разных размерах экрана — особенно если текст адаптивный. Для быстрого доступа можно использовать клавиатурные сочетания: выделите текст и нажмите Cmd+Shift+↑ (увеличить) или Cmd+Shift+↓ (уменьшить) на macOS, или Ctrl+Shift+↑/↓ на Windows.

«Используйте горячие клавиши для тонкой настройки — это экономит время и снижает вероятность ошибок при ручном вводе. Особенно полезно при работе с множеством текстовых слоёв.» — Анна Соколова, UX-дизайнер, 7 лет в продуктовых командах

Единицы измерения: px, %, multiplier — в чём разница

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

Единица	Как работает	Когда использовать
px (пиксели)	Фиксированное значение. Например, 20px. Независимо от размера шрифта.	Для заголовков, где нужно точное позиционирование. Не рекомендуется для текста с переменным размером.
% (проценты)	Рассчитывается от font size. Например, 150% при font size 16px = 24px.	Когда вы хотите, чтобы интервал пропорционально масштабировался с размером шрифта.
multiplier (коэффициент)	Умножает font size на число. Например, 1.5 = 1.5 × font size.	Лучший выбор для текстовых блоков, особенно в системах дизайна. Рекомендуется Figma и Google Material.

Многие дизайнеры ошибочно используют px для всего текста — это создаёт проблемы при адаптации. Представьте: вы сделали текст 14px с line height 20px, а потом решили увеличить шрифт до 18px для мобильной версии. Старый line height 20px теперь слишком мал — буквы будут «давить» друг на друга. Если же вы использовали multiplier 1.4, то при 18px он автоматически станет 25.2px — идеально.

Полезно знать: В Figma по умолчанию используется multiplier. Если вы видите просто число без единиц — это коэффициент. Например, «1.5» = 1.5x.

Лучшие практики: от чего зависит оптимальное расстояние

Оптимальный line height зависит от трёх факторов: размера шрифта, длины строки и типа шрифта. Ниже — универсальные рекомендации, основанные на исследованиях в области типографики и UX.

Для основного текста (14–18px): используйте multiplier 1.4–1.6. Это золотая середина — текст легко сканируется, глаза не устают.
Для заголовков (20px+): можно уменьшить до 1.2–1.3. Заголовки короткие, и избыточный интервал разрушает их вес и компактность.
Для длинных абзацев (например, в статьях): увеличьте до 1.6–1.8. Это снижает когнитивную нагрузку и улучшает удержание.
Для sans-serif шрифтов (Inter, Roboto, SF Pro): допустимы меньшие значения — они более «чистые» и хорошо читаются.
Для serif шрифтов (Lora, Georgia, Playfair): лучше использовать 1.5–1.7. Их детализация требует больше воздуха.

Также учтите длину строки (line length). Если строка длиннее 70–80 символов, увеличьте line height на 0.1–0.2. Иначе пользователь будет теряться при переходе с конца одной строки на начало следующей.

«Проверяйте читаемость на реальных устройствах. То, что выглядит идеально на 27-дюймовом мониторе, может быть проблемой на iPhone 15.» — Дмитрий Кузнецов, UX-консультант, специализируется на мобильных интерфейсах

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки, которые снижают качество интерфейса.

Использование фиксированного px для всего текста. Решение: всегда используйте multiplier для основного текста. Создайте стиль текста с привязкой к системе.
Слишком маленький line height (меньше 1.2). Особенно опасен при использовании шрифтов с длинными descenders (например, «g», «y», «p»). Буквы будут «врезаться» в нижнюю строку.
Слишком большой line height (более 2.0). Текст становится «рассыпчатым», теряется связь между предложениями. Читатель не воспринимает текст как единое целое.
Игнорирование line height при копировании стилей. Если вы копируете текст из одного слоя в другой, Figma может не сохранить line height, если стили не синхронизированы. Всегда проверяйте свойства в панели.
Не проверяете на тёмной теме. На тёмном фоне текст кажется «плотнее». Увеличьте line height на 0.1–0.2 для контрастных тем.

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

Полезно знать: Figma позволяет экспортировать стили в CSS. Если вы используете Figma как источник для разработки — убедитесь, что line height передаётся как unitless multiplier (например, line-height: 1.5), а не в px. Это гарантирует адаптивность в коде.

Настройка типографической системы в Figma

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

Откройте панель «Text Styles» в правой части интерфейса (или через меню «Styles» → «Text Styles»).
Нажмите «+» и создайте стиль: например, «Heading 1», «Body Large», «Caption».
Для каждого стиля установите: font, size, weight, line height, letter spacing, и цвет.
Привяжите line height как multiplier: например, Body Large — 16px, line height 1.5.
Используйте этот стиль везде. Не создавайте новые текстовые слои без привязки к стилю.

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

«Типографическая система — это не просто удобство, это основа масштабируемого дизайна. Без неё вы не сможете поддерживать качество при росте продукта.» — Елена Петрова, Lead Designer в SaaS-стартапе с 50+ экранами

Экспертное мнение: почему это важно для UX

«Я работал над проектом для банка, где пользователи старшего возраста жаловались, что текст “слипается”. Мы увеличили line height с 1.2 до 1.6 — и конверсия на регистрации выросла на 22%. Это не мелочь. Line height влияет на восприятие доверия, профессионализма и даже безопасности. Если человек не может прочитать инструкцию — он не доверяет продукту.»

— Алексей Морозов, UX-исследователь, 12 лет в области цифрового дизайна, автор курса «Типографика для интерфейсов»

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

— он снижает когнитивную нагрузку и предотвращает ошибки пользователей.

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

Можно ли изменить line height для части текста внутри одного слоя?

Да, в Figma можно выделить фрагмент текста (например, одно слово или предложение) и задать ему отдельный line height. Это полезно для акцентов, но используйте редко — чтобы не нарушать единство стиля.

Почему line height не применяется к тексту в компоненте?

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

Как сделать line height одинаковым для всех текстовых слоёв сразу?

Создайте текстовый стиль и примените его ко всем нужным слоям. Затем редактируйте стиль — изменения применятся автоматически. Это единственный надёжный способ масштабировать типографику.

Влияет ли line height на производительность Figma?

Нет. Даже если у вас тысячи текстовых слоёв, Figma оптимизирует отрисовку. Но неоптимизированные стили (например, 50 разных line height для параграфов) усложнят поддержку и проверку дизайна.

Как проверить, что line height подходит для доступности?

Следуйте WCAG: рекомендуется 1.5x для основного текста. Используйте плагин «Contrast Checker» или «Stark» для Figma, чтобы протестировать читаемость на разных фонах.

Заключение

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

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

Всегда используйте multiplier (например, 1.5) вместо фиксированных пикселей для основного текста.
Создавайте и используйте текстовые стили — это гарантирует согласованность и ускоряет работу.
Проверяйте line height на разных устройствах и в тёмной теме — он должен работать везде.
Для длинных текстов увеличивайте интервал до 1.6–1.8, для заголовков — уменьшайте до 1.2–1.3.
Line height — это часть типографической системы, а не разовая настройка. Относитесь к нему как к стратегическому элементу дизайна.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

Редакция не допускает публикаций, содержащих пропаганду экстремизма, терроризма, наркотических средств или суицида; подобные материалы подлежат немедленному удалению.

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.