Как добавить кнопку в фигма

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

Основные этапы создания кнопки

Представьте, что вы только начали работу над дизайном страницы входа. Первое, что бросается в глаза — это крупная кнопка «Войти». Как её сделать быстро, но правильно? Начните с базовых шагов: создание формы, текста, стилизация и группировка.
Первым делом выберите инструмент Rectangle (R) и нарисуйте прямоугольник нужного размера. Обычно для основной CTA-кнопки берут высоту 44–48 пикселей, а ширину — от 120 до 320 пикселей, в зависимости от контекста. Добавьте скругление углов (в Figma по умолчанию часто используется 8 px). Это не просто эстетика — исследования Nielsen Norman Group показывают, что скруглённые углы улучшают восприятие и направляют взгляд пользователя.
Теперь добавьте текст. Выберите инструмент Text (T), кликните по фигуре и введите нужную подпись: «Отправить», «Продолжить» и т.д. Убедитесь, что шрифт соответствует дизайн-гайдам — обычно используется полужирное начертание (Semi-Bold или Bold) для лучшей читаемости. Цвет текста должен контрастировать с фоном кнопки. По данным WCAG 2.1, минимальный коэффициент контрастности для текста размером до 18 pt — 4.5:1.

Как выбрать цвет и стиль

Цвет кнопки — не просто выбор дизайнера. Он влияет на поведение пользователя. Например, красный чаще ассоциируется с действием удаления, зелёный — с подтверждением, синий — с нейтральным переходом. Google Material Design рекомендует использовать первичный цвет бренда для основных CTA-кнопок.

Группируйте фигуру и текст (Ctrl+G / Cmd+G), чтобы они двигались как единый объект. Это важно на этапе макетирования, хотя позже вы всё равно замените группу на компонент.

Работа с Auto Layout для кнопок

Auto Layout — один из самых мощных инструментов Figma. Он позволяет создавать гибкие, адаптивные элементы, которые автоматически подстраиваются под изменение текста или размеров. Без него каждая кнопка с другим текстом потребует ручной подгонки.
Чтобы применить Auto Layout к кнопке, выделите группу с фигурой и текстом, затем нажмите на значок Auto Layout в правой панели (или Ctrl+Shift+A / Cmd+Shift+A). Теперь контейнер будет «обтекать» содержимое. Настройте внутренние отступы (padding): например, 16 px по горизонтали и 12 px по вертикали. Это обеспечит комфортное пространство вокруг текста.
Если вы измените текст на более длинный — скажем, с «OK» на «Подтвердить действие» — кнопка автоматически расширится. Это особенно ценно при локализации: одна и та же кнопка может использоваться в английской, немецкой и японской версиях интерфейса без дополнительной настройки.

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

Убедитесь, что текст выровнен по центру (в панели свойств: Align Horizontal & Vertical Center). Если внутри кнопки появятся иконки (например, стрелка справа), используйте разделитель (gap) между элементами. Для кнопки с иконкой установите gap = 8 px — этого достаточно, чтобы визуально отделить элементы, не перегружая интерфейс.

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

Кнопка — не единичный элемент. Она существует в разных состояниях, типах и размерах. Чтобы не копировать и не переоформлять каждый раз, преобразуйте её в компонент.
Выделите готовую кнопку (с Auto Layout) и нажмите Ctrl+Alt+K (Cmd+Option+K). Она станет синей в Layers панели — признак компонента. Теперь вы можете перетаскивать её экземпляры (instances) в любой части файла. Изменения в основном компоненте автоматически распространяются на все экземпляры.
Но реальные проекты требуют больше гибкости. Вам нужны: первичная, вторичная, третичная кнопки, кнопки-ссылки, иконки-кнопки, разные размеры (small, medium, large). В этом помогут варианты компонентов (Component Properties).
Добавьте свойства:

• Type: Primary, Secondary, Tertiary, Link
• Size: Small, Medium, Large
• State: Default, Hover, Pressed, Disabled (о них позже)

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

Состояния кнопок: hover, active, disabled

Интерактивность начинается со состояний. Пользователь должен понимать, где он навёл курсор, нажал или что элемент недоступен. В Figma это реализуется через компонентные свойства и мастер-кадры.
Создайте несколько версий одной кнопки:

• Default — обычное состояние
• Hover — при наведении (часто +10% яркости фона или тень)
• Pressed — при нажатии (можно уменьшить высоту на 1–2 px или изменить цвет)
• Disabled — недоступна (серый цвет, opacity 50%)

Добавьте свойство State в компонент и свяжите каждый вариант с нужным состоянием. Теперь в режиме Prototype вы сможете имитировать переходы между ними.

Как связать состояния в прототипе

Перейдите во вкладку Prototype. Выделите кнопку в состоянии Default. В правой панели:

• Добавьте Interaction: On Hover → Hover (выберите нужный вариант)
• On Click → Pressed
• После отпускания — можно вернуться в Default

Для мобильных интерфейсов используйте Tap вместо Click. Это важно для корректного воспроизведения на устройствах.

Настройка прототипов с помощью кнопок

Кнопка — это не только элемент дизайна, но и триггер действия. В Figma вы можете настроить переходы между экранами, открывать модальные окна, отправлять формы (условно).
Выберите кнопку, перейдите в Prototype, нажмите «+» рядом с On Click. Проведите стрелку к нужному фрейму (например, «Главная страница» после авторизации). Выберите тип перехода: Instant, Slide, Push. Установите длительность анимации — 300 ms считается оптимальной (по данным Google Motion Guidelines).
Если кнопка должна выполнять несколько действий (например, изменить своё состояние и запустить переход), используйте Smart Animate. Он обеспечит плавную анимацию между состояниями и экранами.

Использование переменных (нововведение 2025 года)

С выходом Variables API в Figma стало возможным динамическое управление стилями. Теперь вы можете хранить цвета кнопок (primary, secondary) в виде переменных и ссылаться на них в компонентах.
Создайте переменную:

• Имя: Color/Primary/Base
• Тип: Color
• Значение: #0066CC

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

Дизайн-системы и стандарты кнопок

В крупных проектах кнопки регулируются дизайн-системой. Она определяет:

• Единые размеры и отступы
• Цветовые роли (primary, danger, success)
• Типографику
• Анимации
• Доступность

Figma позволяет создавать библиотеки компонентов, которые подключаются к нескольким файлам. Разработчики могут использовать плагин FigJam или Dev Mode, чтобы получить точные значения цветов, отступов и код.
Пример структуры библиотеки:

• Components / Buttons / Primary / Medium / Default
• Components / Buttons / Secondary / Large / Hover

Такой подход исключает разночтения и ускоряет разработку. По данным InVision, команды, использующие дизайн-системы, экономят до 34% времени на реализацию интерфейсов.

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

Профессиональные практики:

• Всегда используйте компоненты, даже для одноразовых кнопок
• Тестируйте кнопки на реальных пользователях: замечают ли они, понимают ли действие
• Следите за консистентностью: если primary-кнопка в одном месте синяя, она не может быть зелёной в другом
• Добавляйте описание в Notes (в Figma) — что делает кнопка, какие есть ограничения

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

Заключение

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

• Всегда используйте Auto Layout для адаптивности кнопок
• Преобразовывайте кнопки в компоненты с вариантами типов и размеров
• Реализуйте состояния: hover, pressed, disabled — для реалистичного прототипа
• Применяйте переменные для управления цветами и темами
• Интегрируйте кнопки в дизайн-систему для командной согласованности