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

Чтобы сделать кнопку в Фигме, напишите надпись инструментом Text, нажмите Shift + A (Auto Layout) и задайте отступы, цвет заливки и скругление. Затем превратите её в компонент (Ctrl + Alt + K, на Mac Option + Cmd + K), добавьте варианты для наведения и нажатия и свяжите их во вкладке Prototype, чтобы кнопка реагировала на курсор и вела на другой экран.

Русской версии интерфейса у Figma нет, поэтому названия панелей и пунктов здесь по-английски, перевод в скобках. Горячие клавиши для Windows, на Mac вместо Ctrl нажимайте Cmd, вместо Alt Option.

Из чего собирается кнопка

Кнопку в Figma собирают из обычных элементов, и от того, как именно собрали, зависит, сколько ручной работы будет потом.

Всё из таблицы есть и на бесплатном плане: компоненты, варианты, интерактивные компоненты и эффекты доступны на любом тарифе.

Старый способ тоже работает: нарисовать прямоугольник инструментом Rectangle (R), положить сверху текст и собрать их в группу. Мы бы его не советовали. Захотите изменить надпись на «Оформить заказ», и прямоугольник придётся растягивать руками, а текст двигать к центру. В макете с десятью кнопками это быстро превращается в ошибки: где-то отступ 14 px, где-то 18.

Виды кнопок в дизайне интерфейса

В одном проекте обычно используют несколько видов кнопок, и каждый удобно собрать отдельным компонентом:

• основная: заливка основного цвета, для главного действия на странице;
• второстепенная: без заливки, с обводкой, для действий вроде «Отмена» или «Назад»;
• текстовая: только надпись без фона, похожа на ссылку;
• кнопка-иконка: квадратная или круглая, например закрыть окно или добавить в избранное;
• неактивная: серая, пока пользователь не заполнил форму.

Если кнопки собраны компонентами, этот стиль правится в одном месте.

Шаг 1. Текст кнопки и Auto Layout

1. Выберите инструмент Text (Текст) клавишей T.
2. Кликните по холсту один раз и напишите надпись, например «Купить». Не протягивайте рамку мышью: так создаётся текстовый блок фиксированного размера (Fixed size), а кликом создаётся слой с автоматической шириной (Auto width).
3. Задайте шрифт и размер, для кнопки в веб-дизайне подойдёт 16 px.
4. Не снимая выделения, нажмите Shift + A или кликните правой кнопкой и выберите Add auto layout (Добавить автолейаут). Текст окажется внутри нового фрейма, и дальше все элементы кнопки живут в нём.
5. В разделе Auto layout на правой панели проверьте, что Horizontal resizing и Vertical resizing (размер по горизонтали и по вертикали) стоят в положении Hug contents (по содержимому).
6. Задайте горизонтальные и вертикальные отступы в полях Horizontal padding и Vertical padding, например 24 и 12 px.

В режиме Hug contents фрейм держит минимальный размер вокруг содержимого с учётом отступов. Для примера возьмём отступы по 10 px с каждой стороны: если надпись стала шириной 50 px, кнопка станет шириной 70 px. С отступами 24 px из шага 6 та же надпись даст 98 px. Попробуйте поменять «Купить» на «Добавить в корзину»: кнопка вырастет сама, а отступы останутся прежними.

Если нужна кнопка одной ширины, например на всю ширину экрана телефона, введите число в поле ширины фрейма. Figma переключит ширину в Fixed width (фиксированная ширина).

Кнопка с иконкой

Перетащите иконку внутрь фрейма кнопки. Направление Horizontal (по горизонтали) в разделе Auto layout выстроит её в строку с текстом, а расстояние между иконкой и надписью задаёт поле Gap (промежуток).

Шаг 2. Дизайн кнопки: цвет заливки, скругление, обводка и тень

Выделите фрейм кнопки (не текст внутри), все настройки внешнего вида лежат на правой панели:

• Fill (заливка): нажмите плюс в разделе Fill и выберите цвет в палитре или введите код, например #2F6BFF.
• Corner radius (радиус скругления): число в пикселях. Для кнопки с полукруглыми краями ставят большое значение, например 1000.
• Stroke (обводка): Add stroke в разделе Stroke, толщина в поле Weight. В меню Position (положение) выбирается, где пройдёт линия: Inside (внутри), Center (по центру) или Outside (снаружи). У большинства фигур по умолчанию стоит Inside.
• Effects (эффекты): плюс в разделе Effects. Первым добавляется Drop shadow (внешняя тень).

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

