Как сделать отступ текста в фигме

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

Что такое отступ текста и зачем он нужен

Отступ текста — это пространство, которое отделяет текст от границ его контейнера или определяет смещение строк относительно друг друга. В типографике различают три основных типа отступов: отступ первой строки (indent), межстрочный интервал (line height/spacing) и внешние отступы (padding). Каждый из них выполняет свою функцию. Отступ первой строки помогает визуально отделить абзацы, особенно в длинных текстах. Межстрочный интервал влияет на легкость чтения — слишком маленький интервал создает ощущение «сжатости», слишком большой — разрывает ритм. Внешние отступы (padding) определяют, насколько текст «дышит» внутри рамки, будь то кнопка, карточка или блок с описанием.

Представьте, что вы читаете статью на телефоне: если текст прижат к краям экрана, глаза устают быстрее. Исследования Nielsen Norman Group показывают, что оптимальная ширина строки для чтения — 45–75 символов. Но даже при идеальной ширине отсутствие отступов превращает текст в «стену», которую трудно воспринимать. В Figma отступы — это не просто эстетика. Это элементы, влияющие на пользовательский опыт, доступность и даже конверсию.

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

Настройка отступов в Figma происходит через панель Inspect (в правой части интерфейса). Ниже — пошаговое руководство для трех основных типов отступов.

1. Отступ первой строки (Indent)
   Выделите текстовый слой. В панели Inspect найдите раздел Paragraph. Найдите поле Indent. Введите значение в пикселях (например, 20 px). Это сдвинет первую строку абзаца вправо. Для отступа слева — используйте отрицательное значение. Для выравнивания по центру или правому краю — применяйте выравнивание текста, а не отступ.
2. Межстрочный интервал (Line Height / Spacing)
   В том же разделе Paragraph найдите поле Spacing. По умолчанию оно установлено в 120% от размера шрифта. Для заголовков — 130–140%, для основного текста — 150–180%. Например, при размере шрифта 16 px установите Spacing в 24–28 px. Это обеспечит комфортное восприятие без «слипания» строк.
3. Внешние отступы (Padding)
   Отступы вокруг текстового блока задаются не в Paragraph, а через свойства Padding в разделе Layout. Нажмите на текстовый слой, перейдите в Layout → Padding. Установите значения Top, Right, Bottom, Left. Например, для карточки с текстом: 16 px сверху и снизу, 24 px по бокам. Это создаст «воздушный» фон вокруг текста.

Отличие межстрочного интервала от отступов вокруг текста

Часто дизайнеры путают Spacing (межстрочный интервал) с Padding (внешние отступы). Это фундаментальная ошибка, ведущая к несоответствию с разработкой.

| Spacing (межстрочный интервал) | Панель Inspect → Paragraph | Расстояние между строками внутри текстового блока | 16 px шрифт → Spacing 24 px |
| Padding (внешние отступы) | Панель Inspect → Layout | Расстояние от краёв текстового блока до его контейнера | Текст в кнопке: Padding 12 px сверху и снизу |
| Indent (отступ первой строки) | Панель Inspect → Paragraph | Смещение только первой строки абзаца | Оформление статьи: Indent 20 px для визуального отделения абзацев |

Эти параметры не взаимозаменяемы. Если вы хотите, чтобы текст «не прилипал» к краю карточки — используйте Padding. Если строки слипаются — увеличивайте Spacing. Если вы оформляете литературный блок с классическим абзацным отступом — применяйте Indent.

Частые ошибки при настройке отступов и как их избежать

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

• Использование только Spacing вместо Padding — если вы хотите, чтобы текст был отдалён от границ кнопки или карточки, но ставите только Spacing, вы не создаете «воздуха» — вы просто увеличиваете высоту строки. Результат: текст «вылезает» за границы.
• Слишком большой Indent — отступ в 50 px для первой строки выглядит как ошибка, а не как стилистическое решение. Используйте 10–30 px в зависимости от шрифта и контекста.
• Одинаковые отступы для всех типов текста — заголовки, подзаголовки и основной текст требуют разного подхода. Заголовки — меньше отступов снизу, основной текст — больше. Игнорирование этого нарушает визуальную иерархию.
• Неправильная привязка к контейнеру — если текстовый слой не привязан к краям контейнера (например, Auto Layout не включен), отступы могут вести себя непредсказуемо при изменении размера.

Чтобы избежать ошибок, используйте систему отступов — например, 4px, 8px, 16px, 24px, 32px. Это стандарт, принятый в Material Design и Apple Human Interface Guidelines. Применяйте его последовательно.

Лучшие практики отступов для UI-дизайна

Профессиональные дизайнеры используют отступы как инструмент управления вниманием. Вот проверенные практики:

• Для мобильных интерфейсов: минимальный Padding вокруг текста — 16 px. Для текста в кнопках — не менее 12 px сверху и снизу.
• Межстрочный интервал (Spacing) должен быть не менее 1.4x от размера шрифта. Для 14 px — не менее 20 px. Для 16 px — 24–28 px.
• Используйте Auto Layout для текстовых блоков. Это позволяет автоматически подстраивать отступы при изменении содержимого.
• Проверяйте контраст и читаемость в режиме «Темная тема». Отступы в темных интерфейсах должны быть чуть больше — иначе текст «тонет».
• Для длинных текстов (например, описания функций) применяйте отступ первой строки (Indent) только если это соответствует стилистике бренда. В цифровых продуктах чаще используют вертикальные отступы между абзацами (например, 12–16 px).

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

Экспертное мнение: как отступы влияют на UX

Эксперты подтверждают: отступы влияют на восприятие времени. Текст с хорошими отступами кажется «короче», даже если его объём не изменился. Это психология восприятия — человеческий мозг воспринимает пространство как «легкость». Чем больше «воздуха» вокруг текста, тем меньше стресса у пользователя.

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

Заключение

Отступы текста в Figma — это не мелочь, а фундаментальный элемент дизайна, влияющий на читаемость, восприятие и даже конверсию продукта. Правильное управление Indent, Spacing и Padding позволяет превратить скучный текст в удобный, приятный для глаза элемент интерфейса. Каждый пиксель отступа — это инвестиция в пользовательский опыт.

• Используйте Indent для первой строки, Spacing — для межстрочных интервалов, Padding — для внешних отступов.
• Межстрочный интервал должен быть минимум 1.4x от размера шрифта.
• Создавайте Text Styles для единообразия и быстрого обновления.
• Проверяйте отступы на мобильных экранах — там они должны быть больше.
• Отступы влияют на когнитивную нагрузку — их нельзя игнорировать даже в макетах.