Как в Figma сделать кликабельную кнопку

Казалось бы, что может быть проще? Прямоугольник, текст, и готово! Так можно было сделать пару лет назад, но точно не сегодня. Ведь все хотят интерактивности и эффектности в интерфейсах. Представьте себе: пользователь заходит на ваш сайт, видит обычный скучный прямоугольник, и даже не понимает — это кнопка или что?

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

Шаг 1: Создание элементов будущей кнопки

В моем дизайне кнопка будет круглой, с иконкой стрелки с центре и текстом над этим кругом. По этому сразу создаем все эти элементы.

• Создаем круг размером 70*70 px. 
• Создаем стрелку с помощью инструмента Arrow в Figma. Её размер 24 px.
• Добавляем текст, который будет над кругом. Настраиваем ему размер и выбираем шрифт.

Дополнительно нужно создать прямоугольник который будет больше, чем ширина и высота круга. Например, 100*80 px. И добавляем ему заливку #FEFEFE. Он нам будет нужен для создания анимации.

Шаг 2: Собираем детали кнопки

У нас есть все необходимые детали для кнопки, а значит мы можем её собрать. Но тут важно внимательно смотреть за последовательностью и слоями в панели слева, чтобы при анимации кнопки не было проблем.

• Прямоугольник и круг помещаем в один фрейм. Важно, чтобы круг был над прямоугольником, а фрейм был четко по краям круга!
• Делаем скругление углов фрейма в 1000.

• Стрелку помещаем в центр круга.
• Берем стрелку и фрейм (круг+прямоугольник) в новый фрейм.

Осталось только выровнять текст по центру созданного фрейма и взять текст в фреймом в auto layouts.

Мы собрали нашу кнопку, прямо как собираем интерфейсы из атомов и молекул дизайн-системы. Но как правильно создать свою систему? Что там должно быть и как вообще с этим работать? На все эти вопросы мы уже ответили на нашем обучении Продвинутые дизайн-системы. Где мы не просто рассказываем как нужно делать, а подкрепляем полученные знания огненной практикой и созданием документации к системе. И уже за 2-3 месяца ты научишься строить интерфейсы на основе Atomic Design, работать с макетами в пять раз быстрее и познаешь практики мировых брендов. Присоединяйся уже сейчас!

Шаг 3: Настраиваем дополнительные детали

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

• Меняем цвет заливки круга на #FEFEFE и ставим прозрачность на 10%.
• Добавляем ему Background blur 4.
• Добавляем кругу обводку #FEFEFE.

Прямоугольник, который в слоях под ним, выносим за видимость фрейма. Проверяем, чтобы у фрейма активен был Clip content. И меняем цвет стрелки круга на #FEFEFE.

Шаг 4: Создаем компонент и варианты

Вот теперь нам нужно анимировать нашу кнопку, а для этого незаменимыми помощниками являются компоненты с вариантами.

• Создаем из кнопки компонент.
• Создаем 3 варианта в компоненте.

Шаг 5: Настраиваем варианты

Вносим некоторые изменения в варианты, чтобы при анимации было понятно что вообще происходит и что меняется в элемента.

• Во втором варианте меняем цвет стрелки на #D60101.
• Прямоугольник, что в слоях под кругом, поднимаем выше, чтобы он перекрывал весь круг на фоне блюра.

Ну, а в третьем варианте меняем цвет обводки круга на #B10101. И так с помощью этих небольших изменений мы показали, как будет меняться наша кнопка, а точнее её состояния, как элемента интерфейса.

Шаг 6: Добавляем анимацию

Второй вариант кнопки показывает состояние при ховере, по этому как триггер для анимации, нам необходимо выбрать While hovering.

• Выбираем триггер While hovering.
• В анимации Smart Animate со скорость 250ms.

А третий вариант показывает изменение элемента в состоянии Press. По этому тут как триггер между вторым и третьим вариантом нужно выбрать While pressing.

• Выбираем триггер While pressing.
• В анимации Smart Animate со скорость 300ms.

И вот наша кнопка с анимацией готова, теперь нужно создать другие элементы.

Шаг 7: Создаем фрейм для интерфейса

Необходимо нашу кнопку и будущие элементы экрана, разместить во фрейме. Подобрать фон и качественные материалы.

• Создаем фрейм 1728*1117.
• Выбираем заливку градиентом, с левого края #D80001 переходит в #B10101.

Шаг 8: Добавляем контент

Добавьте в ваш фрейм другие элементы, для лучшего эстетического эффекта. Это могут быть: хедер, кнопки, иконки, тексты, иллюстрации и т.д.

