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

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

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

Кнопка — это визуальный элемент интерфейса, который побуждает пользователя к действию. В Figma её можно создать буквально за несколько кликов. Начните с выбора инструмента Rectangle (U) и нарисуйте прямоугольник нужного размера. Обычно стандартная кнопка имеет закруглённые углы — установите значение radius от 4 до 12 пикселей, в зависимости от стиля проекта.

Добавьте текст с помощью Text Tool (T). Разместите его по центру кнопки. Убедитесь, что шрифт читаемый, контрастный и соответствует общей типографике проекта. Оптимальный размер текста — от 14 до 16 пикселей. Выравнивание текста должно быть строго центрированным как по горизонтали, так и по вертикали.

Цвет фона кнопки должен выделяться на общем фоне, но не выбиваться из цветовой палитры. Используйте основной акцентный цвет для primary-кнопок, нейтральные — для secondary. Не забывайте про доступность: контраст между текстом и фоном должен быть не менее 4.5:1 для обычного текста.

Для единообразия применяйте Style — сохраните цвет, типографику и эффекты как Shared Styles. Это позволит быстро применять их в будущем и обеспечит согласованность дизайна. Чтобы создать стиль, выделите объект, откройте панель Design и нажмите на значок «+» рядом с Fill, Text или Effect.

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

1. Выберите инструмент Rectangle (U) и нарисуйте фигуру 120×40 пикселей.
2. Установите радиус углов — 8 px.
3. Примените заливку: #0066CC (основной акцент).
4. Добавьте текст «Начать» инструментом Text (T), размер 16px, белый цвет.
5. Выровняйте текст по центру с помощью Align Center и Align Middle.
6. Сгруппируйте элементы (Ctrl+G / Cmd+G), чтобы они двигались вместе.

Теперь у вас есть готовая базовая кнопка. Но это только начало. Чтобы она стала по-настоящему полезной, нужно превратить её в компонент.

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

Компоненты — основа масштабируемого дизайна в Figma. Они позволяют создавать переиспользуемые элементы, изменения в которых автоматически распространяются на все экземпляры. Превратить кнопку в компонент просто: выделите группу (фигура + текст), нажмите на значок «Create Component» в правой панели или Ctrl+Alt+K.

После этого вы можете дублировать кнопку через Drag & Drop, и все копии будут связаны с оригиналом. Если вы измените цвет или текст в главном компоненте, все экземпляры обновятся. Это особенно важно при работе в команде или над крупными проектами.

Но настоящая мощь — в вариантах (Variants). Они позволяют объединить разные состояния одной кнопки: активное, наведение, отключённое, разные размеры и типы. Например, у вас может быть кнопка Primary, Secondary и Tertiary, а внутри каждой — состояния Default, Hover, Pressed, Disabled.

Чтобы создать варианты, сделайте несколько копий компонента и задайте им параметры. В правой панели появится раздел Variant Properties. Там вы можете указать:

• Type: Primary, Secondary, Text
• State: Default, Hover, Disabled
• Size: Small, Medium, Large

Figma автоматически объединит их в одну «семью» компонентов, и вы сможете переключаться между вариантами прямо в канвасе.

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

Лучше всего использовать иерархическое именование. Например:

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

Автолейаут для адаптивности

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

Чтобы применить автолейаут, выделите группу с фигурой и текстом, затем нажмите на значок Auto Layout в правой панели или Shift+A. Теперь контейнер будет «обтекать» содержимое. Вы можете задать внутренние отступы (padding): например, 16px по бокам и 10px сверху и снизу.

Настройте направление: Horizontal — если элементы расположены слева направо. Vertical — если кнопка вертикальная (например, с иконкой над текстом). Также можно задать выравнивание и распределение.

Теперь, когда вы изменяете текст, кнопка адаптируется. Можно даже добавить иконку: вставьте SVG, поместите слева или справа от текста, задайте gap (расстояние между элементами) — например, 8px.

Настройка автолейаута для разных типов кнопок

• Для текстовых кнопок: padding 8×4 px, direction Horizontal, align center.
• Для иконок: gap 8px, выравнивание по центру, fixed width/height при необходимости.
• Для responsive-кнопок: установите max-width, чтобы избежать чрезмерного растяжения.

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

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

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

Создайте отдельные варианты для каждого состояния:

• Default — базовое состояние.
• Hover — при наведении курсора (часто светлее или темнее).
• Pressed — при нажатии (визуально «вдавленная»).
• Disabled — недоступное состояние (серый цвет, opacity 50%).
• Focused — при фокусе с клавиатуры (обычно обводка-гало).

В прототипах соедините экземпляры кнопок с помощью переходов. Например, при наведении мыши (While Hovering) показывайте Hover-состояние. При клике — переключайтесь на Pressed.

Используйте микронтеракции: небольшие анимации, такие как изменение цвета за 100–200 мс. Это делает интерфейс живым и предсказуемым.

Как проверить кнопку на usability

• Минимальный размер касания — 44×44 px (по рекомендациям Apple и Google).
• Контраст текста и фона — проверьте с помощью плагина Stark или Contrast Checker.
• Читаемость: шрифт не должен быть слишком тонким, особенно на маленьких экранах.
• Ясность действия: текст на кнопке должен однозначно говорить, что произойдёт после нажатия (например, «Оплатить 990 ₽», а не просто «ОК»).

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

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

Поделитесь этим файлом с командой как Team Library. Теперь любой дизайнер сможет вставить актуальную кнопку в свой прототип, и все изменения будут синхронизироваться.

Включите в документацию:

• Гайдлайны по использованию (когда какую кнопку применять).
• Ограничения (минимальная ширина, запрещённые комбинации).
• Примеры использования в контексте (формы, модалки, навигация).

Используйте плагины для автоматизации:

• Buttons by Figma — создаёт кнопки по шаблону.
• Library Detective — помогает найти неиспользуемые компоненты.
• Content Reel — для быстрой вставки тестовых текстов на кнопках.

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

Она отмечает, что многие команды забывают про состояния Focus и Disabled, что снижает доступность. Также часто игнорируют адаптацию под мобильные устройства. «Кнопка, которая отлично смотрится на десктопе, может быть неудобной на телефоне. Тестируйте на всех платформах», — добавляет она.

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

Заключение

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

• Всегда начинайте с автолейаута — это основа адаптивности.
• Превращайте кнопки в компоненты с вариантами для разных состояний.
• Следите за доступностью: контраст, размер, ясность текста.
• Интегрируйте кнопки в дизайн-систему и делитесь через библиотеки.
• Тестируйте кнопки в контексте: на разных экранах и с разным контентом.