Figma давно стала стандартом в UI/UX дизайне, но удивительно, сколько начинающих дизайнеров спотыкаются уже на этапе работы с текстом. Казалось бы — что может быть проще? Но именно текстовые элементы часто становятся узким местом при создании макетов: криво выровненные блоки, несоответствующие стили, потерянное форматирование. Эта статья закроет все вопросы о том, как добавить текст Figma правильно, эффективно и профессионально. Вы получите не просто базовые инструкции, а системное понимание работы с текстом — от простейших операций до продвинутых приёмов, которые сэкономят вам часы работы.
Как добавить текст в Figma: базовые способы
Вставить текстовый элемент Figma можно тремя основными способами, и каждый из них подходит для определённых сценариев работы. Первый и самый очевидный — использование панели инструментов. Найдите иконку с буквой «T» в верхней панели, кликните по ней, затем щёлкните в любом месте холста. Появится текстовый блок с курсором, готовым к вводу.
Второй способ — горячая клавиша T. Нажали, кликнули по рабочей области, начали печатать. Это стандартный подход для тех, кто ценит скорость и не хочет отвлекаться на перемещение курсора к панели инструментов. Третий вариант — создание текстового блока фиксированной ширины. Нажмите T, затем не просто кликните, а зажмите левую кнопку мыши и протяните рамку нужного размера. Текст будет автоматически переноситься по границам этого блока, что критически важно при работе с параграфами и описаниями.
Разница между точечным текстом (клик) и текстовым блоком (протягивание) принципиальна. Точечный текст растягивается горизонтально бесконечно — удобно для заголовков и кнопок. Текстовый блок имеет фиксированную ширину — идеален для абзацев, карточек товаров, описаний. Новички часто игнорируют эту разницу и потом мучаются с версткой.
| Способ добавления | Тип текста | Когда использовать |
| Клик по холсту (T + клик) | Точечный текст | Заголовки, кнопки, лейблы |
| Протягивание рамки (T + drag) | Текстовый блок | Параграфы, описания, карточки |
| Копирование из внешних источников | Зависит от контекста | Вставка готового контента |
При копировании текста из внешних источников (Word, Google Docs, браузер) Figma сохраняет базовое форматирование, но не всегда корректно. Если вставляете текст с помощью Ctrl+V (или Cmd+V на Mac) внутрь существующего текстового блока, форматирование применится согласно текущим настройкам. Если вставляете на пустой холст — Figma попытается сохранить исходный стиль, что может создать хаос в типографике проекта. Совет: вставляйте сначала как plain text (Ctrl+Shift+V), затем применяйте собственные стили.
Анна Ковалёва, UI-дизайнер
Первый месяц работы в Figma я создавала текстовые блоки исключительно кликами. Макет на 15 экранов превратился в кошмар — каждое описание товара тянулось за границы фрейма. Пришлось переделывать вручную, пока коллега не показал функцию протягивания. Сэкономила 4 часа работы на одном проекте. С тех пор всегда делаю текстовые блоки фиксированной ширины для любого текста длиннее одной строки. 📐
Работа с инструментом "Текст" и горячие клавиши
Текстовый инструмент в Figma активируется клавишей T — это знают все. Но мало кто использует его возможности на полную. После активации инструмента можно не только создавать новые текстовые элементы, но и мгновенно переключаться между существующими. Зажмите Cmd (или Ctrl на Windows) при активном текстовом инструменте — курсор временно превратится в инструмент выделения, позволяя выбирать объекты без переключения режима.
Инструкция по тексту в Figma будет неполной без понимания режимов редактирования. Двойной клик по текстовому блоку переводит его в режим редактирования — вы видите мигающий курсор и можете менять содержимое. Одинарный клик при активном инструменте «Выделение» (V) выбирает весь текстовый блок как объект, позволяя перемещать его, менять размер или применять эффекты. Понимание этой разницы избавит от 90% фрустрации при работе с текстом.
Горячие клавиши для форматирования работают интуитивно, как в любом текстовом редакторе:
Cmd+B(Ctrl+B) — полужирное начертаниеCmd+I(Ctrl+I) — курсивCmd+U(Ctrl+U) — подчёркиваниеCmd+Shift+K(Ctrl+Shift+K) — капитализация (все заглавные)Cmd+Alt+L(Ctrl+Alt+L) — выравнивание по левому краюCmd+Alt+T(Ctrl+Alt+T) — выравнивание по центруCmd+Alt+R(Ctrl+Alt+R) — выравнивание по правому краю
Менее известные, но крайне полезные комбинации: Alt+Shift+↑ и Alt+Shift+↓ изменяют межстрочный интервал (line height) с шагом в 1 пункт. Alt+← и Alt+→ регулируют межбуквенный интервал (letter spacing) с шагом в 1%. Это позволяет тонко настраивать типографику, не отвлекаясь на панель свойств.
Обязательные горячие клавиши
Профессиональная хитрость: при активном текстовом инструменте можно кликать по разным текстовым блокам, не переключаясь на инструмент выделения. Это ускоряет работу при вычитке и правке контента в десятки раз. Если нужно выделить несколько текстовых элементов одновременно, зажмите Shift и кликайте по нужным блокам.
Настройка и форматирование текстовых элементов
Правая панель свойств в Figma — центр управления типографикой. После выделения текстового блока вы увидите секцию «Text», где сосредоточены все инструменты форматирования. Начнём с базовых параметров: выбор шрифта, начертание (weight), размер (size). Figma поддерживает системные шрифты, Google Fonts и загруженные через плагины кастомные семейства.
Критически важный параметр — line height (межстрочный интервал). По умолчанию Figma устанавливает значение «Auto», которое часто не подходит для профессиональной типографики. Для основного текста рекомендуется значение 140-160% от размера шрифта (например, для 16px шрифта — line height 24-26px). Для заголовков можно сжимать до 110-120%. Слишком плотный интервал ухудшает читаемость, слишком разреженный — разрушает связность текста.
Letter spacing (межбуквенное расстояние) требует деликатного подхода. Большинство шрифтов уже оптимизированы дизайнерами, но в некоторых случаях корректировка необходима. Заголовки в крупных кеглях часто выигрывают от отрицательного letter spacing (-1% до -3%), мелкий текст иногда нуждается в увеличении (+2% до +5%). Но помните: каждое изменение должно быть оправдано, а не сделано «для красоты».
| Параметр | Рекомендация для основного текста | Рекомендация для заголовков |
| Размер шрифта | 14-18px | 24-48px |
| Line height | 140-160% | 110-130% |
| Letter spacing | 0% до +3% | -3% до 0% |
| Paragraph spacing | 16-24px | 12-16px |
Параграф-спейсинг (paragraph spacing) управляет расстоянием между абзацами. Найдите его в разделе «Advanced Type Settings» (три точки рядом с настройками текста). Это часто игнорируемый параметр, который радикально влияет на структуру текстовых блоков. Установите его равным размеру строки или чуть больше для чёткого визуального разделения абзацев.
Выравнивание текста в Figma предлагает пять вариантов: по левому краю, по центру, по правому краю, по ширине (justify) и justify with last line left (выравнивание по ширине с последней строкой влево). Выравнивание по ширине редко используется в веб-дизайне из-за неравномерных пробелов, но может быть уместно в печатных материалах. ✍️
Иерархия текстовых стилей
Цвет текста настраивается в секции «Fill». Можно применить сплошной цвет, градиент или даже изображение в качестве заливки. Для основного текста используйте не чистый чёрный (#000000), а тёмно-серый (#1a1a1a или #333333) — это смягчает контраст и снижает нагрузку на глаза. Белый текст на тёмном фоне должен быть не чисто белым (#ffffff), а слегка сероватым (#f5f5f5 или #e0e0e0) по той же причине.
Дмитрий Соколов, продуктовый дизайнер
На старте карьеры я игнорировал line-height, оставляя всё на «Auto». Клиент вернул макет мобильного приложения со словами «текст выглядит слипшимся». Пришлось перелопатить 40+ экранов, вручную выставляя интерлиньяж. С тех пор создаю текстовые стили с правильным line-height сразу. Это базовая гигиена дизайна, без которой ни один макет не выглядит профессионально. Урок усвоен жёстко, но навсегда. 💡
Продвинутые приемы работы с текстом в Figma
Текстовые стили (Text Styles) — это то, что отделяет профессиональный дизайн макета от любительского. Вместо того чтобы форматировать каждый текстовый блок вручную, создайте набор стилей для всех типовых элементов: заголовков, основного текста, подписей, кнопок. Это делается через четыре точки рядом с названием шрифта → «Create Style» → присвоение названия (например, «H1/Desktop» или «Body/Mobile»).
Преимущества очевидны: изменили стиль один раз — обновилось везде. Это критично для поддержки масштабных проектов и работы в команде. Структурируйте стили иерархически с помощью слэшей: «Typography/Headings/H1», «Typography/Body/Regular», «Typography/Body/Small». Figma автоматически сгруппирует их в выпадающем меню.
Автоматическая подгонка текстовых блоков (Auto Layout) — продвинутая функция, превращающая статичный текст в адаптивный компонент. Выделите текстовый блок, нажмите Shift+A — он обернётся во фрейм с Auto Layout. Теперь можно задать паддинги, и текстовый блок будет автоматически расширяться при изменении содержимого. Идеально для кнопок, тегов, карточек с динамическим контентом.
- Переменные в тексте: используйте плагины типа «Content Reel» для массовой замены текста реальным контентом из CSV-файлов
- Resizing: в свойствах текстового блока можно выбрать «Hug contents» (сжимается по контенту) или «Fixed» (фиксированная ширина)
- Text truncation: через плагины можно обрезать текст многоточием при переполнении (нативно в Figma пока не реализовано)
- OpenType features: некоторые шрифты поддерживают лигатуры, вариативные начертания, альтернативные символы — включаются через панель свойств
Workflow-ускорители
Работа с многоязычностью требует специального подхода. Некоторые языки (немецкий, финский) создают длинные слова, ломающие вёрстку. Другие (арабский, иврит) читаются справа налево. При проектировании интерфейсов для мультиязычных продуктов закладывайте запас по ширине текстовых блоков минимум 30% и используйте текстовые стили с чётко определённым изменением размера шрифта.
Продвинутый приём — использование «Text as Mask». Текстовый слой можно использовать как маску для изображения или градиента: выделите изображение, затем текст, нажмите Cmd+Shift+M (Ctrl+Shift+M на Windows). Изображение обрежется по форме букв. Эффектно смотрится в заголовках с фотографиями или паттернами внутри.
Распространенные ошибки при вставке текста и их решения
Первая массовая ошибка — использование точечного текста для длинных абзацев. Дизайнер кликает, начинает печатать, текст растягивается за границы фрейма. Приходится вручную разбивать на строки или мучительно менять тип текстового блока. Решение: для любого текста длиннее одной строки сразу создавайте текстовый блок фиксированной ширины (протягивание при активном инструменте T).
Вторая проблема — игнорирование текстовых стилей. Каждый блок форматируется вручную, проект превращается в типографический хаос: где-то 14px, где-то 15px, где-то line-height 20, где-то 22. Когда требуется изменить шрифт или размер, начинается ад. Решение: создайте систему текстовых стилей до начала работы над макетами. Это займёт 15 минут, сэкономит часы в будущем.
Третья ошибка — неправильное изменение размера текстовых блоков. Новички тянут за углы текстового блока, растягивая сам текст (как изображение), вместо того чтобы менять размер контейнера. Решение: при выделенном текстовом блоке используйте инструмент Scale (K) только осознанно, для остальных случаев — меняйте размер шрифта в панели свойств или ширину контейнера.
Четвёртая проблема — копирование текста с сохранением нежелательного форматирования. Вставили из Word — получили микс из трёх шрифтов, четырёх размеров и кривых отступов. Решение: используйте Cmd+Shift+V (Ctrl+Shift+V) для вставки без форматирования, затем примените нужный текстовый стиль.
- Ошибка: забытые скрытые символы (лишние пробелы, переносы строк) — искажают выравнивание
- Решение: включите видимость непечатаемых символов через плагины или вычищайте текст перед вставкой
- Ошибка: использование системных шрифтов без проверки доступности на других платформах
- Решение: перед передачей макета разработчикам убедитесь, что шрифт доступен везде, или встраивайте веб-шрифты
- Ошибка: отсутствие fallback-шрифтов в макетах для специфичных символов (эмоджи, иероглифы)
- Решение: тестируйте отображение с разным контентом, заранее определяйте запасные шрифты
Пятая ошибка — неправильная работа с вертикальным выравниванием. Figma по умолчанию выравнивает текст по верхнему краю контейнера. Если нужно центрирование или выравнивание по нижнему краю, многие пытаются сделать это вручную, что ломается при изменении контента. Решение: используйте Auto Layout с вертикальным выравниванием (Align Center или Align Bottom) либо констрейнты (Constraints) для точного позиционирования текста внутри фрейма.
Шестая — пренебрежение контрастностью. Светло-серый текст на белом фоне может выглядеть стильно, но не проходит проверку на доступность (WCAG). Решение: используйте плагины для проверки контрастности (например, «Contrast») и следите, чтобы соотношение было минимум 4.5:1 для основного текста, 3:1 для крупного.
Чек-лист перед сдачей макета
Седьмая ошибка — неиспользование компонентов для повторяющихся текстовых элементов (кнопок, тегов, бейджей). Дизайнер копирует-вставляет, затем при правке приходится искать и менять каждый вручную. Решение: создавайте компоненты (Component) для любого текстового элемента, который встречается более двух раз. Изменения в мастер-компоненте автоматически применятся ко всем экземплярам.
Восьмая — отсутствие документации по типографике. Разработчики получают макет и не понимают, какой line-height или letter-spacing использовался. Решение: создайте отдельный фрейм с образцами всех текстовых стилей, явно указав все параметры. Это можно сделать через плагин «Style Organizer» или вручную.
Работа с текстом в Figma — это не просто умение нажать клавишу T и начать печатать. Это понимание типографической системы, знание инструментов и горячих клавиш, дисциплина в использовании стилей. Профессионал отличается от любителя не только визуальным результатом, но и структурой файлов, которую легко поддерживать и масштабировать. Добавить текст Figma может каждый. Сделать это правильно, создав основу для согласованного и гибкого дизайна — вот настоящий навык. Применяйте описанные приёмы последовательно, и ваши макеты станут не просто красивыми, а по-настоящему работающими инструментами коммуникации между дизайном и разработкой. 🚀
