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

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

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

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

Основы работы с компонентами в Figma
Шаги создания базового компонента
Как создать кнопку с автолейаутом
Настройка параметров автолейаута
Работа с вариантами: типы и состояния
Практический пример: создание вариантов
Интеграция кнопок в дизайн-систему
Доступность и юзабилити кнопок
Экспертное мнение
Вопросы и ответы
Заключение

Основы работы с компонентами в Figma

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

Компоненты позволяют стандартизировать элементы интерфейса. Например, если вы создали кнопку «Primary», её можно использовать в разных разделах проекта, не перерисовывая каждый раз. Это экономит время и снижает риск ошибок. Кроме того, компоненты могут иметь вложенные свойства, такие как текст, цвет фона или иконки.

Для создания компонента достаточно выделить объект и нажать Ctrl+Alt+K (Cmd+Option+K на Mac). После этого он появится в панели Assets. Экземпляры создаются через перетаскивание или дублирование. Важно помнить, что экземпляр нельзя редактировать напрямую, если не отвязать его от оригинала.

Полезно знать: Перед созданием компонента убедитесь, что все внутренние элементы (текст, иконки) правильно выровнены и имеют корректные привязки. Это упростит настройку автолейаута.

Шаги создания базового компонента

Нарисуйте прямоугольник — основу кнопки.
Добавьте текстовый элемент с надписью, например, «Отправить».
Сгруппируйте элементы (Ctrl+G).
Преобразуйте группу в компонент (Ctrl+Alt+K).
Переименуйте компонент в понятное название, например, Button / Primary / Default.

Как создать кнопку с автолейаутом

Автолейаут (Auto Layout) — одна из самых важных функций Figma для создания адаптивных интерфейсов. Он позволяет элементам внутри контейнера автоматически изменять размер и позицию при редактировании содержимого. Для кнопок это критично: текст может меняться, и кнопка должна подстраиваться под него.

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

Чтобы добавить автолейаут, выделите группу с кнопкой и нажмите на значок «+» в правой панели Properties или выберите в верхнем меню «Add Auto Layout». По умолчанию направление — горизонтальное, что подходит для кнопок с текстом и иконками.

Настройка параметров автолейаута

Padding (внутренние отступы) — задают расстояние от краёв кнопки до текста. Рекомендуется использовать 16–24 px по бокам.
Gap (промежуток между элементами) — актуально, если в кнопке есть иконка. Задайте значение 8–12 px.
Alignment (выравнивание) — установите «Center» по вертикали и горизонтали, чтобы текст оставался по центру.
Grow (растяжение) — включите опцию «Horizontal» для текстового слоя, чтобы он занимал нужное пространство.

«Автолейаут превращает статичную кнопку в живой элемент. Начните с него — и вы никогда не вернётесь к ручной подгонке размеров.» — Алексей Петров, UX-дизайнер, 8 лет в продуктовых командах

Работа с вариантами: типы и состояния

В реальных интерфейсах кнопки бывают разными: первичные, вторичные, опасные, заблокированные. В Figma это решается через варианты компонентов (Component Variants). Они позволяют объединить несколько видов одной кнопки в одну коллекцию и быстро переключаться между ними.

Для начала создайте несколько версий кнопки: Primary, Secondary, Danger. Убедитесь, что все они имеют автолейаут. Затем преобразуйте их в компоненты и откройте режим управления вариантами (панель справа → «Manage variants»).

Figma предложит объединить компоненты в одну группу. Затем вы сможете настроить свойства, по которым будет происходить переключение: например, type (тип) и state (состояние). Таким образом, в инстансе можно будет выбрать «Primary + Hover» или «Danger + Disabled».

Свойство	Варианты значений	Описание
Type	Primary, Secondary, Tertiary, Danger	Определяет визуальный стиль и важность кнопки
State	Default, Hover, Active, Disabled	Отражает текущее состояние взаимодействия
Size	Small, Medium, Large	Размер кнопки для разных контекстов (мобильные/десктоп)

Полезно знать: Используйте значки (иконки) в кнопках как отдельные слои, которые можно скрывать или показывать через свойства. Например, добавьте иконку «стрелка» и свяжите её с параметром hasIcon.

Практический пример: создание вариантов

Создайте три кнопки: Primary, Secondary, Danger — все с автолейаутом.
Преобразуйте каждую в компонент.
Выделите все три и нажмите «Create component set».
В панели свойств настройте параметр Type с тремя значениями.
Добавьте ещё один уровень — State, и создайте для каждого типа состояния Default и Disabled.
Проверьте, что в экземплярах можно переключать свойства через выпадающие списки.

