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

Как в Фигме текст — это не просто вставка слова, а точная настройка типографики, структуры и поведения элементов, чтобы они работали в интерфейсе как живые, а не как статичные надписи. В Фигме текст — это инструмент управления восприятием, иерархией и удобством для пользователя. Освоить его значит научиться не просто писать, а говорить визуально.

Как добавить текст в Фигме

Добавить текст в Фигме проще всего — достаточно выбрать инструмент «Text» (иконка «T») в левой панели инструментов и кликнуть где угодно на холсте. При этом Фигма автоматически создаёт текстовый слой с дефолтным шрифтом и размером. Но это лишь первый шаг. Следующий — понимание, что текст в Фигме — это не просто надпись, а объект с собственными свойствами: высота строки, интервал между буквами, выравнивание, ограничение по ширине и даже возможность автоматического переноса.

Представьте, что вы проектируете кнопку с надписью «Зарегистрироваться». Если вы просто введёте текст и не зададите ограничение по ширине, то при изменении языка на немецкий (где слово становится длиннее — «Registrieren») текст выйдет за границы кнопки. Именно поэтому важно сразу задавать контейнер для текста — кликните и перетащите, чтобы создать поле с фиксированной шириной, а не просто щёлкните.

Как форматировать текст: шрифты, размеры, выравнивание

Форматирование текста в Фигме происходит в правой панели «Properties». Здесь вы найдёте все настройки, от которых зависит читаемость и эстетика интерфейса. Начните с выбора шрифта. Фигма поддерживает системные шрифты (например, San Francisco, Segoe UI) и кастомные через Adobe Fonts или Google Fonts — но только если вы подключили их в настройках аккаунта.

Размер шрифта — не просто число. В современных интерфейсах используются базовые модули: 12, 14, 16, 18, 20, 24, 32, 48. Это не случайно — такие значения соответствуют рекомендациям WCAG и обеспечивают хорошую читаемость на экранах разного разрешения.

Выравнивание текста — ещё один критичный элемент. Левое выравнивание (left) — стандарт для большинства языков, включая русский. Центрирование (center) используйте только для заголовков, баннеров и маркетинговых текстов. Правое выравнивание (right) — редко, и только в специфичных случаях, например, для числовых таблиц или архитектурных макетов.

Межстрочный интервал (line height) должен быть на 20–40% больше размера шрифта. Для текста 16px — оптимально 22–24px. Слишком маленький интервал — текст «слипается», слишком большой — теряется визуальная связность. Пример: в мобильном приложении для новостей 16px / 24px даёт идеальный баланс между плотностью и удобством чтения.

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

Работа с текстом без стилей — это технический долг. Каждый раз, когда вы вручную меняете размер, цвет или шрифт одного текстового слоя, вы рискуете нарушить целостность дизайна. Решение — текстовые стили (Text Styles).

Чтобы создать стиль: выделите текст, откройте панель «Properties», нажмите на значок «+» рядом с полем «Text Style» и задайте имя, например, «Heading 1 / Bold / 24px». После этого вы можете применить этот стиль ко всем заголовкам в проекте. Если вы решите изменить размер на 26px — все элементы с этим стилем обновятся автоматически.

Стили можно организовать в иерархию: «Heading 1», «Heading 2», «Body», «Caption». Это создаёт систему, похожую на CSS-классы в вебе. Особенно это важно в командах: когда 5 дизайнеров работают над одним проектом, стили — это гарантия согласованности.

Таблица — не просто справочник. Это основа для создания единой типографической системы в вашем проекте. Сохраните её как шаблон и делитесь с командой.

Текст в автолейауте: особенности и ловушки

Автолейаут (Auto Layout) — это мощнейший инструмент для создания адаптивных компонентов. Когда вы оборачиваете текст в автолейаут, он автоматически подстраивается под длину содержимого. Но есть подводные камни.

Первая ловушка — текст с фиксированной шириной внутри автолейаута. Если вы задали ширину 200px для кнопки, а потом поменяете текст на «Сохранить и перейти к оплате», он выйдет за границы. Решение: установите ширину как «Hug Contents» или «Fill Container» — в зависимости от контекста.

