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

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

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

Самый простой способ создать кнопку — использовать инструмент «Прямоугольник» (R). Нажмите R, зажмите Shift для ровного прямоугольника и нарисуйте форму нужного размера. После этого добавьте текст с помощью инструмента «Текст» (T) и разместите его по центру кнопки. Убедитесь, что текст легко читается: выберите контрастный цвет, подходящий шрифт и размер. Обычно для основных кнопок используется размер 14–16 пикселей.

Цвет фона кнопки должен соответствовать дизайну системы. Например, первичная кнопка может быть синей, вторичная — белой с обводкой. Чтобы задать цвет, выделите фигуру и в правой панели найдите раздел «Fill». Там же можно добавить обводку (Stroke), тень (Effect) или скругления углов (Corner Radius). Скругление 8 пикселей — стандарт для современных интерфейсов.

После базового оформления важно задать отступы между текстом и краями кнопки. Это обеспечит визуальный комфорт и предотвратит «прилипание» текста к границам. Оптимальные внутренние отступы — 16 пикселей по бокам и 12–16 сверху и снизу. Такие значения соответствуют рекомендациям Material Design и Apple Human Interface Guidelines.

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

1. Нажмите R, нарисуйте прямоугольник размером 120×44 пикселя.
2. Установите скругление углов — 8 пикселей.
3. Выберите заливку — сплошной цвет (например, #0066CC).
4. Добавьте текст: выделите инструмент T, кликните по фигуре, введите «Отправить».
5. Выровняйте текст по центру: используйте выравнивание в панели свойств.
6. Настройте стиль текста: шрифт Inter, размер 14, жирность SemiBold, цвет #FFFFFF.
7. Проверьте контраст: убедитесь, что текст хорошо виден на фоне.

Если вы работаете над веб-интерфейсом, учтите, что кнопка должна иметь достаточный контраст по стандартам WCAG 2.1. Минимальный коэффициент контраста для текста 14px — 4.5:1. В Figma можно использовать плагины вроде Stark или Contrast Checker, чтобы автоматически проверить соответствие.

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

Когда кнопка готова, её стоит преобразовать в компонент. Компоненты позволяют создавать единые элементы, которые можно многократно использовать в проекте. Это особенно важно при работе в команде или над крупными продуктами. Чтобы создать компонент, выделите кнопку и нажмите значок «Создать компонент» в правой панели или сочетание Ctrl+Alt+K (Cmd+Option+K на Mac).

После этого любые изменения в главном компоненте (master component) будут автоматически применяться ко всем экземплярам. Это экономит время и гарантирует согласованность дизайна. Однако иногда нужно, чтобы кнопки отличались — например, активная, неактивная или с иконкой. Здесь на помощь приходят варианты (variants).

Варианты — это разновидности одного компонента, объединённые в группу. Вы можете создать несколько состояний кнопки: Primary/Default, Primary/Hover, Primary/Disabled, Secondary/Default и так далее. Чтобы объединить их в вариант, выделите все связанные компоненты, щёлкните правой кнопкой и выберите «Create Component Set».

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

• Создайте основные типы: Primary, Secondary, Tertiary, Ghost, Outline.
• Для каждого типа определите состояния: Default, Hover, Pressed, Disabled.
• Используйте именование по принципу: Type/State — например, Button/Primary/Default.
• Группируйте компоненты в библиотеке через Figma Libraries, чтобы использовать в других файлах.

Автоматические макеты и отступы

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

Чтобы добавить автолейаут, выделите кнопку, нажмите значок «+» в верхней панели или Ctrl+Shift+A. Убедитесь, что направление установлено как «Horizontal», а выравнивание — «Center». Задайте внутренние отступы (Padding): 16 слева и справа, 12 сверху и снизу. Теперь, если вы измените текст на более длинный, кнопка автоматически расширится.

Если кнопка содержит иконку, автолейаут поможет правильно расположить элементы. Добавьте иконку слева или справа от текста, установите между ними отступ (Gap) — например, 8 пикселей. Автолейаут сам распределит пространство, сохранив порядок и выравнивание.

Пример настройки автолейаута

1. Выделите группу с текстом и иконкой (если есть).
2. Нажмите «Auto Layout» — появится контейнер.
3. Установите Padding: Left = 16, Right = 16, Top = 12, Bottom = 12.
4. Задайте Gap = 8, если используется иконка.
5. Проверьте, как кнопка реагирует на изменение текста: увеличьте или уменьшите длину.

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

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

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

Перейдите во вкладку «Prototype» и создайте связи между вариантами. Например, от кнопки Primary/Default проведите стрелку к Primary/Hover, выбрав триггер «While Hovering». Аналогично — от Primary/Default к Primary/Pressed с триггером «On Click». Это позволит воспроизвести поведение кнопки в презентационном режиме.

Для более сложных сценариев можно использовать плагины, такие как «Smart Animate Helper» или «Interactions». Они расширяют возможности анимации и помогают имитировать микровзаимодействия: плавное изменение цвета, появление спиннера загрузки, изменение текста после отправки формы.

Типовые сценарии взаимодействия

• Hover: Лёгкое затемнение фона или увеличение тени.
• Active/Pressed: Уменьшение высоты тени, смещение вниз на 1px.
• Focus: Пунктирная рамка вокруг кнопки (для доступности).
• Loading: Замена текста на спиннер (можно использовать компонент с переменным текстом).
• Success: Изменение цвета на зелёный и текста на «Готово».

Дизайн-системы и стили

Чтобы кнопки были единообразными во всём проекте, необходимо использовать стили. В Figma есть три типа стилей: цветовые (Color Styles), текстовые (Text Styles) и эффекты (Effect Styles). Создав один раз стиль для кнопочного текста (например, Button/Medium), вы сможете применять его ко всем кнопкам.

Цветовые стили особенно полезны при работе с темами (light/dark). Создайте стили с названиями Primary/500, Surface/100, Text/OnPrimary и т.д. Тогда при переключении темы достаточно заменить значения в стилях, и все кнопки автоматически обновятся.

Для командной работы рекомендуется хранить компоненты и стили в отдельном файле-библиотеке. Подключите этот файл как библиотеку (в настройках Figma → Libraries), чтобы другие дизайнеры могли использовать те же элементы. Это предотвращает дублирование и обеспечивает единый визуальный язык.

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

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

Современные практики требуют учитывать не только визуальную сторону, но и доступность. Кнопка должна быть доступна с клавиатуры, иметь ARIA-лейблы (в коде), а её состояние должно быть понятно людям с нарушениями зрения. В Figma можно использовать плагины, которые помогают проверить контраст, порядок навигации и семантику.

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

Заключение

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

• Всегда начинайте с автолейаута для гибкости и адаптивности.
• Преобразуйте кнопку в компонент и используйте варианты для разных состояний.
• Применяйте стили цветов и текста для единообразия.
• Настройте интерактивность через прототипирование.
• Учитывайте доступность и эргономику при проектировании.