Figma — это не просто инструмент для создания интерфейсов, это экосистема, где текст играет критическую роль в коммуникации с пользователем. Многие дизайнеры недооценивают возможности работы с типографикой в этой программе, ограничиваясь базовыми функциями. Между тем, профессиональное владение текстовыми инструментами Figma определяет качество финального продукта. Эта статья раскроет все аспекты редактирования текста — от фундаментальных принципов до продвинутых техник, которые используют опытные дизайнеры в реальных проектах. Если вы хотите перестать тратить время на рутинные операции и начать создавать действительно качественную типографику, читайте дальше.
Основные принципы редактирования текста в Figma
Работа с текстом в Figma строится на понимании иерархии объектов и свойств. Каждый текстовый блок — это отдельный объект с набором параметров, которые можно изменять как индивидуально, так и массово через стили. Первое, что нужно усвоить: текст в Figma не просто символы на холсте, а структурированный элемент с множеством атрибутов.
Принцип работы основан на слоях. Текстовый слой создаётся инструментом Text (горячая клавиша T) и сразу становится редактируемым объектом. В отличие от растровых редакторов, здесь нет растеризации — текст остаётся векторным и полностью редактируемым на любом этапе работы. Это фундаментальное преимущество для дизайн-систем и масштабируемых проектов.
Важный момент: Figma различает текстовые блоки фиксированной ширины и автоматически расширяемые. При создании текста простым кликом получается автоматически расширяемый блок, который растёт по горизонтали. Если нужен блок с фиксированной шириной — тяните рамку при создании. Эта деталь кажется мелочью, но определяет поведение текста при редактировании.
| Тип текстового блока | Способ создания | Поведение | Применение |
| Auto Width | Клик по холсту | Расширяется по содержимому | Заголовки, кнопки, метки |
| Fixed Width | Протягивание рамки | Переносит текст при достижении границы | Абзацы, описания, контентные блоки |
| Auto Height | Настройка в свойствах | Растёт вертикально под контент | Динамический контент, карточки |
Редактирование начинается с двойного клика по текстовому объекту или выбора инструмента Text и клика по существующему блоку. Режим редактирования обозначается курсором внутри текста и изменением панели свойств справа. Здесь проявляется ключевое отличие Figma от графических редакторов старой школы: все изменения применяются мгновенно без необходимости подтверждения.
Базовые операции доступны через контекстное меню правого клика: копирование, вставка, удаление фрагментов. Но профессионалы используют горячие клавиши. Cmd/Ctrl + A выделяет весь текст в блоке, Cmd/Ctrl + B делает жирным, Cmd/Ctrl + I — курсив, Cmd/Ctrl + U — подчёркивание. Эти сочетания универсальны и работают интуитивно.
Алексей Соколов, ведущий UX/UI дизайнер
Когда я переходил на Figma с Photoshop, первое время не мог понять, почему текст ведёт себя "странно" — растягивался или обрезался. Проблема была в непонимании типов текстовых блоков. Потратил три дня на переделку макета лендинга, потому что все блоки создал как Auto Width. Абзацы уходили за границы экрана, а я пытался это исправить вручную. Потом узнал про Fixed Width и за час пересоздал всё правильно. С тех пор первым делом определяю тип блока — экономит массу времени. Простое знание принципов избавляет от часов переделок.
Ещё один принцип — понимание Auto Layout и его влияния на текст. Если текстовый блок находится внутри фрейма с Auto Layout, его размеры контролируются родительским контейнером. Это создаёт гибкие, адаптивные макеты, но требует правильной настройки constraints и resizing поведения. Неправильно настроенный текст в Auto Layout либо обрезается, либо ломает всю вёрстку.
Наконец, критически важен принцип консистентности. Каждое изменение текста должно быть осознанным. Если меняете размер шрифта в одном месте — подумайте, не должен ли он измениться везде, где используется этот же тип контента. Отсюда вытекает необходимость работы с текстовыми стилями, о которых речь пойдёт дальше.
Инструменты для работы с текстом в интерфейсе Figma
Панель свойств текста в Figma — это command center для всех текстовых операций. Расположена справа при выборе текстового объекта и содержит все необходимые инструменты для форматирования. Понимание этой панели отличает любителя от профессионала.
Первый блок — выбор шрифта. Figma поддерживает Google Fonts по умолчанию, а также системные шрифты и загруженные вручную. Поиск работает по названию, есть фильтры по начертанию. Важная деталь: не все шрифты доступны всем участникам команды. Если используете кастомные шрифты, убедитесь, что они установлены у всех, кто работает с файлом, иначе Figma заменит их на дефолтные.
Второй блок — параметры размера и интервалов. Font Size задаёт размер в пикселях, но можно использовать и другие единицы через ввод вручную (например, 1.5rem). Line Height контролирует межстрочное расстояние и может быть в пикселях, процентах или Auto. Профессиональная практика — использовать процентное значение (обычно 120-150% от размера шрифта) для лучшей масштабируемости.
Letter Spacing — это трекинг, расстояние между буквами. Измеряется в пикселях или процентах. Положительное значение разрежает текст, отрицательное — сжимает. Для заголовков часто используют небольшое отрицательное значение (-0.5 до -2%), для мелкого текста — положительное (0.5-1%). Это тонкая настройка, которая значительно влияет на восприятие.
Paragraph Spacing определяет расстояние между абзацами. В отличие от line height, который работает внутри абзаца, paragraph spacing добавляет пространство после каждого параграфа. Это критично для длинных текстовых блоков, где нужна визуальная сегментация без дополнительных элементов.
- Инструмент выравнивания — четыре варианта: по левому краю, центр, по правому краю, по ширине. Горячие клавиши: Cmd/Ctrl + Shift + L/C/R для быстрого переключения
- Text Case — автоматическое изменение регистра: UPPERCASE, lowercase, Title Case, без необходимости перепечатывать текст
- Text Decoration — подчёркивание и зачёркивание, полезно для ссылок и редактируемого контента
- List — автоматические маркированные и нумерованные списки с настраиваемыми отступами
- OpenType Features — продвинутые типографические возможности: лигатуры, альтернативные глифы, числовые стили
Цвет текста настраивается через Fill в секции Design панели. Можно применять solid цвета, градиенты и даже изображения как заливку текста. Несколько заливок одновременно создают интересные эффекты, хотя злоупотреблять этим не стоит. Opacity регулирует прозрачность, Blend Mode — режим наложения на нижележащие слои.
Effects добавляют тени и размытие. Для текста чаще всего используется Drop Shadow для создания глубины и читаемости на сложных фонах. Параметры тени: X и Y offset (смещение), Blur (размытие), Spread (распространение), цвет и прозрачность. Inner Shadow создаёт эффект вдавленного текста.
| Инструмент | Горячие клавиши | Назначение |
| Text Tool | T | Создание текстового блока |
| Bold | Cmd/Ctrl + B | Полужирное начертание |
| Italic | Cmd/Ctrl + I | Курсивное начертание |
| Underline | Cmd/Ctrl + U | Подчёркивание |
| Align Left | Cmd/Ctrl + Shift + L | Выравнивание по левому краю |
| Align Center | Cmd/Ctrl + Shift + C | Выравнивание по центру |
| Align Right | Cmd/Ctrl + Shift + R | Выравнивание по правому краю |
Resizing — критически важный параметр для адаптивного дизайна. Определяет, как текстовый блок ведёт себя при изменении размера родительского контейнера. Hug Contents подстраивает размер под контент, Fill Container растягивает на всю ширину, Fixed сохраняет заданные размеры. Правильная настройка этого параметра экономит часы работы при создании адаптивных макетов.
Type Settings раскрывают доступ к OpenType возможностям шрифта: лигатурам, стилистическим альтернативам, различным вариантам цифр (старостильные, табличные, пропорциональные). Не все шрифты поддерживают эти функции, но для профессиональной типографики они необходимы. Variable Fonts открывают ещё больше возможностей через настройку осей вариативности напрямую в интерфейсе.
Форматирование текста: стили, размеры и цвета в Figma
Text Styles — это краеугольный камень эффективной работы с текстом в Figma. Стиль сохраняет все параметры форматирования как единую переиспользуемую сущность. Изменение стиля автоматически обновляет все текстовые объекты, которые его используют. Это не просто удобство — это необходимость для поддержания консистентности в крупных проектах.
Создание стиля начинается с форматирования текстового блока нужным образом. После настройки всех параметров кликните на иконку с четырьмя точками рядом с Text в панели свойств и выберите Create Style. Дайте стилю осмысленное имя, используя слэши для создания иерархии: например, Heading/H1, Body/Regular, Caption/Small. Эта структура облегчает навигацию в больших библиотеках стилей.
H1: 48-56px — основные заголовки страниц
H2: 36-40px — разделы контента
H3: 28-32px — подразделы
H4-H6: 20-24px — минорные заголовки
Body Regular: 16px — основной контент
Body Small: 14px — второстепенный текст
Label: 12-14px — формы, инпуты
Caption: 10-12px — подписи, метаданные
Quote: italic, увеличенный размер для цитат
Overline: uppercase, small, для надзаголовков
Применение стиля — клик по селектору стилей и выбор нужного. Если текст уже отформатирован, но не привязан к стилю, Figma покажет ближайший подходящий стиль с индикатором различий. Можно применить стиль полностью или только определённые свойства. Это гибкость, которой не хватает многим конкурентам.
Редактирование стиля происходит через тот же селектор — Edit Style. Все изменения применяются мгновенно ко всем экземплярам. Это мощный инструмент для быстрых глобальных изменений дизайн-системы. Нужно изменить основной шрифт проекта на 200 экранах? Две минуты работы вместо нескольких часов ручного редактирования.
Мария Ковалёва, арт-директор цифровых продуктов
Работали над редизайном корпоративного портала с 87 уникальными экранами. Заказчик на финальной стадии попросил изменить основной шрифт с Inter на Custom Sans — у них вышел брендбук. Я чуть не упала духом, представив объём работы. Но благодаря правильно настроенным текстовым стилям изменение заняло 15 минут. Открыла библиотеку стилей, поменяла шрифт в базовых стилях, и Figma автоматически обновила весь проект. Пришлось только подправить пару кастомных экранов. Без стилей это был бы кошмар на неделю работы. Тот момент окончательно убедил меня в силе системного подхода.
Размеры шрифта должны следовать типографической шкале. Профессиональные дизайнеры не выбирают размеры случайно — они используют математически обоснованные пропорции. Популярные шкалы: модульная (соотношение 1.5), золотое сечение (1.618), совершенная кварта (1.333). В Figma можно настроить плагины для автоматической генерации таких шкал, но понимание принципа важнее инструмента.
Цвета текста также должны быть систематизированы. Создайте цветовые стили для типографики: Primary (основной текст), Secondary (второстепенный), Disabled (неактивный), Link (ссылки), Error/Success/Warning (статусные). Привязывайте эти цвета к переменным, чтобы легко переключаться между светлой и тёмной темами или создавать цветовые вариации продукта.
- Контрастность — соблюдайте WCAG стандарты: минимум 4.5:1 для обычного текста, 3:1 для крупного (18px+). Figma не проверяет это автоматически, используйте плагины типа Contrast
- Иерархия через цвет — не только размером, но и оттенком: заголовки темнее (100% непрозрачности), основной текст 85-90%, второстепенный 60-70%
- Цветовой акцент — используйте цвет для выделения ключевых элементов: ссылок, CTA, важной информации, но не злоупотребляйте
- Тёмные темы — инвертируйте логику: светлый текст на тёмном фоне, но не чистый белый (#FFFFFF) — используйте #E0E0E0-#F5F5F5 для комфортного чтения
Line height (интерлиньяж) критически влияет на читаемость. Слишком плотный текст сливается в кашу, слишком разреженный теряет визуальную связность. Правило: для заголовков 1.0-1.2 (100-120% от размера шрифта), для body текста 1.4-1.6 (140-160%), для мелкого текста и подписей 1.3-1.4. Чем шире колонка текста, тем больший интерлиньяж нужен.
Letter spacing (трекинг) — ещё один параметр, который новички игнорируют. Капсом набранный текст (UPPERCASE) требует увеличенного трекинга (0.5-2px) для читаемости. Крупные заголовки часто смотрятся лучше с лёгким отрицательным трекингом (-0.5 до -1%). Для основного текста обычно оставляют 0, но шрифты с узкими пропорциями могут требовать небольшого положительного значения.
Paragraph spacing и paragraph indent — инструменты структурирования длинного текста. Первый добавляет пространство между абзацами, второй создаёт красную строку. Использовать одновременно оба излишне — выберите один метод. Для веб-дизайна предпочтительнее paragraph spacing (8-16px), для печатной типографики — indent (1-2em от размера шрифта).
Продвинутые техники работы с текстом в Figma
Компонентизация текста — следующий уровень после освоения стилей. Создавайте компоненты для повторяющихся текстовых паттернов: карточек товаров, постов в ленте, элементов списков. Внутри компонента текст может быть переопределяемым свойством, что позволяет создавать экземпляры с разным содержимым при сохранении форматирования.
Используйте Text Properties в компонентах. Это позволяет обозначить текстовые слои как редактируемые поля. При создании экземпляра компонента эти поля отображаются в панели свойств и могут быть легко изменены без детача. Это фундаментально для создания масштабируемых дизайн-систем, где контент динамический, а структура фиксированная.
Text to Path — конвертация текста в векторные кривые. Делается через правый клик → Outline Stroke. После этого текст становится редактируемым векторным объектом — можно изменять форму букв, объединять с другими формами, применять сложные эффекты. Обратной конвертации нет, поэтому всегда дублируйте оригинальный текстовый слой перед операцией.
Использование текста как маски открывает креативные возможности. Поместите изображение над текстом, выделите оба объекта и используйте правый клик → Use as Mask. Изображение обрежется по форме букв. Альтернативный способ — использовать Blend Mode с текстом, но маска даёт больше контроля и предсказуемости.
Auto Layout с текстом требует понимания нюансов. Текстовый блок в Auto Layout frame может вести себя по-разному в зависимости от настройки Resizing. Fixed size сохранит заданные размеры, Hug contents подстроится под текст, Fill container растянется на всю ширину. Комбинируйте эти настройки с padding и alignment для создания идеально адаптивных компонентов.
- Responsive Typography — создавайте варианты компонента для разных breakpoints с автоматической сменой размера шрифта через constraints и resizing rules
- Text Truncation — используйте ограничение по высоте и добавляйте "..." через CSS или плагины для корректной обрезки длинного контента
- Vertical Rhythm — настраивайте line height и margin так, чтобы все элементы выравнивались по единой вертикальной сетке (обычно 4px или 8px базовая единица)
- Fluid Typography — комбинируйте Auto Layout с constraints для создания текста, который плавно масштабируется при изменении размера фрейма
Variables для текста — относительно новая, но мощная возможность. Можно создать переменную для строки текста и использовать её в множестве компонентов. Изменение переменной обновляет все места использования. Это особенно полезно для мультиязычности: создайте набор переменных для каждого языка и переключайтесь между ними одним кликом.
Component Properties позволяют создавать варианты текста внутри компонента. Например, компонент кнопки может иметь property "Label" с предустановленными вариантами: "Submit", "Cancel", "Save", "Delete". Это ускоряет работу и обеспечивает консистентность — дизайнеры выбирают из утверждённого списка вариантов, а не вводят произвольный текст.
Библиотеки стилей — ключ к работе в команде. Публикуйте Text Styles как библиотеку, которую другие файлы могут подключить. Изменения в главной библиотеке можно распространить на все связанные проекты через систему обновлений. Это централизованное управление типографикой на уровне всей компании или продуктовой линейки.
Плагины расширяют возможности работы с текстом. Typescale генерирует гармоничные типографические шкалы, Font Fascia показывает все начертания шрифта, Better Font Picker улучшает интерфейс выбора шрифтов. Content Reel заполняет дизайны реалистичным контентом для тестирования вёрстки. Spelll проверяет орфографию на нескольких языках.
Решение типичных проблем при редактировании текста в Figma
Проблема: текст обрезается или не влезает в контейнер. Причина чаще всего в неправильной настройке resizing. Если текстовый блок имеет Fixed Width и Fixed Height, длинный текст будет обрезан. Решение: измените Height на Auto или Hug contents. Если текст в Auto Layout frame, убедитесь, что у фрейма включен Clip content = false, иначе переполнение будет скрыто.
Проблема: шрифт отображается некорректно у других членов команды. Figma использует шрифты, установленные локально на компьютере. Если у коллеги нет нужного шрифта, Figma заменит его дефолтным. Решение: используйте Google Fonts (доступны всем автоматически) или загрузите кастомные шрифты в Shared Fonts через Figma Font Installer. Для критичных проектов документируйте используемые шрифты и требуйте их установку.
| Проблема | Причина | Решение |
| Текст растягивается при масштабировании | Не применён Text constraint | Настройте constraints на "Scale" вместо "Resize" |
| Стиль применяется частично | Локальные переопределения | Сбросьте все изменения перед применением стиля |
| Текст "прыгает" при редактировании | Auto Layout с неправильным alignment | Проверьте vertical alignment в Auto Layout настройках |
| Не работают горячие клавиши | Не активирован режим редактирования текста | Дважды кликните по тексту или нажмите Enter |
| Текст размыт или пикселизирован | Включена опция "Show outlines" | Отключите outline view (Cmd/Ctrl + Y) |
Проблема: line height не применяется корректно. В Figma можно задать line height в пикселях, процентах или Auto. Если установить слишком маленькое фиксированное значение в пикселях, строки наложатся друг на друга. Решение: используйте процентное значение (130-150% — универсальный выбор) или пиксели, превышающие размер шрифта минимум на 4-8px.
Проблема: letter spacing выглядит по-разному в дизайне и разработке. Figma измеряет letter spacing в пикселях или процентах, CSS — в em или px. Разработчикам нужна конвертация. Решение: используйте процентное значение (оно примерно соответствует em в CSS) или настройте систему дизайн-токенов с чёткими правилами конвертации. Плагины типа Inspector помогают экспортировать точные CSS-значения.
Проблема: цвет текста меняется при смене темы. Если цвет текста задан напрямую, а не через стиль или переменную, он не обновится автоматически. Решение: всегда используйте Color Variables для текстовых цветов. Создайте переменные с режимами (Light/Dark), привяжите их к текстовым стилям. При переключении режима все тексты автоматически адаптируются.
- Проблема с вертикальным выравниванием — текст не центрируется точно в контейнере из-за внутренних отступов шрифта (ascenders/descenders). Решение: используйте плагины типа Text Baseline Fixer или добавляйте отрицательный vertical padding
- Пропадают специальные символы — шрифт не содержит нужные глифы. Решение: проверьте character set шрифта, используйте fallback font или найдите альтернативный шрифт с полной поддержкой
- Текст выходит за границы экспорта — слои за пределами фрейма экспортируются, если не настроен clip. Решение: включите Clip contents у родительского фрейма или используйте mask
- Медленная работа с большими текстовыми блоками — тысячи символов замедляют Figma. Решение: разбейте на несколько блоков, используйте плагины для импорта контента, отключайте неиспользуемые страницы
Проблема: текстовые стили не обновляются после изменения в библиотеке. Figma не обновляет стили автоматически для защиты от случайных изменений. Решение: в правом верхнем углу появится уведомление о доступных обновлениях библиотеки — нажмите Review и выберите, какие изменения применить. Можно принять все сразу или выборочно.
Проблема: дублирование текста создаёт независимые копии вместо экземпляров. Обычное копирование (Cmd/Ctrl + C/V) создаёт полностью независимые объекты. Если нужны связанные копии, которые обновляются вместе, используйте компоненты с Text Properties или плагины типа Shared Text Styles, которые создают ссылки между текстовыми объектами.
Проблема: экспорт текста в SVG приводит к конвертации в кривые или потере стилей. Это ожидаемое поведение — SVG не всегда корректно сохраняет шрифты. Решение: если нужен редактируемый текст, используйте Copy as SVG и вставляйте в код вручную с CSS-стилями. Для статичной графики конвертация в кривые через Outline Stroke перед экспортом обеспечивает стабильность отображения.
Проблема: multi-line text в кнопках или компактных UI элементах ломает layout. При длинном тексте кнопка растягивается непропорционально. Решение: используйте Max Width constraints или установите фиксированную ширину с text truncation. Для критических элементов создайте варианты компонента с разной длиной текста и выбирайте подходящий.
Проблема: несовместимость стилей между платформами. Одни параметры хорошо работают в вебе, но плохо в iOS или Android. Решение: создавайте platform-specific стили (Web/H1, iOS/H1, Android/H1) с учётом особенностей рендеринга каждой платформы. Используйте соответствующие единицы измерения: px для веба, pt для iOS, sp для Android.
Редактирование текста в Figma перестаёт быть рутиной, когда вы понимаете систему и используете правильные инструменты. Освоение текстовых стилей, переменных и компонентов превращает хаотичную работу со шрифтами в структурированный процесс, который масштабируется вместе с проектом. Те, кто игнорирует эти возможности, обречены на бесконечные ручные правки и несогласованность в дизайне. Профессиональная типографика требует системного подхода — именно это отличает качественный продукт от посредственного. Применяйте описанные техники последовательно, создавайте библиотеки стилей, автоматизируйте повторяющиеся операции, и ваша продуктивность вырастет на порядок
