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

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

Основные шаги добавления текста

Добавление текста в Figma начинается с активации специального инструмента. На левой боковой панели найдите значок буквы «Т» — это инструмент Text. Кликните по нему, чтобы активировать. После этого курсор превратится в вертикальную черту, указывающую, что вы готовы вводить текст.
Теперь просто кликните в любом месте холста. Появится текстовое поле, и вы сможете сразу начать печатать. Если кликнуть один раз — получится динамическое поле, которое растягивается по мере ввода. Если зажать левую кнопку мыши и выделить область, текст будет ограничен этим прямоугольником и переноситься на новую строку автоматически.
После ввода текста его можно перемещать, изменять размеры поля или редактировать содержимое. Достаточно дважды щёлкнуть по тексту, чтобы снова войти в режим редактирования. Figma сохраняет все изменения в реальном времени, особенно если вы работаете в команде.

Быстрые действия после добавления текста

• Перемещение текста: выберите объект с помощью стрелки (V) и перетащите его по холсту.
• Копирование и вставка: используйте Ctrl+C / Ctrl+V (Cmd+C / Cmd+V на Mac).
• Удаление: выделите текст и нажмите Delete.
• Группировка: выделите текст вместе с другими элементами и нажмите Ctrl+G (Cmd+G), чтобы сгруппировать.

Figma также поддерживает сочетания клавиш для форматирования: Ctrl+B (жирный), Ctrl+I (курсив), Ctrl+U (подчёркнутый). Эти комбинации работают только при активном редактировании текста.

Настройка форматирования и стилей

После добавления текста основные параметры настраиваются в правой панели — Inspector. Здесь вы найдёте раздел Text, где можно изменить шрифт, размер, насыщенность, межстрочный интервал (leading), выравнивание, цвет и другие свойства.
Шрифты загружаются из Google Fonts или локальной системы, если они установлены. Figma синхронизирует доступные шрифты автоматически. Если нужный шрифт не отображается, убедитесь, что он активирован в вашем аккаунте Figma или установлен в системе.
Цвет текста задаётся через поле Fill. Можно выбрать сплошной цвет, градиент или даже изображение в качестве заливки. Однако использование градиентов и изображений требует осторожности: это может снизить читаемость.

Выравнивание и ориентация текста

Figma позволяет выравнивать текст по левому краю, по центру, по правому краю и по ширине. Для заголовков чаще используется центрирование, для основного текста — левое выравнивание. Выбор зависит от языка и направления чтения.
Также доступно вертикальное расположение текста. Чтобы повернуть текст, используйте инструмент Rotate (R) или задайте угол поворота вручную в разделе Transform на правой панели.

Работа с многострочным текстом и автовыравниванием

Когда вы создаёте текстовое поле с фиксированной шириной, Figma автоматически переносит строки. Это особенно важно для абзацев, карточек и блоков с динамическим контентом. Управлять переносом можно через параметры Overflow.
В разделе Text вы найдёте опцию Text Wrapping:

• Overflow: текст продолжается за пределы поля (горизонтально).
• Truncate: текст обрезается, в конце добавляется многоточие.
• Wrap: текст переносится на новую строку.

Для многострочных блоков рекомендуется использовать Wrap. Это обеспечивает лучшую читаемость и контроль над макетом.
Auto Layout — мощный инструмент, который позволяет текстовым блокам динамически изменять высоту при редактировании содержимого. Чтобы применить Auto Layout, выделите текстовый объект и нажмите кнопку «+» в правой панели рядом с Auto Layout.

Пример использования Auto Layout с текстом

1. Добавьте текстовый блок с абзацем.
2. Выберите его и включите Auto Layout (Ctrl+Shift+А).
3. Установите направление Vertical.
4. Настройте padding и gap, если нужно.
5. Теперь при изменении текста контейнер будет автоматически увеличиваться по высоте.

Использование Text Styles и компонентов

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

• Выделите текстовый объект с нужным форматированием.
• В правой панели нажмите значок квадрата рядом с параметрами текста.
• Введите название стиля, например, «Heading/H1» или «Body/Regular».
• Нажмите «Create style».

После этого стиль станет доступен во всех файлах вашей команды (если используется Team Library). Вы сможете применять его к любым текстовым объектам одним кликом.

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

Text Styles можно использовать внутри компонентов. Например, создайте кнопку как компонент, назначьте её тексту стиль «Button/Large». Теперь при изменении стиля во всей библиотеке все экземпляры кнопок обновятся автоматически.
Это особенно важно при работе в больших командах или над масштабными проектами. Изменение единого стиля влияет на сотни макетов — без необходимости ручного редактирования.

Совет по работе с типографикой в Figma

Хорошая типографика — это не просто красивые шрифты. Это иерархия, читаемость, доступность и соответствие бренду. В Figma есть всё необходимое, чтобы реализовать профессиональный подход.
Начните с создания типографской шкалы. Определите 3–5 уровней: заголовок, подзаголовок, основной текст, подписи, метки. Для каждого уровня задайте шрифт, размер, вес, интерлиньяж и цвет.
Используйте плагины для анализа доступности текста. Например, Contrast Checker поможет убедиться, что цвет текста соответствует нормам WCAG по контрасту. Это критично для пользователей с нарушениями зрения.

Проверка читаемости

• Минимальный размер текста — 14px для интерфейсов.
• Контраст текста и фона должен быть не менее 4.5:1 (для обычного текста).
• Избегайте светлого текста на светлом фоне и тёмного на тёмном.
• Не используйте только цвет для передачи информации (например, красный = ошибка).

Часто задаваемые вопросы

Заключение

Работа с текстом в Figma — это не просто ввод слов, а проектирование коммуникации. От правильно выбранного шрифта до продуманной иерархии и стилей зависит, насколько эффективно пользователь воспримет ваш интерфейс. Владение инструментами текста делает вас не просто исполнителем, а стратегом визуального сообщения.

• Всегда начинайте с активации инструмента Text (T).
• Используйте Text Styles для унификации и экономии времени.
• Применяйте Auto Layout для динамических текстовых блоков.
• Следите за читаемостью и контрастом цветов.
• Интегрируйте текстовые стили в дизайн-систему команды.