Drop shadow настраивается в меню Effect settings (настройки эффекта), оно открывается значком рядом с эффектом:

Для простой кнопки достаточно небольшого сдвига вниз по Y и мягкого размытия. По умолчанию Figma не показывает тень сквозь прозрачные области слоя. Если у кнопки есть обводка, но нет заливки, в настройках эффекта можно отметить Show behind transparent areas (показывать за прозрачными областями), и тень будет видна и там.

Стеклянная и прозрачная кнопка

Матовое стекло в разделе Effects дают Glass и Background blur. Glass (стекло) делает слой полупрозрачным и меняет вид того, что лежит под ним: у него есть преломление по краю (Refraction), глубина края (Depth), матовость (Frost) и направление света. На объекте с заливкой 100 % стекло не видно, поэтому у кнопки сначала снизьте непрозрачность заливки. При экспорте в SVG эффект Glass не сохраняется: такую кнопку отдают картинкой PNG. Как это сделать, мы писали в статье как сохранить в Фигме.

Background blur (размытие фона) размывает всё, что находится под кнопкой. Он заметен, только если непрозрачность заливки кнопки от 0,10 до 99,99 %; при 100 % размытия не видно совсем. Смотрится такая кнопка поверх фотографии или яркого фона.

Шаг 3. Компонент кнопки

Пока кнопка остаётся обычным фреймом, каждая копия живёт своей жизнью, и в большом проекте на правку уходит много времени. Компонент связывает их: главный компонент (main component) задаёт свойства, а его копии (instances, экземпляры) получают любые его изменения.

1. Выделите фрейм кнопки.
2. Нажмите Create component (Создать компонент) на правой панели или Ctrl + Alt + K (на Mac Option + Cmd + K).
3. Переименуйте слой, например в Button. На панели слоёв у него появится фиолетовый значок компонента.

Экземпляр для макета проще всего вытащить мышью на холст из вкладки Assets (Ресурсы) на левой панели, она открывается сочетанием Alt + 2 (на Mac Option + 2). В том же файле экземпляр получается и обычным копированием компонента (Ctrl + C, Ctrl + V), и перетаскиванием с зажатым Alt (на Mac Option).

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

Шаг 4. Состояния кнопки: варианты default, hover, pressed

Состояния кнопки в Figma делают вариантами одного компонента. Figma складывает их в общий контейнер, набор компонентов (component set).

1. Выделите компонент и нажмите Create variant (Создать вариант) на правой панели.
2. Чтобы добавить ещё вариант, выделите набор и нажмите Add variant (Добавить вариант) или кликните правой кнопкой по компоненту и выберите Main component > Add variant.
3. На правой панели, в разделе Properties (свойства), переименуйте свойство, которое Figma назвала по умолчанию, в State (состояние), а значения задайте Default, Hover, Pressed. Если нужна неактивная кнопка, добавьте четвёртый вариант Disabled.
4. Настройте каждый вариант: у Hover заливку на тон темнее, у Pressed ещё темнее или без тени, у Disabled серый цвет и бледный текст.

Меняйте у вариантов цвет, тень и обводку, а шрифт оставьте одинаковым. Если при смене варианта меняется настройка шрифта, Figma может заменить на Inter свой шрифт (custom font), например установленный на компьютер. Как такие шрифты подключать, рассказано в статье как добавить шрифт в Фигму.

У экземпляра кнопки в макете состояние переключается выпадающим списком State на правой панели. Это удобно и для статичных экранов: показать заказчику неактивную кнопку оформления, пока не заполнена форма.

Шаг 5. Анимация кнопки при наведении и нажатии

Теперь состояния нужно связать, чтобы Figma переключала их сама. Делается это внутри компонента, один раз, и все экземпляры кнопки в макете получат готовую анимацию.

