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

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

В современном дизайне пользовательского интерфейса внимание к деталям определяет качество восприятия продукта. Одной из таких «мелочей», которая напрямую влияет на эстетику и читаемость, является корректное выравнивание текста. В Figma, одной из лидирующих платформ для UI/UX-дизайна, этот процесс может показаться простым, но на практике вызывает вопросы у новичков и даже у опытных пользователей. Особенно когда текст не «садится» по центру, несмотря на выбранные настройки.
Проблема часто кроется не в отсутствии функций, а в непонимании логики работы Figma с текстовыми слоями, контейнерами и системой компоновки. Например, текст можно выровнять по содержимому, по родительскому фрейму или по геометрии фигуры, но каждый из этих случаев требует разных действий. Кроме того, поведение текста меняется в зависимости от использования Auto Layout, Fixed Size или свободного размещения.

Выравнивание через панель управления

Figma предоставляет мощный инструментарий для выравнивания объектов — панель «Align» в правой боковой панели Properties. Чтобы отцентрировать текст по горизонтали или вертикали относительно другого элемента, необходимо сначала выделить оба объекта: текст и контейнер (фрейм, фигуру или группу).
После выделения в панели появятся кнопки выравнивания: по левому, центральному и правому краю (горизонтальное), а также по верхнему, среднему и нижнему краю (вертикальное). Нажатие на центральную иконку по горизонтали выровняет текст точно по центру выбранного контейнера.
Для вертикального центрирования важно помнить: Figma выравнивает центр масс текстового слоя, а не его визуальную высоту. Это означает, что если у текста есть спуски (например, у букв g, y, p) или подъёмы, он может визуально казаться смещённым. Этот эффект особенно заметен при крупных шрифтах.

• Выделите текст и контейнер одновременно (удерживая Shift).
• Убедитесь, что контейнер выбран последним (он станет активным при групповом выделении).
• Нажмите на иконку «Center horizontally» или «Center vertically» в панели Align.
• Проверьте результат: текст должен быть идеально отцентрирован.

Когда использовать групповое выравнивание

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

Выравнивание внутри фигуры

Иногда дизайнеры создают кнопки или значки, используя простые фигуры (прямоугольник, круг) и помещая внутрь текст. На первый взгляд, кажется, что достаточно просто перетащить текст в центр фигуры. Но без точных инструментов это приводит к субъективному, а не технически правильному центрированию.
Чтобы текст был действительно отцентрирован внутри фигуры, нужно использовать комбинацию ручного выделения и автоматических направляющих. Figma автоматически показывает направляющие при приближении текста к центру фигуры. Эти направляющие появляются, когда центр текста совпадает с центром фигуры по X и Y.

1. Создайте фигуру (например, круг диаметром 100×100 px).
2. Добавьте текстовый слой поверх неё.
3. Перемещайте текст, пока не появятся красные направляющие, указывающие на центр.
4. Зафиксируйте положение, когда обе направляющие (горизонтальная и вертикальная) активны.

Если направляющие не срабатывают, возможно, текст находится вне области притяжения. Увеличьте масштаб (Ctrl + колесо мыши), чтобы точнее попасть в центр. Также можно временно изменить цвет фона фигуры, чтобы лучше видеть контраст с текстом.

Центрирование с помощью Auto Layout

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

• Выделите контейнер (фрейм или фигуру), в который нужно поместить текст.
• Нажмите на иконку «+» в разделе Auto Layout на правой панели или используйте Ctrl/Cmd + Shift + A.
• Поместите текстовый слой внутрь этого фрейма.
• В настройках Auto Layout найдите параметр «Horizontal align» и выберите «Center».

Если нужно центрировать текст по вертикали, установите параметр «Vertical align» в значение «Center». Это особенно удобно при создании кнопок с динамическим содержимым, где высота текста может меняться.

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

Представьте, что вы проектируете кнопку с текстом «Отправить». Создайте фрейм 200×50 px, примените к нему Auto Layout, добавьте текст и установите Cross axis alignment в «Center». Теперь, даже если вы измените шрифт или размер текста, он останется по центру. Это спасает часы времени при итерациях.

Текстовое выравнивание внутри блока

Не путайте позиционирование текстового слоя с выравниванием текста внутри самого слоя. Даже если текстовый блок идеально отцентрирован в фрейме, сами символы могут быть выровнены по левому краю. Это создаёт визуальный дисбаланс.
В Figma есть три типа выравнивания текста внутри текстового слоя:

• Left-aligned — текст прижат к левому краю.
• Center-aligned — каждая строка текста центрируется по ширине блока.
• Right-aligned — текст прижат к правому краю.

Чтобы центрировать текст по содержимому, выделите текстовый слой и в панели Properties найдите иконки выравнивания текста (три вертикальные линии с точками). Выберите центральную иконку. Теперь, даже если текст занимает не всю ширину, он будет визуально центрирован.

Мультистрочный текст и переносы

Если текст занимает несколько строк, важно, чтобы каждая строка была выровнена одинаково. При центрировании длинных заголовков убедитесь, что слова не разрываются неестественно. Иногда лучше вручную вставить перенос строки (Shift + Enter), чем полагаться на автоматический.

Ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при центрировании текста в Figma. Знание этих ловушек помогает экономить время и избегать правок на этапе передачи макета разработчикам.
Первая ошибка — смешивание методов. Например, вы применяете Auto Layout с центрированием, но затем вручную сдвигаете текст. Это нарушает логику компоновки и приводит к сбоям при изменениях. Лучше выбрать один подход и придерживаться его.
Вторая ошибка — игнорирование bounding box. Текстовый слой в Figma имеет свои границы, которые могут не совпадать с визуальной высотой шрифта. Это особенно актуально для шрифтов с большими интерлиньяжами. Используйте плагины вроде «Text Bounds Fixer», чтобы корректировать эти расхождения.
Третья ошибка — отсутствие тестирования на разных размерах. Центрированный текст в макете 400×200 px может выглядеть идеально, но при адаптации под мобильный экран сместиться. Решение — использовать Auto Layout и constraints.

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

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

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

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

Заключение

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

• Для точного центрирования используйте панель Align после выделения текста и контейнера.
• Auto Layout — лучший способ для адаптивных компонентов с автоматическим центрированием.
• Не забывайте выравнивать текст и внутри текстового слоя (по центру, а не по левому краю).
• Избегайте смешивания методов — это нарушает целостность макета.
• Тестируйте центрирование на разных размерах экрана и с разным контентом.