Как писать в фигме

В Figma писать текст можно с помощью инструмента Text (T), который позволяет добавлять, форматировать и стилизовать надписи прямо на макетах. Текст интегрируется в дизайн-системы, поддерживает стили, автоподбор высоты строк и многоязычность. Главное — использовать структурированные текстовые стили и компоненты, чтобы обеспечить согласованность и упростить передачу макетов разработчикам.

Инструмент Text в Figma: основы работы

Figma — это веб-платформа для совместной работы над UI/UX-дизайном, где текст является не просто дополнением, а ключевым элементом интерфейса. Инструмент Text (текст) активируется нажатием клавиши T на клавиатуре. После этого вы можете кликнуть на холст и начать печатать. Текст в Figma ведёт себя как векторный объект, что означает его масштабируемость без потерь качества.
Текст может быть однострочным или многострочным, в зависимости от того, привязан ли он к фрейму. Если вы создаёте текст вне фрейма, он будет автоматически расширяться по горизонтали. Однако если текст помещён внутрь фрейма, он будет переноситься на новую строку при достижении границ контейнера. Это особенно важно при проектировании адаптивных интерфейсов.
Figma поддерживает широкий спектр шрифтов: как локальных, так и из Google Fonts через плагины. Также доступна работа с переменными шрифтами (variable fonts), что даёт больше контроля над толщиной, шириной и другими параметрами. Важно помнить, что шрифты должны быть установлены на устройстве или загружены в проект через Figma Fonts.

Как выбрать тип текста: свободный или привязанный

При создании текста у вас есть два варианта: свободный текст и текст, привязанный к фрейму. Свободный текст удобен для заголовков, кнопок, меток — коротких фраз, которые не требуют переноса. Привязанный текст используется в блоках, таких как абзацы, описания, новости.

• Свободный текст: расширяется по мере ввода, не переносится. Идеален для элементов с фиксированной шириной.
• Текст в фрейме: ограничен размерами фрейма, переносится автоматически. Подходит для динамического контента.

Создание и форматирование текста: шаг за шагом

Процесс написания текста в Figma начинается с выбора инструмента Text (T). После клика на холсте вы можете ввести нужную информацию. Далее — переход к настройке внешнего вида через правую панель свойств (Inspector).
Форматирование включает выбор шрифта, размера, начертания, межбуквенного и межстрочного интервалов. Figma поддерживает все стандартные CSS-подобные параметры: font-family, font-size, line-height, letter-spacing, text-align, text-transform и другие. Также доступны эффекты: тень текста, заливка, обводка.

1. Нажмите T и кликните на холст.
2. Введите текст (например, «Заголовок экрана»).
3. В правой панели выберите шрифт (например, Inter Regular).
4. Установите размер — 24px, межстрочный интервал — 1.4.
5. Настройте выравнивание: слева, по центру или по ширине.
6. При необходимости добавьте тень или измените цвет заливки.

Межстрочный интервал: автоматика vs ручной режим

Figma предлагает три режима line height:

• Auto: система сама рассчитывает высоту строки на основе размера шрифта (примерно 1.2–1.4).
• Manual: вы задаёте значение в пикселях или процентах.
• Line-based: используется при работе с многострочным текстом в Auto Layout.

Работа с текстовыми стилями: как избежать хаоса

Один из главных принципов профессионального дизайна — консистентность. В Figma она достигается через текстовые стили (Text Styles). Это сохранённые наборы параметров: шрифт, размер, интервалы, цвет, эффекты. Стили можно применять к любому текстовому объекту и синхронизировать между файлами через библиотеки.
Создание текстового стиля простое: настройте текст, как нужно, затем в правом верхнем углу панели свойств нажмите значок «+» рядом с выпадающим списком стилей. Назовите стиль понятно: например, «Heading/H1/24px/Bold» или «Body/Regular/16px». Хорошая практика — использовать иерархическую нотацию.

Когда обновлять стили и как избежать ошибок

Если вы измените базовый текстовый стиль, все экземпляры этого стиля в файле автоматически обновятся. Это мощный инструмент, но требует осторожности. Например, случайное изменение размера шрифта в стиле «Caption» может испортить десятки экранов.

• Всегда проверяйте, где используется стиль, перед его редактированием.
• Используйте режим «Local edits» (локальные правки), чтобы временно отклониться от стиля без его изменения.
• Для глобальных изменений — создавайте дубликат стиля с новым именем и постепенно внедряйте его.

Автоматизация и компоненты: текст в системах дизайна

Текст становится ещё мощнее, когда интегрируется в компоненты и динамические свойства. В Figma вы можете создавать компоненты с текстовыми полями, которые легко заменяются при создании экземпляров. Например, карточка товара с названием, описанием и ценой — всё это может быть параметризовано.
С выходом функции Variants и Interactive Components, текст можно сделать частью интерактивного прототипа. Представьте кнопку с состояниями: «Добавить в корзину», «Уже в корзине». Через Variants эти состояния переключаются, а текст меняется автоматически.

Как использовать Variables для текста

Figma Variables позволяют управлять текстом как данными. Вы можете создать переменную типа String и привязать её к текстовому полю. Например:

• Создайте переменную button_text_primary со значением «Перейти».
• Привяжите её к текстовому слою кнопки.
• При изменении значения переменной текст во всех связанных местах обновится.

Это особенно полезно при A/B-тестировании копирайта или локализации. Переключая набор переменных, вы можете мгновенно менять язык интерфейса.

Коллаборация и передача текста разработчикам

Одна из ключевых задач дизайнера — передать текст разработчику без искажений. Figma позволяет экспортировать текстовые параметры в виде кода (CSS, iOS, Android), что ускоряет реализацию. В режиме «Dev Mode» разработчик видит точные значения: font-family, font-weight, line-height, letter-spacing.
Важно: не ограничивайтесь только визуальным соответствием. Убедитесь, что:

• Шрифты доступны в production-среде.
• Межбуквенные интервалы указаны в пикселях, а не в em.
• Цвета текста соответствуют контрастности по WCAG (минимум 4.5:1 для обычного текста).

Чек-лист перед передачей

Перед тем как отправить макет, выполните следующие шаги:

1. Проверьте все текстовые стили на соответствие дизайн-системе.
2. Убедитесь, что нет «слоёв» с нестандартными шрифтами или размерами.
3. Добавьте аннотации к сложным случаям (например, перенос слов в кнопке).
4. Экспортируйте текстовые стили в виде документа или используйте плагин (например, Zeplin, Zeroheight).
5. Проведите встречу с разработчиком, чтобы обсудить поведение текста при динамическом изменении (например, длинные имена пользователей).

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

Профессионалы подчёркивают, что текст в Figma — это не просто надпись, а часть пользовательского опыта. От его качества зависит воспринимаемая надёжность продукта. По данным исследования Nielsen Norman Group, 79% пользователей сканируют текст, а не читают его полностью. Поэтому важно соблюдать иерархию, использовать понятные формулировки и визуально выделять ключевую информацию.
Текстовые стили должны быть частью дизайн-системы с самого начала проекта. Компании вроде Airbnb, Spotify и Yandex используют централизованные библиотеки, где текстовые стили синхронизированы между всеми продуктами. Это исключает путаницу и ускоряет запуск новых фич.

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

Заключение

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

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