Как сделать кнопку в figma

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

Основные типы кнопок в интерфейсах

В современном UX/UI дизайне выделяют несколько основных типов кнопок, каждый из которых решает свою задачу. Понимание этих типов помогает не только визуально оформить элемент, но и правильно передать его функциональную роль пользователю.

Первый тип — основная (primary) кнопка. Она выделяется цветом, размером и положением, чтобы привлечь внимание к главному действию. Например, «Оформить заказ» или «Войти». Такие кнопки обычно используются в формах и призывах к действию.

Второй тип — вторичная (secondary) кнопка. Она менее заметна, часто имеет обводку или светлый фон. Применяется для второстепенных действий, например, «Отмена» или «Назад». Её цель — не отвлекать от основного действия.

Третий тип — текстовая кнопка (text button). Представляет собой ссылку с действием, но оформленную как кнопку. Используется внутри контента или в модальных окнах. Например, «Узнать больше» или «Пропустить».

Четвёртый тип — иконка-кнопка. Содержит только иконку без текста. Удобна в компактных интерфейсах, но требует осторожности: не все иконки интуитивно понятны. Часто используется в панелях управления, например, кнопка «Лайк» или «Удалить».

Как выбрать тип кнопки

Выбор типа зависит от контекста использования. Если действие первостепенное — используйте primary. Если нужно дать альтернативу — secondary. Для экономии места — text button. Для минимализма — icon button.

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

• Primary — одно действие на экране.
• Secondary — вспомогательные действия.
• Text Button — когда важно сохранить лёгкость интерфейса.
• Icon Button — только с узнаваемыми символами.

Шаг за шагом: создание кнопки в Figma

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

Первый шаг — выберите инструмент Rectangle (или нажмите U) и нарисуйте прямоугольник нужного размера. Оптимальная ширина кнопки — от 120 до 240 пикселей, высота — 40–48 px. Это соответствует рекомендациям Material Design и Apple HIG.

Второй шаг — настройте скругление углов. Обычно используется значение от 4 до 8 px. Для более современного вида можно применить 12 px. Значение задаётся в правой панели в разделе «Corner Radius».

Третий шаг — добавьте текст. Выберите Text Tool (T), кликните по фигуре и введите надпись, например, «Отправить». Выберите подходящий шрифт, размер (обычно 14–16 px) и цвет. Текст должен контрастировать с фоном.

Четвёртый шаг — выровняйте текст по центру. Используйте инструменты выравнивания в верхней панели: «Align Horizontal Center» и «Align Vertical Center». Это обеспечит симметрию и профессиональный вид.

Пятый шаг — задайте цвет фона. Кликните на фигуру и в правой панели найдите раздел «Fill». Выберите цвет, соответствующий вашей дизайн-системе. Для primary-кнопки — яркий акцентный цвет, для secondary — белый с обводкой.

Настройка стилей и эффектов

После базовой настройки можно улучшить внешний вид кнопки с помощью теней, градиентов или внутренних эффектов. Например, добавьте тень (Drop Shadow) для создания ощущения глубины.

• Opacity: 10–20%
• X: 0, Y: 2, Blur: 8
• Цвет: чёрный или тёмно-серый

Также можно добавить внутреннюю тень (Inner Shadow) для эффекта «вдавленной» кнопки, хотя этот приём сегодня используется редко. Градиенты уместны в креативных проектах, но не в корпоративных интерфейсах.

Работа с компонентами и вариантами

После создания визуального макета кнопки её необходимо превратить в компонент. Это позволяет повторно использовать элемент и управлять изменениями централизованно.

Чтобы создать компонент, выделите фигуру и текст, затем нажмите Ctrl+Alt+K (Cmd+Option+K на Mac) или кликните по иконке «Create Component» в правой панели. Теперь кнопка становится компонентом с иконкой диаманта в слоях.

Далее — создайте варианты (variants). Они позволяют объединить разные состояния одной кнопки: активное, наведение, отключённое, загрузка. Это ключевой инструмент для масштабирования дизайн-системы.

Создайте копию кнопки, измените её состояние (например, серый фон для disabled) и преобразуйте в компонент. Figma предложит объединить их в variant. Назовите параметры, например, «State» со значениями: Default, Hover, Disabled.

• Default — обычное состояние
• Hover — при наведении курсора
• Pressed — при клике
• Disabled — недоступное состояние
• Loading — во время обработки

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

Автоматизация с помощью Auto Layout

Чтобы кнопка адаптировалась под разный текст, включите Auto Layout. Выделите контейнер кнопки, нажмите «Auto Layout» в правой панели.

Настройте:

• Direction: Horizontal
• Padding: 16–24 px по бокам
• Gap: 8 px (если есть иконка)
• Primary axis: Wrap или Fixed

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

Создание интерактивности и прототипов

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

Перейдите в Prototype, выделите кнопку и потяните стрелку на следующий фрейм (например, экран успешной отправки). В настройках связи выберите Trigger: «On Click», Action: «Instant» или «Smart Animate».

Для имитации hover-состояния используйте Trigger «While Hovering». Подключите кнопку в состоянии Hover к самой себе. Это создаёт эффект наведения при просмотре prototype в браузере.

Если вы используете Variants, Figma позволяет переключать состояния без создания отдельных фреймов. В настройках связи выберите «Change to Variant» и укажите целевой state.

Анимации и микроинтеракции

Добавление микроанимаций усиливает восприятие. Например, при клике кнопка может немного уменьшиться (scale 95%), а затем вернуться. Это создаёт тактильную обратную связь.

Настройте:

• Action: Smart Animate
• Duration: 100–150 ms
• Easing: Ease In Out

Также можно добавить спиннер (loading indicator) внутри кнопки. Создайте отдельный фрейм с анимированной иконкой и подключите его через Change to Variant.

Доступность и юзабилити кнопок

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

Цветовой контраст между текстом и фоном должен быть не менее 4.5:1 для нормального текста (по стандарту WCAG 2.1). Используйте плагины в Figma, например, Stark или Contrast Checker, чтобы проверить соответствие.

Минимальный размер кнопки — 44×44 px. Это обеспечивает удобное нажатие на сенсорных экранах. Особенно важно для мобильных приложений.

Также добавьте описание (description) для скринридеров. В Figma это делается через плагины или при экспорте в код. Название кнопки должно быть понятным: не «OK», а «Сохранить изменения».

• Избегайте аббревиатур
• Не используйте только цвет для обозначения состояния
• Добавляйте иконки для улучшения восприятия

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

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

«Сегодня многие дизайнеры гонятся за минимализмом, жертвуя юзабилити, — говорит Артём Лебедев, руководитель дизайн-студии «Парабола». — Я видел кнопки, которые почти сливаются с фоном. Это не стиль — это ошибка. Кнопка должна быть найдена за 0.5 секунды. Если пользователь колеблется — вы проиграли».

Он рекомендует использовать принцип F-pattern при размещении кнопок: в зоне естественного взгляда, слева направо, сверху вниз. Также советует тестировать кнопки с реальными пользователями — A/B-тестирование покажет, какой вариант даёт выше конверсию.

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

Заключение

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

• Определите тип кнопки до начала работы.
• Превращайте кнопки в компоненты и используйте variants.
• Подключайте auto layout для адаптивности.
• Тестируйте контраст и размеры на соответствие стандартам.
• Добавляйте интерактивность в прототипах для реалистичной демонстрации.