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

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

Чтобы изменить межстрочный интервал в Figma, выделите текстовый элемент и в правой панели свойств найдите поле Line height. Вы можете указать значение в пикселях, процентах или использовать множитель (например, 1.4). Для единообразия в проектах рекомендуется использовать стили текста с предустановленным интервалом.

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

Что такое межстрочный интервал и почему он важен
Как изменить межстрочный интервал в Figma: пошаговая инструкция
Пример: настройка интервала для абзаца
Единицы измерения межстрочного интервала: px, %, em, auto
Создание и использование текстовых стилей с кастомным интервалом
Преимущества использования стилей
Типичные ошибки при настройке интервала и как их избежать
Ошибка 1: Использование Auto без проверки
Ошибка 2: Разный интервал для одного типа текста
Ошибка 3: Игнорирование влияния на макет
Роль межстрочного интервала в дизайн-системах и компонентах
Интеграция с кодом
Экспертное мнение
Вопросы и ответы
Заключение

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

Межстрочный интервал, или line height, — это вертикальное расстояние между базовыми линиями соседних строк текста. В типографике он играет критическую роль: слишком маленький интервал делает текст плотным и трудным для чтения, особенно при длинных абзацах, а слишком большой — разрывает визуальную связь между строками, снижая скорость восприятия.
В цифровом дизайне этот параметр особенно важен, поскольку пользователи часто сканируют контент, а не читают его внимательно. Исследования Nielsen Norman Group показывают, что оптимальный межстрочный интервал для веб-интерфейсов составляет от 1.4 до 1.6 относительно размера шрифта. Это повышает читаемость на 20–30% по сравнению с интервалом по умолчанию.
Figma позволяет точно контролировать этот параметр, что делает его мощным инструментом для создания удобных интерфейсов. Более того, корректная настройка интервала помогает избежать переполнения контейнеров, проблем с выравниванием и сложностей при передаче макетов разработчикам.

Полезно знать: Межстрочный интервал в Figma влияет не только на внешний вид, но и на автоматическое масштабирование компонентов. Неправильное значение может привести к «наезду» текста на соседние элементы при динамическом изменении содержимого.

Как изменить межстрочный интервал в Figma: пошаговая инструкция

Изменение межстрочного интервала в Figma — простая, но точная операция. Ниже приведён пошаговый алгоритм для разных сценариев использования.

Откройте ваш файл в Figma и выберите текстовый объект с помощью инструмента Text Tool (T).
В правой панели свойств найдите раздел Text. Здесь отображаются все параметры шрифта, включая размер, начертание и межстрочный интервал.
Найдите поле с надписью Line height. По умолчанию оно может быть установлено в значение Auto или конкретное число.
Щёлкните по полю и введите новое значение. Вы можете использовать:
- Фиксированное значение в пикселях (например, 24px)
- Проценты от размера шрифта (например, 150%)
- Множитель (например, 1.5)
Нажмите Enter. Изменения применяются мгновенно.

Если вы работаете с несколькими текстовыми блоками, можно выделить их одновременно (удерживая Shift) и изменить интервал для всех сразу. Это полезно при массовой настройке заголовков или абзацев.

Пример: настройка интервала для абзаца

Допустим, у вас есть абзац с размером шрифта 16px. Чтобы обеспечить хорошую читаемость, установите межстрочный интервал в 1.5. Figma автоматически рассчитает это как 24px (16 × 1.5). Такое соотношение соответствует рекомендациям W3C по доступности контента.

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

Единицы измерения межстрочного интервала: px, %, em, auto

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

Единица	Описание	Когда использовать
px (пиксели)	Абсолютное значение. Не зависит от размера шрифта.	Когда нужно жёстко зафиксировать высоту строки, например, в кнопках или карточках с ограниченным пространством.
% (проценты)	Относится к размеру текущего шрифта. Например, 150% от 16px = 24px.	Для адаптивных макетов, где текст масштабируется, но пропорции должны сохраняться.
em / множитель (например, 1.4)	Безразмерная единица, эквивалентная текущему размеру шрифта. Наиболее гибкая.	В дизайн-системах и компонентах, где важна согласованность при изменении размера текста.
Auto	Figma автоматически рассчитывает интервал на основе шрифта и системы.	На этапе прототипирования, но не рекомендуется для финальных макетов.

Выбор единицы измерения зависит от контекста. Например, при создании мобильного интерфейса с фиксированными размерами лучше использовать пиксели. А в веб-дизайне, где текст может адаптироваться под разные экраны, предпочтителен множитель.

Полезно знать: Значение Auto может различаться в зависимости от шрифта. Например, Inter и Roboto имеют разные внутренние метрики, поэтому один и тот же текст с Auto будет выглядеть по-разному.

Создание и использование текстовых стилей с кастомным интервалом

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

