@Katy93

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

В интернете нашла несколько видео по анимации кнопок, авторы каждый раз копируют фрейм и меняют дизайн кнопки во втором фрейме, а потом просто указывают Prototype. Вот пример анимации кнопок.
animate button
А вот видео с ютуба.
Figma Smart Animate.
Вопрос: Есть другой способ сделать анимацию например используя вместо фреймов rectangle, а то каждый раз копировать фреймы со всеми компонентами внутри нецелесообразно?
  • Вопрос задан
  • 10414 просмотров
Пригласить эксперта
Ответы на вопрос 2
@UNFAMIILIAR1
9. Теперь нам нужно, чтобы при нажатии у нас отображался pressed кнопка. Для этого нам нужно остаться в Prototype кнопки hover и добавить к ней еще одну интерактивность. Нажимаем на кружок с плюсом справа от кнопки hover и перетягиваем его к кнопке pressed. Далее вместо "On click" ставим "While pressing" (при нажатии). И вместо "Navigate to" выбираем "Open overlay". Также не забываем поставить для оверлея положение Manual, о котором я писал выше в пункте 5. И также для него ставим анимацию Dissolve.
60b60b3945865131452146.png
60b60b414c273915422840.png
60b60b49bdf8a522166915.png
60b60b5ba43d5057715370.png
Важно! Также не забыть проверить pressed кнопку в панели Prototype. В ней должна быть интерактивность, которую я описывал в 8 пункте. Подробный скриншот оставлю ниже.
60b60b6ee49db498716144.png

3) Теперь перемещаем static кнопку на наш макет и проверяем все ли работает правильно
60b60cb1d810a973769007.png
*Типа уходит проверять*
Да, все работает верно. Добавляем интерактивность в остальные варианты кнопок и размещаем их на макете.
60b60f0746702237006121.png
Не переживайте, я оставлю свою работу, если что вы сможете посмотреть как у меня все работает.
Вы можете перенести мой проект себе в Drafts. Для этого нажмите сверху на название проекта и выберите "Duplicate to your Drafts". После чего у вас в Drafts появляется копия моего проекта, с которым вы можете взаимодействовать.
60b6115b6f35f506022486.png

Ссылка на мой проект в фигме:
https://www.figma.com/file/hN9qiK1VBDfmRdk0UTvrHn/...

Третий вариант создания кнопок (пока в бета-тесте):
https://www.youtube.com/watch?v=TKaecvutJq4

Также оставлю ссылку по созданию вариантов кнопок от разработчиков фигмы:
https://www.figma.com/community/file/903303571898472063

Надеюсь я помог вам своим подробным ответом, ради которого мне пришлось создать второй аккаунт (●'◡'●).
Удачи!
Ответ написан
@UNFAMIILIAR
Дизайнер-любитель
Здравствуйте, Katy93!
Очень интересный вопрос!
*Я спустя 4 часа .·´¯`(>▂<)´¯`·. *
60b616487b208169403230.png
Я знаю три варианта создания таких кнопок. Первый вы узнали из видеороликов. Я расскажу про второй, которым я пользуюсь и чуть-чуть про третий.

Второй вариант:
1) С помощью оверлея (Open overlay/Close overlay)
+ Можно задать простую анимацию.
- Не работает SmartAnimate. Например плавные линии не будут вырисовываться, как показано в роликах в вашем вопросе.

Для того чтобы его сделать нужно:
1. Создать кнопки:
  • Статичная кнопка (static);
  • При наведении (hover);
  • При нажатии (pressed).

