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

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

Чтобы создать кнопку в Figma, начните с простой фигуры, добавьте текст, оформите стиль и превратите в компонент. Это обеспечит единообразие и упростит внесение изменений.

Содержание статьи:

Основы создания кнопки
Шаги создания базовой кнопки
Создание интерактивной кнопки с состояниями
Настройка прототипа для кнопки
Работа с компонентами и инстансами
Ошибки при работе с компонентами
Дизайн-системные подходы к кнопкам
Пример структуры компонентов
Совершенствование дизайна кнопок
Чек-лист идеальной кнопки
Экспертное мнение
Вопросы и ответы
Заключение

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

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

После создания фигуры задайте параметры: цвет заливки, радиус скругления, толщину и цвет обводки. Стандартный радиус для кнопок — от 4 до 12 пикселей, в зависимости от стиля дизайна. Например, в Material Design часто используют 4 px, а в современных интерфейсах Apple — 8–12 px. Размер кнопки должен позволять удобно взаимодействовать с ней на всех устройствах.

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

Полезно знать: Минимальная высота кнопки для мобильных интерфейсов — 44–48 px, чтобы обеспечить удобное касание пальцем.

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

Шаги создания базовой кнопки

Выберите инструмент Rectangle (R) и нарисуйте прямоугольник.
Настройте скругление углов: установите значение в поле Corner Radius.
Задайте цвет заливки (Fill) и, при необходимости, обводку (Stroke).
Добавьте текст с помощью инструмента Text (T).
Выровняйте текст по центру кнопки (используйте выравнивание в правой панели).
Сгруппируйте элементы (Ctrl+G / Cmd+G).

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

Реальная кнопка в интерфейсе имеет несколько состояний: обычное, наведение (hover), активное (pressed), неактивное (disabled). Чтобы смоделировать их в Figma, нужно использовать компоненты и варианты (variants). Это позволяет создать динамическую кнопку, которую можно использовать в прототипах.

Начните с копирования базовой кнопки. Создайте несколько версий: одну — с затемнённым фоном (для hover), другую — с более тёмным цветом (для pressed), третью — с прозрачной заливкой и серым текстом (для disabled). Каждая версия должна находиться на одном холсте, рядом друг с другом.

Теперь выделите первую кнопку и преобразуйте её в компонент: кликните правой кнопкой → Create Component. Затем выделите остальные кнопки и перетащите их в раздел Variants в панели Properties. Figma автоматически определит, что это варианты одного компонента, и сгруппирует их.

«Используйте осмысленные имена для состояний: Primary/Hover, Primary/Pressed, Secondary/Disabled. Это упрощает работу команде и повышает ясность в библиотеке компонентов.» — Анна Петрова, UX-дизайнер, 7 лет опыта

Теперь, когда вы используете эту кнопку в макете, можно переключаться между состояниями прямо в канвасе. Для прототипирования свяжите состояния с событиями: например, при наведении мыши переходите на hover-версию, при клике — на pressed.

Настройка прототипа для кнопки

Перейдите на вкладку Prototype в правой панели.
Выделите основную кнопку (default state).
Добавьте связь: перетащите стрелку на hover-версию.
Установите триггер: On Hover.
Добавьте обратную связь: с hover на default с триггером While Hovering.
Аналогично настройте клик: On Click → Pressed, с возвратом после короткой задержки.

Полезно знать: Чтобы имитировать «отпускание» кнопки, используйте триггер After Delay (например, 0.2 секунды) для возврата к состоянию по умолчанию.

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

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

Чтобы создать компонент кнопки, выделите её и нажмите Ctrl+Alt+K (Windows) или Cmd+Option+K (macOS). Откроется панель компонентов. Убедитесь, что выбран тип Main Component, если это первая версия. Если вы уже работаете с вариантами, Figma предложит добавить текущий элемент как вариант.

Инстансы можно настраивать, если включены свойства Overrides. Например, можно разрешить изменение текста, цвета или иконки внутри кнопки. Для этого в режиме редактирования компонента щёлкните по текстовому блоку и в правой панели включите значок Override (иконка квадрата с точкой).

Свойство	Можно переопределять?	Как включить
Текст	Да	Выделить текст → включить Override
Цвет фона	Да (через переменные)	Привязать Fill к переменной цвета
Иконка	Да	Сделать иконку отдельным компонентом и вложить
Размер	Частично	Использовать Auto Layout с min/max шириной

Ошибки при работе с компонентами

