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

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

Что такое плашка в дизайне интерфейсов

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

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

В системах дизайна плашки часто стандартизированы: определены цветовые схемы, размеры, скругления и типографика. Это позволяет сохранять единый стиль и ускоряет процесс разработки. Figma идеально подходит для создания таких стандартов благодаря компонентам, вариантам и стилям.

Основные типы плашек и их применение

Не все плашки одинаковы. В зависимости от цели и контекста они делятся на несколько типов. Знание этих типов помогает выбрать правильный стиль и поведение элемента.

• Информационная плашка — сообщает нейтральную информацию (например, «Обновление системы завершено»). Часто используется синий или серый цвет.
• Успешное уведомление — сигнализирует об успешном действии («Файл загружен»). Обычно зелёная с иконкой галочки.
• Предупреждение — требует внимания, но не является критичным («Срок действия истекает через 3 дня»). Жёлтая или оранжевая.
• Ошибка — указывает на проблему («Неверный пароль»). Красный фон, белый текст.
• Акционная/маркетинговая плашка — привлекает внимание к спецпредложению. Яркие цвета, иногда с градиентом.

Как сделать плашку в Figma: пошаговая инструкция

Создание плашки в Figma — простой процесс, но важно выполнить его правильно, чтобы элемент был удобен для дальнейшего использования и адаптации.

Шаг 1: Создание базовой фигуры

Откройте Figma и выберите инструмент Rectangle (R). Нарисуйте прямоугольник нужного размера. Для стандартной плашки рекомендуется ширина 320–360 пикселей (под мобильный экран), высота — 48 пикселей.

Щёлкните по фигуре в слоях, чтобы выделить её. Убедитесь, что в правой панели активен заливка (Fill). Выберите нужный цвет из библиотеки или введите HEX-код.

Шаг 2: Настройка скруглений

В том же меню свойств найдите параметр Corner Radius. Для современных интерфейсов оптимальное значение — 8 px. Это создаёт мягкий, но не чрезмерно округлый вид. Можно задать разные значения для каждого угла, если требуется нестандартная форма.

Шаг 3: Добавление тени (опционально)

Если плашка должна визуально «плавать» над контентом, добавьте тень. В разделе Effects нажмите «+» и выберите Drop Shadow. Установите:

• X: 0
• Y: 2
• Blur: 8
• Color: rgba(0,0,0,0.1)

Тень делает плашку объёмной, но не должна отвлекать от содержимого.

Шаг 4: Добавление текста

Выберите инструмент Text (T) и кликните внутри плашки. Введите нужный текст. Установите шрифт, размер (обычно 14–16 px), цвет (контрастный к фону) и выравнивание по центру.

Чтобы текст не выходил за границы, можно использовать Auto Layout. Выделите плашку и текст, затем нажмите на значок Auto Layout в верхней панели. Это сделает плашку адаптивной под разный объём текста.

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

Один из главных преимуществ Figma — возможность создавать компоненты. Это позволяет использовать одну плашку во многих местах проекта и легко обновлять её.

Превращение в компонент

Выделите готовую плашку (с текстом и фоном), щёлкните правой кнопкой и выберите Create Component. Теперь её можно перетаскивать в другие фреймы и страницы.

Добавление вариантов

Чтобы создать несколько типов плашек (информация, успех, ошибка), продублируйте компонент и измените цвет фона. Затем объедините их в один компонент с вариантами:

1. Выделите все плашки.
2. Нажмите правой кнопкой → Create Component Set.
3. В правой панели появится раздел Variants, где можно задать свойства (например, тип: info, success, error).

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

Дизайн и эстетика: цвет, скругления, тени

Внешний вид плашки влияет на восприятие интерфейса. Даже небольшие изменения могут сделать элемент более приятным или, наоборот, раздражающим.

Цвет — самый важный фактор. Он должен соответствовать семантике: зелёный = хорошо, красный = плохо. Избегайте слишком ярких или неестественных оттенков. Используйте цветовые стили Figma, чтобы сохранить согласованность.

Скругления придают мягкость. Современные тренды — скругления от 6 до 12 px. Углы 90° выглядят жёстко, подходят только для технических интерфейсов.

Тени должны быть лёгкими. Тяжёлая тень делает плашку «всплывающей», хотя она может быть частью основного потока. Лучше использовать полупрозрачные тени с низкой непрозрачностью.

Распространённые ошибки при создании плашек

Даже опытные дизайнеры допускают ошибки. Вот самые частые:

• Слишком много плашек на экране — теряется акцент, пользователь не понимает, что важно.
• Плохой контраст текста — например, светлый текст на светлом фоне. Это нарушает доступность.
• Отсутствие внутренних отступов — текст «прилипает» к краям, выглядит некомфортно.
• Жёсткая привязка к размеру — плашка не адаптируется под разный объём текста. Решение — Auto Layout.
• Использование разных стилей для одного типа — например, два варианта «успешной» плашки с разными цветами.

Экспорт и использование плашек в прототипах

Плашка — не только статический элемент. Её можно использовать в интерактивных прототипах.

Чтобы экспортировать плашку как изображение, выделите её, перейдите в раздел Export и выберите формат (PNG, SVG). Для иконок лучше использовать SVG — он масштабируется без потерь.

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

• Выберите плашку.
• Перейдите во вкладку Prototype.
• Создайте связь с другим фреймом или используйте Smart Animate для плавного исчезновения.

Если плашка используется в библиотеке команды, убедитесь, что она задокументирована: назначение, типы, ограничения. Это можно сделать в режиме Dev Mode или через описание компонента.

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

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

Заключение

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

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