1. Выделите Default и откройте вкладку Prototype (Прототип) на правой панели.
2. У выделенного Default на краю есть синий кружок: при наведении курсора он становится синим плюсом. Протяните от него связь к Hover.
3. В открывшемся окне поставьте триггер While hovering (пока курсор над объектом), действие Change to (сменить на) и проверьте, что выбран Hover.
4. В Animation (анимация) выберите Smart animate, кривую Ease in and out и укажите длительность 150 ms. Для веб-интерфейсов такие анимации обычно укладывают в 150-300 ms.
5. От Hover протяните связь к Pressed с триггером Mouse down (кнопка мыши нажата).
6. От Pressed протяните связь к Default с триггером Mouse leave (курсор ушёл с объекта): если пользователь нажал и увёл курсор, кнопка вернётся в обычный вид. Что показать, когда кнопку мыши отпустили, задаёт триггер Mouse up: протяните от Pressed связь к нужному состоянию, например к Default.

Какой триггер на что ставить:

Change to работает только между вариантами одного набора. Если Hover сделан отдельным компонентом в другом месте файла, перенесите его в набор.

Как сделать кнопку кликабельной: переход на другую страницу

Страница в прототипе здесь означает отдельный фрейм, не Page файла. Анимация при наведении сама никуда не ведёт. Чтобы кнопка в прототипе открывала следующий экран, связь ставят уже на экземпляре в макете.

1. Подготовьте два фрейма-экрана, например «Каталог» и «Корзина». Новый фрейм создаёт инструмент Frame (F или A).
2. Поставьте экземпляр кнопки на первый экран.
3. Во вкладке Prototype выделите экземпляр и протяните синий плюс к фрейму «Корзина».
4. Figma сама поставит триггер On click (по клику) и действие Navigate to (перейти к) с выбранным экраном.

Триггеры не должны совпадать. Если на один и тот же триггер повесить и Change to внутри компонента, и Navigate to на экземпляре, Figma выполнит переход, а смену варианта пропустит. Когда триггеры разные (While hovering для наведения и On click для перехода), работают оба: кнопка подсвечивается при наведении и ведёт на экран по клику.

Проверить кнопку можно, не уходя из редактора: выделите фрейм и нажмите Shift + Space, откроется встроенный просмотр. Полноэкранный показ запускает кнопка Present на правой панели. Клавиша R в режиме показа начинает прототип заново.

Частые ошибки

Кнопка не растёт вместе с текстом. Текст создан протягиванием рамки и стоит в Fixed size, а такой блок под надпись не подстраивается. Выделите текст и переключите размер на Auto width, у фрейма проверьте Hug contents.

После наведения кнопка в просмотре не возвращается в Default. Добавьте на Hover связь Mouse leave обратно к Default с той же анимацией: этот триггер срабатывает, когда курсор уходит с объекта.

Переход по клику работает, а состояние кнопки не меняется. Проверьте, не стоит ли на экземпляре и внутри компонента один и тот же триггер: в таком случае Figma выполняет переход и пропускает смену варианта. Разведите их: смена состояния на While hovering и Mouse down, переход на On click.

Правки на одной кнопке не появились в других элементах макета. Вы меняли экземпляр, а не главный компонент. Найти главный можно по фиолетовому значку на панели слоёв или через Assets.

Стеклянный эффект не виден. У заливки стоит 100 %: снизьте непрозрачность, а под кнопку положите картинку или цветной фон.

Частые вопросы

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

Да. Компоненты, варианты, интерактивные компоненты и эффекты доступны на любом плане, включая бесплатный. Платная подписка нужна для публикации наборов компонентов в библиотеку.

Как сделать рабочую кнопку без компонента?

Выделите фрейм кнопки, во вкладке Prototype протяните связь к нужному экрану, и по клику (On click, Navigate to) прототип перейдёт на него. Без вариантов не сработает Change to: оно переключает только варианты одного набора.

Как поменять цвет сразу во всех кнопках?

Выделите главный компонент (у него фиолетовый значок на панели слоёв) и поменяйте Fill. Экземпляры связаны с главным компонентом и получают его изменения.

Чем While hovering отличается от Mouse enter?

While hovering срабатывает, пока курсор над объектом; если он ведёт на другой фрейм, Figma вернёт исходный фрейм, когда курсор уйдёт. Mouse enter срабатывает, когда курсор заходит на объект, и результат держится до следующего действия. Чтобы вернуть кнопку обратно, к Mouse enter добавляют связь Mouse leave.

Как сделать круглую кнопку с иконкой?

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