Как сделать фон текста в фигме

Как сделать фон текста в Фигме — задача, с которой сталкиваются дизайнеры при создании кнопок, тегов, заголовков и других элементов интерфейса, требующих визуального акцента. Хотя Фигма не предоставляет прямой опции «фон текста» как в графических редакторах, существует несколько надёжных, профессиональных и гибких способов добиться этого эффекта без потери качества и адаптивности. Главная рекомендация: используйте прямоугольник под текстом с привязкой к его границам — это сохраняет точность, масштабируемость и совместимость с системами дизайна.

В современном UI/UX-дизайне фон текста — не просто декоративный элемент. Он усиливает читаемость, выделяет ключевые метки (например, статусы “Онлайн”, “Новый”), создаёт визуальную иерархию и улучшает восприятие интерфейса на мобильных устройствах. По данным исследования NNGroup, элементы с контрастным фоном воспринимаются на 27% быстрее, чем обычный текст на фоне сложного изображения. В Фигме, где акцент сделан на компонентах и системах дизайна, умение правильно оформлять фон текста — это базовый навык для любого профессионала.

Метод 1: Прямоугольник с Auto Layout

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

Шаги:

1. Создайте текстовый слой с нужным содержимым (например, “Новинка”).
2. Создайте прямоугольник (R) чуть больше текста — лучше на 4–8 пикселей по ширине и 2–4 по высоте.
3. Выделите оба слоя — текст и прямоугольник — и нажмите Cmd/Ctrl + Shift + A, чтобы включить Auto Layout.
4. В панели свойств выберите «Horizontal» для направления, установите выравнивание по центру (Center), и добавьте отступы (padding) — рекомендуется 8–12 пикселей.
5. Настройте радиус скругления (Border Radius) прямоугольника: 12–16 пикселей для мягких элементов, 4–8 для жёстких.
6. Выберите цвет фона — используйте цвет из вашей дизайн-системы, например, $primary-500.

Теперь, если вы измените текст на “Скидка 50%”, прямоугольник автоматически расширится. Это идеально подходит для локализации, тестирования и работы с CMS. Для ещё большей гибкости можно превратить этот набор в компонент — и использовать его везде, где нужен фон текста.

Метод 2: Текст на прозрачном фоне с обводкой

Иногда требуется, чтобы фон текста был не сплошным, а полупрозрачным или имел градиент. В этом случае подход с прямоугольником не всегда подходит — особенно если текст должен “плавать” на сложном фоне (например, на фото или градиенте).

Альтернатива — использовать обводку (Stroke) и эффекты:

1. Создайте текстовый слой.
2. В панели свойств найдите раздел “Stroke” и включите его.
3. Установите цвет обводки в тон, близкий к фону, а толщину — 1–2 пикселя.
4. Перейдите к “Shadow” и добавьте внутреннюю тень (Inner Shadow) с цветом, соответствующим желаемому фону.

Этот метод подходит для стилей вроде “текст в рамке” или “выделение текста на темном фоне”. Однако он не масштабируется по ширине — обводка не увеличивается при изменении длины текста, поэтому не подходит для динамических элементов.

Метод 3: Стили и компоненты для масштабирования

Чтобы применять фон текста в масштабных проектах — например, в дизайне приложения с 50+ экранами — необходимо систематизировать процесс через компоненты и стили.

Создайте компонент “Tag”:

• Включите Auto Layout (как в методе 1).
• Превратите группу в компонент: нажмите Cmd/Ctrl + R.
• В панели компонентов задайте параметры переопределения: текст, цвет фона, радиус, шрифт.

Теперь вы можете использовать этот компонент в любом месте. При изменении текста — фон подстраивается. При изменении цвета фона — вы меняете его в одном месте, и обновляется всё.

Для ещё большей эффективности:

• Создайте стили для текста: “Tag/Primary”, “Tag/Secondary” — с предустановленными цветами, размерами и выравниванием.
• Сохраните компонент в библиотеке и подключите к другим проектам.

Это стандарт для командных проектов в Figma. Компании вроде Notion и Airtable используют именно такие подходы — и они обеспечивают согласованность даже при сотнях изменений.

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

Даже опытные дизайнеры допускают ошибки, которые снижают качество интерфейса.

Ошибка 1: Неправильное выравнивание

Если текст не центрирован по вертикали относительно фона — выглядит неаккуратно. Всегда проверяйте, что текст и прямоугольник имеют одинаковое вертикальное выравнивание (Center). Используйте инструмент “Align” в панели свойств.

Ошибка 2: Слишком маленький отступ

Отступы меньше 6 пикселей создают ощущение “прижатости”. Оптимально — 8–12 пикселей. Для мобильных интерфейсов — не менее 10.

Ошибка 3: Использование фона у текста вместо прямоугольника

Фигма не имеет функции “background text”, но многие пытаются использовать “Fill” у текста — это приводит к непредсказуемому поведению при изменении шрифта, размера или переносу строк.

Ошибка 4: Неиспользование компонентов

Если вы используете фон текста в 5+ местах, но не превратили его в компонент — вы рискуете потерять согласованность. Обновление цвета в одном месте не повлияет на другие.

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

Дмитрий рекомендует создавать “шаблоны-базы” для всех типов текстовых элементов: теги, метки, статусы, хлебные крошки. Каждый шаблон должен иметь:

• Предустановленный шрифт (например, Inter Medium 14px);
• Фиксированный padding (12px horizontal, 6px vertical);
• Цвета, привязанные к теме (light/dark mode);
• Автоматическое изменение радиуса при изменении типа элемента.

Такой подход экономит до 40% времени на редизайн и гарантирует, что даже новички в команде не нарушат визуальную целостность.

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

Заключение

Создание фона текста в Фигме — это не трюк, а профессиональный навык, который напрямую влияет на качество интерфейса. Неправильно оформленный фон может разрушить визуальную иерархию, снизить читаемость и создать ощущение “сырости” продукта. Лучший подход — сочетание Auto Layout, компонентов и системных стилей. Это не просто “как сделать”, а “как сделать правильно, масштабируемо и для команды”.

• Всегда используйте Auto Layout для фона текста — это обеспечивает адаптивность.
• Превращайте элементы в компоненты, чтобы избежать дублирования и ошибок.
• Проверяйте контрастность текста и фона по WCAG — это не опционально, а требование доступности.
• Не применяйте фон к тексту — только к прямоугольнику под ним.
• Создавайте единые стили для всех типов текстовых меток — это экономит время и повышает согласованность.