Как в фигме выровнять текст

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

Горизонтальное выравнивание текста: 4 основных способа

В Figma вы можете задать одно из четырёх горизонтальных выравниваний для любого текстового блока: по левому краю, по центру, по правому краю или по ширине (justify). Эти опции находятся на правой панели свойств, в разделе «Text», сразу под шрифтом и размером.

Выбор типа выравнивания зависит от языка, структуры контента и общего стиля интерфейса. Например, для большинства языков с левым направлением письма (русский, английский) стандартным является левое выравнивание. Центрирование часто используется для заголовков, кнопок и модальных окон. Выравнивание по ширине применяется редко, поскольку может создавать неестественные пробелы между словами.

Для быстрого переключения используйте значки на панели:

• «Текст слева» — выравнивание по левому краю;
• «Текст по центру» — центрирование содержимого;
• «Текст справа» — выравнивание по правому краю;
• «Текст по ширине» — распределение текста равномерно по всей строке.

Если вы работаете с многоязычными проектами, помните, что для арабского или иврита предпочтительнее правое выравнивание. Figma корректно обрабатывает RTL-языки, но важно вручную проверять результат.

Как изменить выравнивание через контекстное меню

Кроме панели свойств, вы можете использовать контекстное меню. Щёлкните правой кнопкой мыши по выделенному тексту и выберите пункт «Text alignment». Здесь представлены те же четыре варианта. Этот способ удобен, если вы работаете с тачпадом или хотите ускорить процесс без перехода взгляда на правую панель.

Горячие клавиши для выравнивания текста

Figma не предоставляет встроенных горячих клавиш для изменения внутреннего выравнивания текста (в отличие от выравнивания объектов). Однако вы можете использовать плагины, такие как Text Align Shortcuts, чтобы добавить функциональность. Например, привязать Ctrl+Shift+L — для левого, Ctrl+Shift+C — для центра и т.д.

Вертикальное выравнивание текста внутри фрейма

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

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

Способ 1: Ручная настройка с padding

Если вы используете обычный фрейм, добавьте внутренние отступы (padding), чтобы визуально сместить текст. Например, если высота фрейма 60px, а высота строки 20px, добавьте по 20px сверху и снизу — текст окажется по центру.

Однако такой подход не масштабируется. При изменении текста или шрифта придётся пересчитывать отступы заново.

Способ 2: Auto Layout — лучший выбор

Auto Layout автоматически управляет пространством вокруг текста. Создайте фрейм с Auto Layout, вставьте в него текст и установите параметр «Vertical align: Center» в настройках фрейма.

• Выделите текстовый объект и нажмите «Add frame with Auto layout» (или Ctrl+Shift+A);
• На правой панели найдите раздел «Auto layout»;
• В выпадающем списке «Align items» выберите «Center»;
• Теперь текст будет автоматически центрироваться по вертикали при любом изменении высоты фрейма.

Это особенно полезно для кнопок, табов, карточек и других компонентов с динамическим контентом.

Выравнивание текста относительно других объектов

Часто задача стоит не во внутреннем выравнивании текста, а в его позиционировании относительно других элементов — иконок, изображений, полей ввода. Здесь уже работают инструменты группы «Arrange».

Пошаговая инструкция

1. Выделите текстовый объект и другие элементы, относительно которых нужно выровнять (например, иконку и заголовок).
2. На правой панели найдите блок «Arrange».
3. Нажмите одну из кнопок выравнивания: «Left», «Center horizontally», «Right», «Top», «Center vertically», «Bottom».
4. Figma выровняет все выбранные объекты относительно самого крайнего (по умолчанию) или относительно артборда, если выбрать соответствующий режим.

Чтобы задать точку отсчёта, щёлкните стрелку рядом с кнопками выравнивания и выберите «Align to selection» или «Align to page».

Использование Smart Animate и Constraints в прототипах

Если вы создаёте интерактивный прототип, где текст меняется динамически (например, переводы), важно закрепить его положение. Используйте Constraints: установите «Center» по горизонтали, если текст должен оставаться по центру при изменении ширины экрана.

Для адаптивных компонентов комбинируйте Constraints с Auto Layout — это гарантирует стабильное поведение на всех устройствах.

Правила типографики при выравнивании текста

Правильное выравнивание — часть хорошей типографики. Даже маленькие ошибки могут снижать доверие к продукту.

• Для абзацев используйте левое выравнивание. Оно обеспечивает стабильную линию начала строк, что критично для читаемости.
• Центрирование — только для коротких блоков: заголовков, подписей, CTA-текста.
• Избегайте justify в цифровых интерфейсах. Он создаёт «рваные» строки, особенно при узкой ширине контейнера.
• Для многострочного текста в кнопках или карточках используйте Auto Layout с выравниванием по центру.

Также учитывайте межстрочный интервал (line height). При слишком маленьком значении текст может визуально «проваливаться» вниз, даже если технически выровнен по центру.

Ширина текстового блока и её влияние

Идеальная ширина строки — 50–75 символов. Более широкие блоки трудно читать, особенно при левом выравнивании. Если текст выровнен по левому краю, а правый — «рваный», это нормально. Искусственное выравнивание по ширине только ухудшит ситуацию.

Распространённые ошибки и как их избежать

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

Ошибка 1: путаница между выравниванием текста и выравниванием фрейма

Многие новички думают, что если текст «по центру», значит, и фрейм тоже должен быть по центру. Но это разные вещи. Текст может быть центрирован внутри фрейма, а сам фрейм — прижат к левому краю.

Решение: всегда проверяйте, какой объект вы выделили. Используйте Outline Panel, чтобы видеть иерархию.

Ошибка 2: игнорирование Auto Layout

Работа без Auto Layout приводит к «ломающимся» макетам при изменении контента. Особенно это заметно при локализации.

Решение: делайте Auto Layout стандартом для всех компонентов, содержащих текст.

Ошибка 3: использование justify в интерфейсах

Justify создаёт неравномерные пробелы, что плохо сказывается на читаемости. В печати это приемлемо, но в цифровых продуктах — почти всегда ошибка.

Решение: заменяйте justify на левое выравнивание с ровным левым краем.

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

По его словам, один из самых эффективных приёмов — создание текстовых стилей (Text Styles) с заранее заданным выравниванием. Например, стиль «Heading / H1» — по центру, «Body / Paragraph» — по левому краю. Это исключает ошибки и ускоряет работу команды.

Также он рекомендует использовать плагины вроде Styler или Text Mirror, которые синхронизируют выравнивание и другие параметры текста между компонентами.

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

Заключение

Выравнивание текста в Figma — это не просто клик по кнопке, а осознанный выбор, влияющий на читаемость, доступность и качество продукта. Современный дизайн требует системного подхода: использование Auto Layout, стилей текста и единых правил в проекте.

Главное — понимать разницу между внутренним выравниванием текста и позиционированием объектов. Оба уровня важны и должны работать согласованно. Автоматизация через Auto Layout и плагины экономит время и снижает количество ошибок.

• Горизонтальное выравнивание задаётся в разделе Text на правой панели.
• Вертикальное выравнивание лучше всего реализуется через Auto Layout.
• Для позиционирования относительно других объектов используйте группу Arrange.
• Избегайте justify в интерфейсах — он ухудшает читаемость.
• Создавайте текстовые стили с фиксированным выравниванием для консистентности.