60b5d414b983f153861792.png
А вот так они должны выглядеть в панели слоев .
60b5d4454ed5c875445469.png
(в свернутом виде)
60b5d5a0f17a0685395068.png
(в развернутом)
2. Так, теперь переименуем их.
Выделяем все наши кнопки и нажимаем сочетание клавиш CTRL + R.
60b5d6a132483330569214.png
Я это делаю для того, чтобы объединить все кнопки под единым компонентом.
Для этого во втором поле "Rename to" пишу: "Buttons/". Да, в конце названия я ставлю слеш, чтобы как раз объединить их в единый компонент. И дописываю "Variant" без слеша в конце, это нужно для того, чтобы можно было потом подставить цифру и слеш. В итоге у меня получается: "Buttons/Variant".
И нажимаю Rename.
60b5e18dbc145141799848.png
60b5e19ca5274894337482.png
3. Я выделяю первую группку кнопок и опять нажимаю сочетание клавиш CTRL + R. Далее нажимаю "Current name", чтобы он взял текущие название кнопок и подписываем "1" и в конце ставим "/" слеш, чтобы обозначить что Variant 1 является группой с которой мы будем работать дальше. В итоге у меня написано: "$& 1/".
Нажимаю Rename.
60b5e48b3db47032600269.png
60b5e49237cb4720023194.png
4. Далее я выделяю первую кнопку в Варианте 1 и подписываю после слеша "static". Ко второй кнопке подписываю "hover". К третьей "pressed".
60b5e5ea99bfa740447145.png
60b5e5f1771f1563574407.png
5. Повторяю пункт 3 и 4 для остальных групп кнопок. Т.е. Variant 2 и Variant 3. У которых будут только по два типа кнопок, это static и hover.
Важно! по правилам создания вариантов кнопок я допустил ошибку. У меня отсутствует у Variant 2 и Variant 3 вариант кнопки pressed, а у Variant 1 присутствует. Далее я покажу где эта ошибка проявляется. Не забывайте создавать все варианты кнопок!
60b5e82a0782a999013346.png
60b5e82f69ea8591134542.png
6. Далее выделяем все кнопки и нажимаем сверху "Create multiple components". У нас каждая кнопка станет отдельным компонентом. Справа нажимаем "Combine as variants". И видим что все кнопки поместились в единую группу под названием Buttons.
60b5eb603f61f601470491.png
60b5eb67d8087644398168.png
60b5eb71c29d4093374837.png
7. Слегка изменяем правую панель вариантов, чтобы было удобно ориентироваться при выборе нужной кнопки.
60b5ed13c0657506260940.png
Думаю, так будет лучше.
60b5ed964464d032790764.png
8. Вызываем нашу кнопку через панель Assets. И перетаскиваем ее на рабочую область.
60b5ee5810594105083060.png
60b5ee5ecce32130367763.png
60b5ee660f68e674608852.png
9. Теперь в правой панели мы можем настраивать эту кнопку как угодно.
60b5ef04d53c2453345451.png
Но! Как я уже писал выше, здесь есть ошибка в создании вариантов кнопок. Так как у меня pressed присутствует только в Variant 1, то он будет отображаться даже если мы выберем Variant 2. И если мы будем находиться в Variant 2 и нажмем pressed, то он нас переключит на Variant 1 и поставит pressed. Это неправильно! Это ошибка! Тут либо нужно убрать вариант кнопки pressed, либо добавить к Variant 2 и к Variant 3 отображение кнопки pressed.
60b5f291aabd1909111593.png
60b5f297edd18523703010.png

2) Теперь настраиваем Prototype у кнопок
1. Вызываем еще несколько кнопок из панели Assets (я рассказывал как это делать в 8 пункте предыдущего раздела). И ставим им подходящие свойства в правой панели.
60b5f40b2630a227636947.png
60b5f41041213789382550.png
2. Настроим что будет происходить с кнопкой, когда на нее будут наводить мышкой. Для этого я нажимаю на кнопку static и захожу в панель Prototype. Справа от кнопки появляется кружок, который при наведении будет отображать плюс. Нажимаем на этот кружок и перемещаем его к кнопке со свойством hover.
60b5f774dfa41083186742.png
60b5f77b58f31382857654.png
60b5f780d7f15753257367.png
3. У нас справа появляется небольшая панель в которой мы настроим что при наведении мышкой на static у нас постепенно появлялся hover.
Сейчас настройки тут такие: При клике (On click) навигация к (Navigate to) "Название фрейма"(в нашем случае, он будет отображать название группы кнопок, т.е. Buttons) с анимацией Мгновенно (Instant).
60b5f7fa7e7ee232196132.png
4. Нажимаем на On click и меняем этот параметр на Mouse enter (я знаю что есть вариант While hovering (когда наводят), но разницы в них не вижу, поэтому пользуюсь Mouse enter (когда наводится мышка)).
60b5faab42c0e655530163.png
5. Далее нажимаем на Navigate to и меняем на "Open overlay". Это нужно как раз для появления нашей hover кнопки. Но это еще не все, потом нужно установить где будет появляться этот оверлей кнопки. На данный момент у меня стоит настройка появления этого оверлея по центру фрейма, это не то что нам нужно. Меняем этот параметр на "Manual". Это нужно для более детальной настройки появления кнопки hover. В нашем случае мне нужно, чтобы она появлялась на месте static, поэтому, после того как я нажму "Manual" у меня появится hover с кружком по центру и диагональными линиями. Беремся за этот hover, который с кружком по центру и перетаскиваем его на место кнопки static. Таким образом мы настроили появление hover кнопки на месте static.
60b5fd821d6a4753904980.png
60b5fdab12674493983916.png
60b5fdc817158409744549.png
60b5fe06cc372595354740.png
60b5fe1ae73f8242733894.png
60b5fe235b279835291939.png
6. И вместо анимации Instant (Мгновенно) ставим Dissolve (постепенно).
60b5ff495a10a108792473.png
60b5ff514755c219907188.png
7. Готово. Мы настроили первую кнопку, теперь перейдем к настройке кнопки hover. Для этого нажмем на нее, чтобы далее настраивать в панели Prototype.
60b60086887fc974073604.png
8. Текущая проблема состоит в том, что если мы наводим мышку, то static превращается в hover, но если отводим мышку, то у нас остается hover. Сейчас это исправим. Мы нажимаем на плюс в правой панели выбираем параметр "Click" и меняем его на "Mouse leave" (мышка уходит). И задаем действие, которое будет происходить, а нам нужно чтобы отображался вновь static, поэтому ставим вместо "None" параметр "Close overlay".
60b602da18b91751217225.png
60b602e23b110686517388.png
60b602f3c1094636591353.png
60b602fbdeb5e317990802.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы