Как сделать плашки в фигме
Плашка, или бейдж - это небольшой графический элемент, который визуально выделяет краткий текст: статус, метку, категорию. В интерфейсах они показывают состояние объекта, например, «Новый», «В процессе», «Оплачено». В Figma создание плашек - это фундаментальный навык, основанный на работе с авто-лейаутом и компонентами. Освоив его, вы сможете быстро строить гибкие и согласованные системы элементов для любого проекта.
Вы можете создать интернет магазин за 1 вечер. Просто выберите готовый шаблон интернет магазина и установите его. Останется только наполнить его своими товарами.
Что такое плашка и зачем она нужна
Плашка представляет собой компактный цветной контейнер, чаще всего прямоугольной или скругленной формы, внутри которого размещается текстовая метка. Её ключевая задача - быстро донести до пользователя статус или категорию элемента интерфейса без лишних пояснений.
Эффективно использованные плашки значительно улучшают визуальную навигацию и сканирование страницы, помогая глазу сразу цепляться за важную информацию. Они незаменимы в таблицах, карточках товаров, списках заказов и системах управления. Стилистически плашки вносят разнообразие в типографику и добавляют интерфейсу динамичности.
Базовый принцип создания плашки
Основой для современной плашки в Figma служит Frame (Фрейм) или Auto layout (Автоматическое расположение).
- Рекомендуется сразу создавать фрейм с авто-лейаутом, чтобы внутренние отступы и размеры были управляемыми.
- Затем этому фрейму задаются заливка, скругление углов и, при необходимости, обводка.
- Внутрь фрейма добавляется текстовый слой - это и будет метка плашки.
"Главный секрет" заключается в настройке внутренних отступов (падингов) в свойствах авто-лейаута: они обеспечивают равномерное расстояние между текстом и краями плашки при любом содержимом.
Настройка авто-лейаута для адаптивности
Авто-лейаут - это сердце гибкой плашки. После добавления текста внутрь фрейма необходимо настроить горизонтальные и вертикальные отступы (Padding). Для небольших плашек обычно хватает значений 4-6 px по горизонтали и 2-4 px по вертикали, но параметры зависят от выбранного размера текста.
Критически важно установить режим изменения размеров самого фрейма на Hug contents (Обнимать содержимое), чтобы ширина плашки подстраивалась под длину текста. Для высоты часто выбирают режим Fixed (Фиксированная), задавая конкретное значение для выравнивания по базовой линии сетки.
Цветовые стили и варианты состояния
Чтобы плашки были единообразными и легко редактировались, необходимо создать для них Color Styles (Цветовые стили). Обычно создаётся стиль для заливки фона и, отдельно, стиль для цвета текста. Это позволяет одним кликом менять внешний вид всех плашек определённого типа, например, всех плашек со статусом «Успех». Для разных состояний (Success, Error, Warning, Neutral) создаются отдельные компоненты-варианты внутри одного Компонента (Component). Это обеспечивает не только визуальную, но и логическую систематизацию.
Создание компонента и его вариантов
Когда базовая плашка готова, преобразуйте её в главный компонент (Ctrl+Alt+K). Далее, используя функцию Variants (Варианты), вы можете создать в рамках этого компонента все необходимые состояния. Вот примерная таблица свойств, которые можно контролировать через варианты:
| Свойство варианта | Возможные значения (пример) |
|---|---|
| Цвет типа (type) | success, error, warning, info |
| Размер (size) | small, medium, large |
| Наличие иконки | default, icon-left, icon-right |
Работа с вариантами позволяет дизайнеру и разработчику оперировать не разрозненными стилями, а цельной системой. После создания библиотеки таких компонентов их повторное использование в макетах становится вопросом нескольких секунд.
Вывод
Создание плашек в Figma - это не просто рисование цветных прямоугольников с текстом. Это процесс построения системного элемента интерфейса на основе авто-лейаута, цветовых стилей и компонентов с вариантами.
Такой подход гарантирует, что ваши плашки будут согласованными, адаптивными и легкими в поддержке как в процессе дизайна, так и при передаче в разработку. Освоив эти принципы, вы сможете эффективно создавать любые похожие элементы интерфейса, формируя целостный и профессиональный дизайн-систем.