Анимация иконки в Фигме. Разбираем пример Telegram

Делаем анимацию перехода в мобильном приложении — несложную, но необходимую и цепляющую))

Вначале отрисуем иконку, как у Telegram, а потом заанимируем её — попробуем воспроизвести анимацию максимально близко к оригиналу.
А заодно попрактикуемся с булевыми операциями, которые упрощают создание иконок)

🔹 Ссылки:
– Исходники для практики: https://design-figma.ru/md/youtube_files
– Урок с анимацией, как у Ozon:    • Smart Animate в Фигме. Делаем анимаци...  

– Курс по веб-дизайну: https://sanya-kvo.ru/
– Курс по UX/UI дизайну: https://sanya-kvo.ru/uxui

– Бесплатный марафон в ТГ: https://t.me/study_kvo
– Бесплатный марафон в ВК: https://vk.com/study_kvo
– Саня Кво в Инсте:   / sanya_kvo  

🔹 Навигация:
00:00:00 – Начало
00:00:28 – Что будем делать: анимация перехода
00:00:53 – Зачем дизайнеру анимация в Фигме: 3 момента
00:01:40 – Воспроизводим иконку
00:03:33 – Булевы операции: как использовать
00:04:35 – Где посмотреть готовый проект изнутри
00:05:21 – Объединяем фигуры в один вектор: 2 способа
00:06:16 – Переходим к анимации
00:09:14 — Как быстро перезапустить прототип
00:09:25 — Логика Smart Animate
00:10:46 — Результат и ээксперименты :)
00:12:18 — Что проверить, если не получается
00:12:39 — Заключение. Твой пример на разбор
00:13:30 — Бесплатные новые практикумы по дизайну

#studykvo #figma #фигма