Вторая ловушка — вертикальное выравнивание. Если текст в кнопке не по центру — это выглядит неаккуратно. Убедитесь, что в настройках автолейаута выбрано «Center» по вертикали. Также проверьте, что padding внутри компонента симметричен — иначе текст будет «съезжать» при изменении длины.

Третья — переносы. Фигма автоматически переносит текст, если он не помещается. Но в некоторых случаях это приводит к неожиданным разрывам. Например: «Зарегистрироваться через Google» → переносится как «Зарегистрироваться через» + «Google». Это плохо. Решение: используйте неразрывные пробелы (Ctrl+Shift+Space) между словами, которые нельзя разрывать.

Как сделать текст адаптивным

Адаптивный текст — это не про изменение размера на разных экранах. Это про сохранение читаемости и иерархии при любом разрешении. Фигма позволяет создавать адаптивные текстовые компоненты через «Constraints» и «Auto Layout».

Пример: вы проектируете мобильное приложение. На iPhone 14 текст заголовка 24px, а на iPad — 32px. Чтобы это реализовать, создайте компонент с автолейаутом, затем в режиме «Prototype» или «Design» измените размер компонента на другом экране — Фигма предложит сохранить как «Variant». Вариант — это не просто копия, а отдельная версия с сохранённой логикой.

Если вы работаете с фреймворками вроде Figma Tokens или Zeroheight, используйте переменные для размеров шрифтов. Это позволяет синхронизировать типографику с разработкой — текст в дизайне и в коде будет одинаковым.

Представьте, что вы дизайнер, а разработчик говорит: «У вас в макете H1 — 28px, а в коде 30px». Это разногласие убивает доверие. Адаптивный текст — это не про красоту, это про точность.

Частые ошибки при работе с текстом и как их избежать

Ошибки с текстом — одни из самых распространённых, и они не всегда заметны сразу. Вот пять типичных:

• Нет стилей — каждый текст настроен вручную. Результат: 15 разных размеров заголовков, 8 цветов для одного типа текста. Решение: создайте 5–7 стилей и используйте их строго.
• Избыточное жирное начертание — весь текст жирный, чтобы «выделить». Это снижает контраст и создаёт визуальный шум. Используйте жирный только для акцентов.
• Слишком маленький размер — 10–12px для основного текста. Это нарушает WCAG 2.1. Минимум — 14px для мобильных интерфейсов.
• Неправильные интервалы — line-height = 1.0 или 1.1. Текст «прилипает» к тексту. Оптимально — 1.4–1.6 для основного текста.
• Игнорирование переносов — текст обрезается или переносится некорректно. Всегда проверяйте текст в длинных вариантах: немецкий, русский с длинными словами, китайский (если проект международный).

Чтобы избежать этих ошибок, создайте чек-лист для проверки текста перед передачей разработчикам:

• Все тексты используют стили?
• Размеры соответствуют типографической системе?
• Цвета текста и фона имеют контраст не менее 4.5:1?
• Текст не обрезается в автолейауте?
• Проверены длинные варианты?

Экспертное мнение: как текст влияет на UX

Елена подчёркивает: текст — это не декор. Это коммуникация. В дизайне мы часто забываем, что пользователь не знает, что такое «фича» или «контекст». Мы пишем для себя, а не для пользователя. Поэтому перед тем как закрепить текст в макете, задайте себе вопрос: «Поймёт ли это человек, который впервые видит это приложение?»

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

Заключение

Текст в Фигме — это не инструмент для ввода символов. Это фундамент, на котором строится восприятие продукта. Неправильно оформленный текст — это не «мелочь», а угроза конверсии, доверию и usability. Правильная типографика делает интерфейс предсказуемым, понятным и эстетичным. Она уменьшает когнитивную нагрузку, помогает пользователю ориентироваться и действовать.

Каждый раз, когда вы добавляете текст, спрашивайте себя: «Это соответствует нашей типографической системе?», «Поймёт ли это человек, который не знает, что такое Figma?», «Будет ли это читаться на солнце, на маленьком экране, с плохим зрением?»

• Всегда используйте текстовые стили — это основа согласованности.
• Проверяйте текст на длинных вариантах и при увеличении масштаба.
• Автолейаут требует тонкой настройки — не полагайтесь на автоматику.
• Контраст и размер текста — не вопрос вкуса, а вопрос доступности.
• Текст — это голос продукта. Пусть он будет чётким, человечным и уверенным.