Настройте текстовый блок: задайте шрифт, размер, цвет и нужный межстрочный интервал.
Выделите этот блок и в правой панели нажмите значок Create style рядом с выпадающим списком текстовых стилей.
Введите имя стиля, например, «Body/Medium/16px/1.5».
Нажмите «Create». Стиль сохраняется в библиотеке проекта.

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

Преимущества использования стилей

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

«Именуйте текстовые стили по принципу: [Назначение]/[Начертание]/[Размер]/[Интервал]. Например, “Heading/Bold/24px/1.3”. Это делает библиотеку структурированной и понятной для всей команды.» — Дмитрий Ковалёв, руководитель дизайн-студии Loft

Типичные ошибки при настройке интервала и как их избежать

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

Ошибка 1: Использование Auto без проверки

Многие полагаются на значение Auto, считая его оптимальным. Однако Figma не всегда корректно рассчитывает интервал, особенно для нестандартных шрифтов. Это может привести к слишком плотному или, наоборот, размытому тексту.
Решение: всегда проверяйте результат визуально. Если текст «давит» или теряет читаемость, задайте интервал вручную.

Ошибка 2: Разный интервал для одного типа текста

В крупных проектах часто встречаются ситуации, когда абзацы имеют разный межстрочный интервал — 1.4, 1.5, 1.6 — просто потому что каждый дизайнер настроил по-своему.
Решение: внедрите текстовые стили и регулярно проводите аудит типографики. Используйте плагины вроде Stylify или Typography Manager для автоматического анализа.

Ошибка 3: Игнорирование влияния на макет

Изменение интервала может повлиять на высоту контейнера, положение соседних элементов и общую структуру макета. Особенно это критично в автолейаутах.
Решение: при использовании Auto Layout проверяйте, как изменение интервала влияет на размеры фреймов. При необходимости настройте constraints или padding.

Полезно знать: В Figma нет встроенного предупреждения о том, что изменение интервала может повлиять на макет. Будьте внимательны при редактировании текста внутри компонентов.

Роль межстрочного интервала в дизайн-системах и компонентах

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

Заголовки (H1–H6): от 1.2 до 1.4
Основной текст: 1.5
Подписи и мелкий текст: 1.3–1.4

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

Интеграция с кодом

Когда разработчики реализуют интерфейс, они используют те же значения, что и в Figma. Современные инструменты вроде Zeplin, Figma Dev Mode или Tokens Studio позволяют экспортировать типографские переменные, включая line-height, в формате CSS или JSON.

«Если вы передаёте макет разработчикам, убедитесь, что значения интервала указаны явно — не как “Auto”, а как конкретное число. Это исключает недопонимание и сокращает количество правок.» — Елена Смирнова, технический дизайнер, Тинькофф

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

Правильная настройка межстрочного интервала — это не просто вопрос вкуса, а вопрос доступности и юзабилити. Эксперты в области UX и типографики подчёркивают, что даже небольшие изменения могут значительно улучшить пользовательский опыт.
Оптимальный интервал зависит от нескольких факторов: размера шрифта, длины строки, веса начертания и контекста использования. Например, для текста в одну колонку на сайте подойдёт интервал 1.6, а для компактного списка в мобильном приложении — 1.3.
Важно также учитывать культурные особенности. В русскоязычных интерфейсах, где слова часто длиннее, чем в английском, может потребоваться чуть больший интервал, чтобы избежать визуального перегруза.

Полезно знать: Figma позволяет использовать переменные (Variants) в сочетании с текстовыми стилями. Это значит, что вы можете создать компонент с разными вариантами текста, каждый из которых имеет свой интервал — например, «Compact» и «Comfortable».

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

Можно ли изменить межстрочный интервал для части текста в одном блоке?

Да, Figma поддерживает частичное форматирование. Выделите нужные символы или строки, затем в панели свойств измените Line height только для этой части. Это полезно для акцентов или цитат.

Почему после изменения интервала текст «съезжает» в макете?

Это происходит, если контейнер имеет фиксированную высоту или если используется Auto Layout без корректных настроек. Решение — либо отключить фиксированную высоту, либо настроить vertical overflow в Auto Layout.

Как синхронизировать интервал между несколькими файлами Figma?

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

Поддерживают ли переменные Figma межстрочный интервал?

На момент марта 2026 года Figma Variables позволяют управлять цветами, размерами текста и расстояниями, но line-height пока не поддерживается напрямую. Однако можно использовать кастомные токены через сторонние плагины.

Что делать, если шрифт «обрезается» сверху или снизу?

Это связано с внутренними метриками шрифта. Попробуйте увеличить интервал на 10–15% или добавьте padding к контейнеру. Также проверьте, не включён ли режим «Text baseline alignment» в Auto Layout.

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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