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

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

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

🔹 Ссылки:
– Исходники для практики: https://design-figma.ru/md/youtube_files
– Урок с анимацией, как у Ozon: https://youtu.be/PaKHWpEUNQo

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

– Бесплатный марафон в ТГ: https://t.me/study_kvo
– Бесплатный марафон в ВК: https://vk.com/study_kvo
– Саня Кво в Инсте: https://www.instagram.com/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 #фигма

Тэги:

#figma #уроки_веб_дизайна #веб_дизайн_с_нуля #smart_animate_figma #smart_animate_в_фигме #анимация_в_фигме #как_в_фигме_сделать_анимацию #как_в_figma_сделать_анимацию #как_сделать_анимацию_в_фигме #анимация_приложения_в_фигме #уроки_анимации_фигма #figma_анимация #саня_кво #стади_кво #study_kvo #смарт_анимация_фигма #насмотренность_в_дизайне #макс_ширко #алексей_бычков #софья_филиппова #прототипирование_в_figma #прототип_в_фигме #ux #ui #веб_дизайн

Скачать видео