Фигма как сделать кнопку

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

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

Самый простой способ сделать кнопку в Figma — использовать инструмент «Прямоугольник» (R). Нарисуйте фигуру нужного размера, затем добавьте текст с помощью инструмента «Текст» (T). Выровняйте текст по центру относительно фигуры, используя выравнивание в панели справа или горячие клавиши (Ctrl/Cmd + Shift + стрелки).

Цвет заливки, скругление углов, обводка и тень — основные параметры внешнего вида. Например, типичная первичная кнопка имеет сплошную заливку, скругление 8 px и небольшую тень. Вторичная кнопка может быть контурной: без заливки, с обводкой и другим цветом текста.

После базового оформления важно задать стиль слоёв. Убедитесь, что текст находится выше фигуры в порядке слоёв (Layers). Это можно проверить в левой панели. Если текст «под» фигурой, он будет невидим.

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

1. Нажмите R и нарисуйте прямоугольник 120×48 px.
2. Выберите цвет заливки — например, синий (#0066CC).
3. Нажмите T, кликните по фигуре и введите текст, например «Отправить».
4. Выделите текст, установите шрифт (например, Inter, 16 pt), цвет (белый) и выровняйте по центру.
5. Группируйте фигуру и текст (Ctrl/Cmd + G), чтобы они двигались вместе.

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

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

Чтобы кнопка стала многоразовой, её нужно превратить в компонент. Компонент в Figma — это шаблон, который можно использовать в разных местах файла. Любые изменения в основном экземпляре (master) автоматически применяются ко всем его копиям (instances).

Щёлкните правой кнопкой по группе с кнопкой и выберите «Create Component» (Создать компонент). Или используйте Ctrl/Cmd + Alt + K. После этого в левой панели появится раздел Components, где хранятся все компоненты.

Теперь вы можете перетаскивать этот компонент в другие части макета. Все копии будут синхронизированы. Но если вы измените текст только в одной копии, Figma отметит её как переопределённую (overridden), а не разрушит связь с оригиналом.

Как редактировать текст в экземпляре кнопки

• Выделите любой экземпляр кнопки.
• Кликните по тексту внутри него — Figma позволит ввести новое значение.
• Изменения применятся только к этому экземпляру.
• Чтобы сбросить изменения, используйте панель свойств справа (кнопка «Reset to default»).

Однако есть ограничение: если текст выходит за границы фигуры, кнопка не изменит размер автоматически. Для этого нужно использовать авто-макет.

Работа с авто-макетами

Авто-макет (Auto Layout) — технология Figma, позволяющая создавать гибкие, адаптивные компоненты. Когда вы применяете авто-макет к кнопке, она автоматически подстраивается под длину текста.

Чтобы включить авто-макет:

• Выделите группу с кнопкой (фигура + текст).
• Нажмите на значок «+» в панели справа или Ctrl/Cmd + Shift + A.
• Убедитесь, что направление — горизонтальное (horizontal), а выравнивание — по центру.
• Добавьте внутренние отступы (padding): например, 16 px по бокам, 12 px сверху и снизу.

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

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

• Padding задаёт внутренние поля кнопки.
• Gap контролирует расстояние между элементами (если их несколько).
• Grow — позволяет элементу занимать больше места (редко используется в кнопках).
• Align Items — управляет вертикальным выравниванием содержимого.

После настройки авто-макета рекомендуется повторно преобразовать группу в компонент. Теперь у вас есть умная кнопка, которая масштабируется под текст.

Состояния и варианты кнопок

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

Figma позволяет объединить все эти состояния в один компонент с вариантами (variants). Это часть системы design systems.

Создайте несколько экземпляров кнопки с разными стилями:

• Primary / Default
• Primary / Hover
• Primary / Pressed
• Secondary / Default
• Danger / Default
• Text / Default

Затем выделите все эти компоненты и в правой панели найдите раздел «Component Properties». Нажмите «Add property» → «Variant». Figma автоматически создаст один компонент с выпадающим выбором типа и состояния.

Структура свойств кнопки

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

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

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

Ключевые принципы:

• Используйте стили заливки, текста и тени (Color, Text, Effect Styles).
• Храните компоненты в отдельном файле библиотеки (Library file).
• Подключайте библиотеку к проектным файлам через Plugins → Library.

Например, создайте стиль текста «Button / Primary» со шрифтом Inter, 16 pt, жирный, белый цвет. Применяйте его ко всем первичным кнопкам. Если позже решите изменить шрифт на более современный, достаточно обновить один стиль — и все кнопки в проекте изменятся автоматически.

Проверочный список: готова ли кнопка к системе?

• ✅ Имеет авто-макет с отступами
• ✅ Является компонентом с вариантами
• ✅ Использует глобальные стили цвета и текста
• ✅ Поддерживает разные языки (текст не обрезается)
• ✅ Есть состояния: hover, pressed, disabled
• ✅ Документирована (через description в компоненте)

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

Интерактивность и прототипы

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

Перейдите во вкладку Prototype. Выделите кнопку, нажмите на синюю точку и перетащите её на целевой фрейм (например, экран «Успешная отправка»). Настройте триггер: On Click. Добавьте анимацию перехода — например, Smart Animate.

Для имитации состояния нажатия:

• Создайте два фрейма: «Кнопка Default» и «Кнопка Pressed».
• Свяжите их через прототип с триггером While Hovering или On Click.
• Настройте задержку возврата (например, 0.2 секунды).

Такой подход позволяет демонстрировать микроинтеракции клиентам и команде.

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

Ещё один важный аспект — семантика. Название кнопки должно чётко отражать действие: не «ОК», а «Сохранить изменения». Это помогает пользователям с нарушениями зрения, использующим скринридеры.

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

Заключение

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

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