Текст — важнейшая часть интерфейса. Он помогает пользователю понимать, что происходит на экране, управлять действиями и ориентироваться в продукте. В Figma работа с текстами устроена просто и гибко — достаточно освоить базовые инструменты. В этой статье разберёмся, как быстро и грамотно работать с текстами и шрифтами, даже если вы новичок.
1. Как добавить текст в Figma
Чтобы вставить текст, нажмите клавишу T или выберите инструмент Text в верхней панели инструментов. Затем просто кликните на рабочую область и начните печатать.
Есть два способа вставки текста:
- Одинарный клик — создаётся строка с автошириной. Удобно для заголовков.
- Протяжка мышью — создаётся текстовый блок с фиксированной шириной. Подходит для абзацев и длинных описаний.
Если нужно вставить текст в определённую область, всегда используйте текстовый блок. Это позволит контролировать ширину, перенос строк и выравнивание.
2. Основные настройки текста
После вставки текста в правой панели свойств откроются настройки, где можно изменить:
- Шрифт (Font Family) — выбрать из библиотек Figma или локальных шрифтов (если вы работаете в десктопной версии).
- Размер (Font Size) — задаёт кегль текста.
- Начертание (Weight) — толщина шрифта: light, regular, medium, bold и т.д.
- Межстрочный интервал (Line Height) — влияет на читаемость абзацев.
- Межбуквенное расстояние (Letter Spacing) — особенно важно для заголовков и надписей в верхнем регистре.
- Выравнивание — по левому краю, по центру, по правому или по ширине.
Также можно задавать параметры заглавных букв, подчёркивания и преобразования регистра.
3. Что такое Text Styles и зачем они нужны
Стиль текста — это сохранённый шаблон настроек: шрифт, размер, межстрочное расстояние и прочие параметры. Он нужен, чтобы применять одинаковое оформление к множеству элементов и управлять ими централизованно.
Пример: у вас на макете 20 заголовков. Если вы создадите текстовый стиль и примените его ко всем заголовкам, то при необходимости изменить размер шрифта вам достаточно будет отредактировать стиль — и все заголовки изменятся автоматически.
Как создать текстовый стиль:
- Настройте текст.
- В правой панели нажмите на значок четырёх точек рядом с названием стиля.
- Выберите "Create style" и дайте название.
Используйте отдельные стили для заголовков, подзаголовков, основного текста, примечаний и других уровней типографики.
4. Режимы размеров текстового блока: auto и fixed
У текста в Figma есть три режима поведения:
- Auto width — ширина блока зависит от длины текста. Удобно для заголовков и кнопок.
- Auto height — высота зависит от количества текста при фиксированной ширине. Используется для абзацев и адаптивных компонентов.
- Fixed size — вы вручную задаёте и ширину, и высоту. Не всегда удобно, особенно если текст часто меняется.
Выбор режима влияет на то, как будет вести себя текст при редактировании и адаптации компонентов. Для проектирования интерфейсов в компонентах чаще всего используют auto height.
5. Выравнивание текста и работа с фреймом
Текст можно выровнять внутри блока, а также по отношению к другим элементам на макете. В панели справа доступны настройки выравнивания по краям и по центру, а также вертикальное и горизонтальное позиционирование.
Если текст находится внутри фрейма или автолайаута, особенно важно использовать выравнивание через вкладку Align, чтобы сохранить логичную и чистую сетку.
6. Основные ошибки при работе с текстами в Figma
Вот несколько типичных ошибок, которых стоит избегать:
- Слишком много разных шрифтов. Это нарушает визуальную иерархию. Рекомендуется использовать не более двух гарнитур на один проект.
- Отсутствие текстовых стилей. Без них редактировать дизайн становится трудоёмко.
- Игнорирование межстрочного интервала. Слишком маленький интервал ухудшает читаемость, особенно на мобильных устройствах.
- Ручная настройка каждого текста. Использование стилей позволяет экономить время и сохранять единообразие.
- Неудобная работа с размерами. Не задавайте размеры "на глаз" — используйте сетку, отступы и базовые размеры, кратные 4 или 8.
Заключение
Работа с текстами в Figma — это не просто набор текста, а полноценная часть дизайна интерфейса. Грамотное оформление, структура и стилизация текста делают макет профессиональным, читаемым и удобным для восприятия. Используя стили, выравнивание и автоматические режимы размеров, можно ускорить работу в несколько раз и избежать ошибок.
Полезные ресурсы:
Не тратьте время на ручные доработки. На сайте LF-CODE вы найдёте готовые модификации для Тильды — от эффектных анимаций до полезных скриптов. Команда LF-CODE поможет адаптировать их под ваш сайт или реализовать нужную доработку с нуля.
Есть техподдержка — пишите в Telegram , мы поможем разобраться.
Подписывайтесь на Telegram канал, чтобы получать свежие обновления для сайтов!