Создаем красивую анимацию в Figma

Всем привет. Сегодня я расскажу как создать красивую анимацию в Figma. Не претендую на первооткрывателя, так как все предельно просто и наверняка некоторые умеют делать сие действие
1. Итак. Давайте создадим белый фрейм, а нем изобразим простой квадрат с текстом. Выглядить он будет примерно так:



2. Теперь нам нужно сделать дубликат фрейма, который мы сделали выше



3. Поменяем цвет кнопки на дубликате, к примеру, на черный, а так-же немного увеличим саму кнопку с зажатой клавишей Shift, по желанию можете прибавить к тексту +1 пиксель



4. Мы подошли к самому интересному, это анимация. Переходим к первому фрейму, и выбираем слой квадрата



5. С выделенным слоем квадрата, нажимаем на панель "Prototype" в правом верхнем углу



6. Панель немного изменилась, справа от надписи "Interactions" есть значок "+", нажимаем на него, под надписью "Interactions" появится слой



7. Нажимаем на слой, перед нами выскакивает панель "Interactions details", здесь мы будем настраивать анимацию



8. Нажимаем на текст "None", высвечивается список, в списке выбираем "While Hovering". Ниже появляется еще один текст "None", нажимаем на текст и выбираем "Navigate to". Справа от "Navigate to" автоматически будет выбран слой, ничего трогать не нужно. Ниже появляется заголовок "Animation", а ниже заголовка, текст "Instant", нажимаем на текст и выбираем "Smart Animate", ниже от "Smart Animate" будет настройка времени появления и настройка точки появления, ничего не трогаем. Я не буду объяснять значение каждого пункта, здесь легко можно разобраться самому. У вас должно получится так:



9. Поздравляю! Ты сделал свою первую анимацию. Теперь, при наведении на квадрат с текстом, квадрат плавно становится больше и меняет цвет. Результат(нажми) вы можете посмотреть, а так-же сохранить для более подробного изучения


Итоги урока
Согласитесь, за 2 минуты мы оживили кнопку и сделали ее немного красивее. Экспериментируйте, изучайте, ведь анимировать можно все что угодно

Буду рад ответить на любые вопросы
[COLOR=rgb(144, 144, 144)]Telegram - @thisdye[/COLOR]

Пишите свое мнение в комментариях. Спасибо за внимание!