Настройки текста в Figma

Шрифты, верстка и эффекты

Опубликовано: 23.01.2026

784 Гайды

Дизайн

Автор

Ирина Мартишкина

Автор «Конверта», копирайтер-фрилансер

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

В статье разберем настройки типографики с помощью стандартных инструментов Figma и бесплатных плагинов.

Как создать текст в Figma

Добавить текст в рабочее поле можно двумя способами: нажать на значок буквы «Т» в нижнем меню либо — на ту же горячую клавишу.

Базовые настройки текста

Разбираем, что можно сделать со стандартными инструментами Figma.

Типографика

Шрифт. В Figma есть много шрифтов для заголовков и основного текста, включая классические Inter, Roboto, Source Serif Pro, а также множество редких.

Для многих шрифтов можно выбирать начертание: Thin, Light, Regular, Medium, Semibold, Bold (тонкий, легкий, стандартный, средний, полужирный, жирный). Это нужно для создания визуальной иерархии и расставления акцентов. Например, можно выделить жирным шрифтом заголовки и ключевые мысли.

Размер. Ничем не ограничен, настраивается произвольно. Нужно просто указать число в поле.

Выравнивание. Доступно 3 базовых варианта выравнивания: по левой стороне, по правой и по центру.

15 стильных шрифтов для логотипов с поддержкой кириллицы

Дополнительно можно установить вертикальное выравнивание: по верху, центру и низу. Чтобы это применить, контейнер должен быть больше самого текста.

Выравнивание текста по вертикали в Figma

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

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

Сначала нужно скачать и установить шрифт на ПК. Для примера возьмем бесплатный шрифт с сайта.

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

В открывшемся окне нажимаем «Установить».

15 дизайнерских шрифтов для привлечения внимания

Дальше скачиваем и устанавливаем Figma Font Installers. Есть версии для Windows и MacOS. Утилита распознает все шрифты, которые есть на компьютере, и позволяет использовать их в дизайне.

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

Расположение, компоновка (лейаут)

Ширина. Текст располагается горизонтально, при дополнении выстраивается в линию.

Высота. Текст располагается внутри контейнера с заданной шириной, а высота увеличивается при добавлении текста.

Фиксированный размер. Ширина и высота контейнера не меняется при уменьшении/увеличении объема текста.

Автолейаут. Автоматическая раскладка в Figma — это заданные параметры расположения объектов, включая направление, размеры, расстояние между элементами и прочее.

Например, если установить лейаут по вертикали, элементы выстроятся сверху вниз:

По горизонтали:

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

Например: добавили больше текста — высота равномерно увеличилась, но отступы сохранились.

Такие раскладки можно использовать для создания собственных шаблонов.

Повороты и отражение по вертикали/горизонтали. Текст можно поворачивать, наклонять.

12 принципов гештальта в дизайне

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

Если же нужно подписать какой-то элемент дизайна, и строгость не нужна, можем аккуратно повернуть текст до желаемого положения.

Также текст можно отразить по вертикали и горизонтали. Это пригодится для создания эффекта тени, например.

Слои: как передвинуть на передний/задний план. Представим, что нам нужно подписать картинку, а для этого — наложить текст поверх нее.

Есть 2 варианта действий:

Кликаем по тексту, нажимаем правую кнопку мыши, и в открывшемся списке выбираем Bring to front — «На передний план». Либо нажимаем горячую клавишу — «]» (правая квадратная скобка).
Смотрим на панель слоев слева — Layers. Находим нужные элементы и ставим текст выше картинки: зажимаем левую кнопку мыши и перетаскиваем.

Готово: теперь надпись находится на изображении.

Оформление текста

Для текста настраиваются цвета, границы, тени и другие эффекты:

(гифка тяжеловесная в папке — №20)

Альт: Оформление текста в Figma

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

Как перевести текст в вектор

Нажимаем на текстовый блок, кликаем правую кнопку мыши, в открывшемся меню выбираем Outline Stroke. Либо нажимаем сочетание клавиш Ctrl + Shift + O. После этого текст превратится в векторный объект. Его можно свободно редактировать: менять форму букв, наклон и прочее.

Как вставить картинку внутрь текста

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

Выделяем оба слоя, кликаем правую кнопку мыши и выбираем «Использовать как маску»/нажимаем Ctrl + Alt + M.

Готово. Картинка располагается только внутри текста.

Плагины для классного дизайна и удобной работы с текстом

Изогнуть текст, сделать его в виде арки, волны, круга. Плагины: Text ARC, Curve Text, Circular Text

Особенности Text ARC: выбор радиуса, поворота дуги, стартового и конечного угла, размера шрифта. Есть готовые варианты и простор для кастомизации.

Особенности Curve Text: подбор шрифтов, несколько вариантов изгиба, настройка размера шрифта, межбуквенного расстояния и расположения текста на линии. Есть превью.