Интеграция кнопок в дизайн-систему

Кнопки — часть более крупной системы. Чтобы они работали эффективно, их нужно интегрировать в дизайн-систему с использованием стилей цветов, типографики и токенов. Это обеспечивает единообразие и упрощает масштабирование.

Цветовые стили в Figma позволяют задавать переменные, например, «Button / Primary / Background». Применяя такой стиль к кнопке, вы можете потом изменить цвет сразу во всех компонентах, обновив только один стиль. То же касается шрифтов, высоты строк и радиусов скруглений.

«Если вы меняете цвет кнопки в 50 местах — вы делаете что-то не так. Используйте стили и токены.» — Марина Ковалёва, ведущий UI-архитектор, дизайн-система TechCorp

Рекомендуется создать библиотеку стилей:

Цвета: Primary, Secondary, Danger, Success, Neutral
Типографика: Button Large, Button Small
Effects: Тени для состояний hover и active
Corner radii: 8px, 12px — в зависимости от стиля продукта

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

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

Хорошая кнопка — это не только красивая, но и удобная для всех пользователей. Доступность (accessibility) требует соблюдения определённых стандартов: контрастность, размер, понятные подписи и поддержка клавиатурной навигации.

Минимальный контраст между текстом и фоном должен быть 4.5:1 для обычного текста (по стандарту WCAG AA). Figma позволяет проверять это с помощью плагинов, таких как Stark или Contrast. Например, белый текст на светло-сером фоне может не пройти проверку.

Размер кнопки также важен. Минимальная область нажатия — 44×44 px по рекомендациям Apple и Google. Это необходимо для пользователей с ограниченной моторикой. Даже если визуально кнопка меньше, кликабельная зона должна быть достаточной.

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

Также учитывайте:

Текст кнопки должен быть понятным: избегайте «ОК» или «Да», если контекст неясен.
Состояние disabled должно быть визуально отличимым, но не исчезать полностью.
Для анимаций состояний (hover, active) используйте плавные переходы, а не резкие скачки.

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

«Сегодня хороший UX начинается с компонентов. Кнопка — это микрокосмос интерфейса: она должна быть гибкой, предсказуемой и масштабируемой. В Figma это возможно благодаря сочетанию автолейаута, вариантов и стилей. Не экономьте время на настройке — оно окупится в десятки раз при правке и передаче в разработку.» — Дмитрий Смирнов, руководитель дизайн-студии Interface Lab, 12 лет в UX

По словам эксперта, частая ошибка — создание «одноразовых» кнопок без автолейаута и вариантов. Такие элементы быстро становятся источником дублирования и несоответствий. Особенно это заметно при редизайне или локализации.

Он также советует использовать именование по BEM-подобной системе: Button__primary—hover, что упрощает поиск и сортировку в библиотеке. А для командной работы — документировать использование кнопок в отдельном фрейме с примерами и ограничениями.

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

Можно ли сделать кнопку с иконкой, которая появляется только в некоторых случаях?

Да. Добавьте иконку как отдельный слой и создайте свойство hasIcon (true/false). В экземпляре можно будет включать или скрывать иконку. Убедитесь, что автолейаут корректно обрабатывает изменение ширины при появлении иконки.

Как передать кнопки разработчикам?

Figma позволяет экспортировать компоненты с описанием, стилями и состояниями. Используйте режим «Dev Mode» — там разработчики увидят цвета, шрифты, отступы и даже код CSS. Также можно подключить плагины вроде Zeplin или Storybook для интеграции с кодовой базой.

Что делать, если кнопка не масштабируется при длинном тексте?

Проверьте, включён ли автолейаут и установлен ли параметр «Fill container» или «Hug contents» для текстового слоя. Убедитесь, что padding задан корректно и нет фиксированной ширины у родительского фрейма.

Нужно ли создавать отдельные компоненты для мобильных и десктопных кнопок?

Не обязательно. Достаточно добавить параметр Size (Small/Medium/Large) и использовать нужный размер в зависимости от устройства. Это упрощает поддержку и избегает дублирования.

Заключение

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

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

Всегда используйте автолейаут для адаптивности кнопок.
Создавайте варианты по типу, состоянию и размеру.
Применяйте глобальные стили цветов и типографики.
Учитывайте доступность: контраст, размер и читаемость.
Интегрируйте кнопки в дизайн-систему для командной работы.

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

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

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

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

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

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

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

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

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

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

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

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

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