Как в фигме сделать подложку под текст

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

Зачем нужна подложка под текст: функция и эстетика

Подложка под текст — это фоновый элемент, который улучшает читаемость и выделяет контент на макете. Особенно актуально это в интерфейсах, где текст появляется поверх изображений, градиентов или сложных фонах. Без подложки даже крупный шрифт может «теряться», снижая UX. Согласно исследованиям Nielsen Norman Group, контраст между текстом и фоном напрямую влияет на скорость восприятия информации.

Кроме практической пользы, подложка выполняет декоративную роль. Она помогает создавать визуальную иерархию, акцентируя внимание на важных блоках: названиях разделов, уведомлениях, ценниках, кнопках. Дизайнеры используют её для придания законченности микровзаимодействиям и повышения качества восприятия продукта.

Не стоит забывать и про доступность. Подложка позволяет соблюдать стандарты WCAG 2.1 по контрасту. Например, если белый текст расположен над светлым изображением, минимальный контраст 4.5:1 не будет достигнут. Подложка решает эту проблему, добавляя прозрачный или полупрозрачный бэкграунд.

Основные способы создания подложки под текст

Существует несколько подходов к созданию подложки, каждый из которых подходит для разных задач. Рассмотрим базовые методы, которые работают вне зависимости от сложности проекта.

Первый и самый простой способ — ручное создание фигуры. Выберите инструмент Rectangle (R), нарисуйте прямоугольник, измените его цвет и расположите точно под текстовым слоем. Убедитесь, что слой с текстом находится выше в стеке объектов. Это можно проверить в панели Layers слева.

Для точного позиционирования используйте привязку (Snap to Grid) и контролируйте расстояния через инспектор справа. Добавьте внутренние отступы вручную: увеличьте ширину и высоту фигуры на 16–24 пикселя относительно текста. Чтобы углы выглядели гармонично, установите скругление (Corner Radius) от 4 до 12 px.

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

Третий способ — применение эффекта Background. Хотя Figma не имеет встроенного свойства «фон текста», вы можете имитировать его с помощью эффектов. Например, добавьте Stroke вокруг текста, но это уже не подложка, а обводка. Такой трюк иногда используют для создания эффекта «светящегося» текста, но не для улучшения читаемости.

Автоматизация через Auto Layout: шаг за шагом

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

Начнём с создания основы. Нарисуйте текст, затем выберите его и нажмите Ctrl+G (или Cmd+G на Mac), чтобы сгруппировать. Затем кликните правой кнопкой мыши по группе и выберите «Add Auto Layout» (или найдите кнопку в верхнем правом углу). Теперь группа стала контейнером с Auto Layout.

Настройка внутренних отступов

В правой панели появятся параметры Auto Layout. Здесь важно задать Padding (внутренние отступы). Установите одинаковые значения для всех сторон — например, 12 px. Это обеспечит равномерный «буфер» вокруг текста. Если нужно больше места снизу или сверху, настройте отдельно Padding Top/Bottom.

Цвет подложки задаётся через свойство Background в том же инспекторе. Нажмите плюсик рядом с Background, выберите цвет. Можно использовать сплошной цвет, градиент или даже изображение. Прозрачность регулируется через ползунок Opacity.

Выравнивание и направление

По умолчанию Auto Layout работает по горизонтали (Horizontal). Для однострочного текста этого достаточно. Если вы планируете многострочный блок, измените направление на Vertical. В этом случае подложка будет растягиваться по высоте при переносе слов.

Убедитесь, что текст выровнен по центру. Внутри Auto Layout-контейнера используйте параметр TextAlign: Center. Это особенно важно для кнопок и тегов.

Пример: кнопка с подложкой

Представьте, что вы создаёте кнопку «Купить». Текст динамический — может меняться на «Добавить в корзину» или «В корзине». Вот как сделать универсальную подложку:

1. Введите текст «Купить».
2. Оберните его в Auto Layout (Shift+A).
3. Задайте Padding: 16 px по вертикали, 24 px по горизонтали.
4. Выберите цвет фона — например, #FF6B35.
5. Добавьте скругление углов: 8 px.
6. Проверьте, как выглядит текст при замене.

Теперь при любом изменении текста подложка автоматически подстроится под новый размер.

Создание компонентов и вариантов для масштабирования

Когда вы определились с внешним видом подложки, самое время превратить её в компонент. Это необходимо для повторного использования и поддержания единообразия в дизайн-системе.

Выделите Auto Layout-контейнер с текстом и подложкой, нажмите Ctrl+Alt+K (Cmd+Option+K). Элемент станет компонентом. Перейдите во вкладку Components, чтобы управлять им. Теперь вы можете перетаскивать этот блок в любую часть макета.

Для гибкости создайте Variants (варианты). Например, у вас может быть несколько состояний: активный, неактивный, с ошибкой. Или разные типы: первичная кнопка, вторичная, тег, уведомление. Чтобы объединить элементы в вариант:

• Создайте копию компонента.
• Измените цвет, текст или размер.
• Выделите оба компонента, кликните правой кнопкой → Create Component Set.
• Настройте свойства (например, Type: Primary / Secondary).

Теперь при использовании в макете вы сможете быстро переключаться между состояниями через правую панель.

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

Даже опытные дизайнеры допускают типичные ошибки при создании подложек. Разберём самые распространённые и пути их решения.

Первая ошибка — фиксированный размер фигуры. Когда вы вручную рисуете прямоугольник под текст, он не реагирует на изменения. Если текст удлинится, подложка останется прежней, и контент «вылезет» за границы. Решение — использовать Auto Layout, как описано выше.

Вторая ошибка — игнорирование доступности. Некоторые выбирают слишком прозрачные подложки (менее 70% opacity), что не обеспечивает достаточного контраста. Проверяйте сочетание цветов с помощью плагинов вроде Stark или Contrast Checker. Цель — минимум 4.5:1 для обычного текста.

Третья ошибка — неправильная иерархия слоёв. Если текст находится под фигурой, он будет невидим. Всегда следите за порядком в панели Layers. Текст должен быть выше подложки. При использовании Auto Layout это происходит автоматически.

Четвёртая ошибка — отсутствие отступов. Подложка вплотную к буквам выглядит тесно и некомфортно. Минимальный внутренний отступ — 8 px. Оптимально — 12–16 px по вертикали, 16–24 px по горизонтали.

Проверочный чек-лист

• Текст находится выше подложки в слоях.
• Подложка адаптируется под изменение текста (через Auto Layout).
• Есть достаточные внутренние отступы.
• Цвет фона обеспечивает контраст не ниже 4.5:1.
• Скругление углов соответствует стилю системы.
• Элемент преобразован в компонент при необходимости.

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

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

«В одном из проектов мы отказались от подложек ради “чистоты” дизайна. Результат — негативные отзывы в тестировании: пользователи не видели кнопок действий. Вернули подложки с 80% чёрным фоном — и конверсия выросла на 17%. Иногда простые решения дают мощный эффект.»

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

Заключение

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

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