Нет иерархии: Не группируйте компоненты хаотично. Используйте слэш-нотацию: Button/Primary, Button/Secondary.
Жёсткая привязка размеров: Без Auto Layout инстансы теряют гибкость. Всегда применяйте Auto Layout к кнопкам.
Неупорядоченные варианты: Figma сортирует варианты по свойствам. Назначайте логические метки: Size=Small, State=Hover.

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

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

Создайте набор основных типов кнопок:

Primary — основное действие (например, «Оплатить»).
Secondary — второстепенное («Назад»).
Tertiary — текстовая кнопка без фона.
Danger — для удаления или критических действий.

Для каждого типа определите цвет, шрифт, отступы и иконки. Используйте Figma Variables, чтобы задать цветовые переменные: primary-color, danger-color, text-on-primary и т.д. Это позволит быстро менять темы (светлая/тёмная) и поддерживать согласованность.

Полезно знать: Переменные в Figma заменили старые Local Styles. Они поддерживают темы, числовые значения и даже размеры.

Также задайте стандартные размеры: Small, Medium, Large. Эти значения можно хранить как переменные размеров. При создании кнопки привяжите Auto Layout к этим переменным, чтобы все кнопки одного размера вели себя одинаково.

Пример структуры компонентов

Button/Primary/Default
Button/Primary/Hover
Button/Primary/Pressed
Button/Primary/Disabled
Button/Secondary/Default
… и так далее

Такая структура легко масштабируется и интуитивно понятна для всей команды.

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

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

Используйте тени и эффекты для глубины. Добавьте легкую тень в состоянии по умолчанию и увеличьте её при нажатии — это создаёт эффект «нажатия». В Figma это делается через эффекты: Shadow или Inner Shadow. Настройте X, Y, Blur и Spread, чтобы добиться реалистичного визуала.

Для иконок используйте векторные символы. Лучше всего — встроить иконку как отдельный компонент внутрь кнопки. Это позволяет быстро менять иконки (например, стрелка вправо / загрузка) без пересоздания всей кнопки.

Auto Layout — ваш главный союзник. Примените его к кнопке, чтобы она автоматически подстраивалась под длину текста. Задайте внутренние отступы (padding): слева и справа — минимум 16 px, сверху и снизу — 8–12 px. Включите Wrap Text, если кнопка может содержать две строки.

«Кнопка должна «дышать». Не зажимайте текст впритык к краям. Даже 4 лишних пикселя отступа улучшают восприятие на 30%.» — Михаил Смирнов, продуктовый дизайнер, Figma Ambassador

Чек-лист идеальной кнопки

✓ Имеет все необходимые состояния (default, hover, pressed, disabled)
✓ Использует Auto Layout для гибкости
✓ Поддерживает переопределение текста и иконки
✓ Соответствует цветовым стандартам дизайн-системы
✓ Обеспечивает контраст не менее 4.5:1 для текста
✓ Работает в светлой и тёмной теме (при наличии)
✓ Подключена к прототипу с плавными переходами

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

«Слишком многие дизайнеры создают кнопки «похожими», но не «работающими». Главная ошибка — отсутствие системы. Кнопка должна быть не просто элементом, а частью логики интерфейса. В Figma это решается через компоненты, переменные и документацию. Я рекомендую каждому дизайнеру перед созданием новой кнопки спросить: «Есть ли уже такой тип? Где он используется?» Это экономит часы работы и предотвращает хаос в библиотеке.» — Екатерина Лебедева, руководитель отдела UX, опыт 12 лет, автор курсов по дизайн-системам

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

Как сделать кнопку с иконкой в Figma?

Добавьте иконку как векторный объект или компонент рядом с текстом. Оберните всё в Auto Layout, задайте направление Row, выравнивание по центру. Убедитесь, что иконка — отдельный компонент, чтобы можно было её переопределять в инстансе.

Почему кнопка не меняет размер при изменении текста?

Скорее всего, не включён Auto Layout. Выделите кнопку, нажмите Shift+A или найдите кнопку Auto Layout в правой панели. Задайте padding и включите Grow to Fit для текстового блока.

Как синхронизировать кнопки между файлами Figma?

Создайте библиотеку компонентов. Опубликуйте файл с кнопками как Team Library. В других проектах подключите эту библиотеку: File → Settings → Libraries. Теперь кнопки будут доступны через Components Panel и обновляться централизованно.

Можно ли сделать анимированную кнопку в Figma?

Да, но ограниченно. Через прототипирование можно имитировать анимации: плавное изменение цвета, масштабирование, появление иконки. Для полноценной анимации используйте плагины вроде Smart Animate или Lottie, но помните — это preview, а не код.

Как проверить доступность кнопки?

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

Заключение

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

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

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

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.