Но и это ещё не всё. Мне не хватает сейчас эффектности в этом дизайне. Давайте добавим кое-что ещё!

Шаг 9: Добавляем текст по кругу

Сделаем нестандартный заголовок и разместим его по кругу. Это можно легко сделать с помощью плагина To Path и нашего подробного туториала, как сделать текст по кругу в Figma. Единственное отличие: в туториале мы делали длинную строку текста, чтобы он полностью повторяет контур круга. А сейчас нам достаточно одного слова. Точнее двух, ведь заголовок у нас состоит из двух слов.

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

Шаг 10: Создаем новый фрейм

Поскольку мы создали кнопке состояние press, значит она должна нас куда-то вести или что-то открывать. Давайте сделаем, чтобы при нажатии на кнопку у нас открывался каталог товаров. А яркие цвета главного экрана перекроем новым фреймом с эффектом матового стекла.

• Создаем фрейм 1728*1117.
• Выбираем ему цвет заливки #B10101.
• Ставим ей прозрачность 60%, а в эффектах выбираем Background blur 30.
• Добавляем его во фрейм, поверх всех элементов.

Шаг 11: Добавляем карточки каталога

Я создала отдельно две карточки для каталога, каждая шириной 576 px, с обводкой #FF5E5E. Вы можете создать свои варианты с другой цветовой палитрой, фото, расположением и т.д.

И поскольку у меня только две карточки, то в левую зону я добавила текст, кнопку для закрытия каталога и другие детали. Добавила им группу.

Важно, чтобы эти элементы были над слоями слева выше чем все другие.

Шаг 12: Перемещаем элементы

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

• Группе в левой части делаем прозрачность 0%.
• Первую карточку каталога перемещаем вниз, а вторую вверх. За пределы фрейма.

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

Шаг 13: Создаем компонент с фрейма

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

• Создаем из фрейма компонент.
• Создаем вариант этого фрейма в компоненте.

Шаг 14: Настраиваем второй вариант

• Возвращаем фрейм с эффектом стекла, чтобы он перекрывал элементы ниже.
• Создаем со второго варианта третий.

Шаг 15: Настраиваем третий вариант

Нам нужно вернуть карточки каталога на свои места и добавить видимость тексту слева.

• Возвращаем карточки каталога.
• Группе текста слева возвращаем прозрачность на 100%.

Шаг 16: Настраиваем последний вариант

• Делаем копию с первого варианта. 
• Он нам пригодится, чтобы закрытие каталога было плавным.

Фух! Оказывается сколько нужно продумать перед проектировкой и созданием макета. Это точно не о пустом двигании пикселей и созданием красивой картинки. Это о логике и тщательной подготовке. Но как подготовится правильно? Какие этапы не упустить и с чего вообще начать работать?

А вот студенты Пижамной Академии знают это все «от А и до Я». Ведь на нашем обучении Профессия UI UX дизайнера мы разделили программу на понятные модули — от основ дизайна до презентации проекта и работы с клиентами. Всего за один год ты станешь не просто одним из дизайнером, ты станешь востребованным в этой профессии с навыками работы в AI и советами от профессионалов из Google, Fiverr, Meta и т.д. Готов изменить свою жизнь и стать частью большого комьюнити «пижамных дизайнеров»?

Шаг 17: Подключаем анимацию

Чтобы мы не запутались, сначала добавим анимацию по On click. Она будет срабатывать между первым и вторым по кнопке на Go to catalog, и между третьим и четвертым по кнопке Close catalog.

• Настраиваем между вариантами, через клик по кнопке триггер On click.
• С анимацией по Smart Animate со скоростью 600ms.

Шаг 18: Подключаем After delay

Между другими вариантами, что остались, нужно настроить After delay.

• Добавляем между вторым и третьим вариантами After delay в 200ms.
• Анимацию выбираем Smart animate 600ms.

• Добавляем между четвертым и первым вариантами After delay в 1ms.
• Анимацию выбираем Instant.

Шаг 19: Создаем новый фрейм

Создаем новый фрейм, чтобы проверить результаты нашей работы.

• Создаем новый фрейм, размером 1728*1117. 
• Добавляем в него копию первого варианта.
• И включаем Present.

И вот мы создали кликабельную кнопку

И не просто кнопку, а целый экран с эффектной анимацией.

Именно такие интерактивные элементы делают интерфейс живым и запоминающимся. А самое главное — вы теперь умеете это делать сами, и не только это! Ведь ещё больше туториалов вы можете найти на нашем сайте в разделе Уроки по Figma. И дополнить свой дизайн одной из наших эффектных идей.