Phase. Браузерный инструмент для создания интерфейсных и других шейповых анимаций. Отличается простым дружелюбным интерфейсом, который по концепции очень напоминает Figma.

Поддерживает импорт из Figma, командную работу, комментарии, а ещё хранит версии файлов. Результат можно экспортировать в виде Lottie, GIF или MP4. На момент публикации доступно бесплатно. Позже обещают добавить платные тарифы. #инструменты
Изображение поста

Как запечь экспрешены и зачем это нужно 🍳

Lottie не поддерживает эффекты и экспрешены, но их можно превратить в ключи – это называется “запекать” анимацию (bake) Простой пример: Если у вас есть экспрешен loopOut("cycle"), нажмите ПКМ → Keyframe Assistance → Convert Expressions to Keyframes – в каждом кадре появится ключи, повторяющий анимацию экспрешена. Теперь такую анимацию можно использовать в Lottie. Существуют плагины, которые действуют как экспрешенны на параметре path, позволяя его изгибать, пускать волны или другие вторичные действия. Например, плагин Crazy Shapes позволяет создавать волны, изгибы, расстягивания на path, которую потом можно запечь. В гифке поста, тело медведя “растекается” благодаря эффекту waves on path. Вручную добиться такой плавности было бы сложно. ❗️ Минус запекания – увеличивается вес файла, так как ключи ставятся в каждом кадре. Решения этой проблемы: 1. Перед запеканием снизить FPS (например, до 12-30), а потом вернуть 60 – это уменьшит количество ключей, но снизит плавность. 2. Удалить лишние ключи вручную, оставив только нужные. 3. Стандартный инструмент smoother. Уменьшает количество ключей, сохраняя анимацию, но не работает на path. Это продвинутая техника, но не заменяет умение анимировать вручную. Инструменты важны, но главное – насмотренность и понимание, какого эффекта вы хотите достичь💪 Есть и другие плагины под разные задачи, Хороший пост про плагин Tilda для анимации волн. #анимация

Библиотека персонажей.

• Персонажи для B2B и B2C-проектов • Анимационные подсказки в шаблоне • Экспорт в Lottie для интерактивных презентаций #storyboard #ux #prototyping Открыть в Figma

🎯 Оживляем интерфейс с помощью Lottie-анимаций

Саша Гончаров из 2ГИС рассказал, как они добавляют анимации в картографическое приложение, сохраняя баланс между красотой и производительностью. Оказывается, при работе с интерфейсными анимациями нужно забыть 90% возможностей After Effects и научиться создавать магию с помощью простых шейпов и градиентов. Главное правило, которое вывел автор: «дели на два». Если анимация кажется готовой, нужно уменьшить все эффекты вдвое. В интерфейсах классические принципы анимации работают не в полную силу, и то, что хорошо смотрится в рекламе или играх, будет раздражать при ежедневном использовании приложения. Внутри: – Почему из всех инструментов выбрали именно Lottie; – Как различать утилитарные и эмоциональные сценарии анимации; – Почему растровые изображения пришлось перерисовывать в векторы; – Как один кадр анимации может занимать 20 мегабайт видеопамяти; – Зачем нужны градиенты для создания иллюзии объёма и теней; – Как сделать бесшовный переход между слайдами в онбординге. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
#UI_ревью 9. Interactive Login Form
Работа: Outcrowd Сильная работа, которая вызывает вау-эффект, на деле довольно трудоёмкая для разработки, хотя выполнимая. + Без слов считываемая идея, что они следят за курсором, это даёт очень эмоциональный эффект «они меня видят». Такое уже было у Tunnelbear, но в этот раз выполнено более выразительно. + Эффект усиливается их реакцией на ситуацию: пароль неверный или видимый. Забавно отыграны такие эмоции как сочувствие, фрустрация, неловкость, и от этого мы начинаем сопереживать им обратно. + Мультяшный стиль с ярким применением принципов анимации Уолта Диснея. + Простые формы героев, при этом сами они все особенные благодаря исполнению лица, цветам и разнообразию форм. + Поскольку все движущиеся элементы локализованы в блоке слева, понятен механизм экспорта анимации Lottie из After Effects через Bodymovin. C анимацией по тригеру каждой ситуации проблем быть не должно. – Что будет сложно реализовать: движение каждой формы вроде зрачка, лица или рта придётся привязывать к курсору по отдельности, это существенная ручная работа. Дизайн настолько удачный, что его даже плагиатят. Если тебе понравился разбор, поддержи пост звездой. Так мне будет понятно, что такой контент тебе нужен. По теме: Анимация приложения для горных прогулок @slashdesigner #первые_шаги #UI_анимация
Figma to Lottie — анимация проектов Figma с помощью экспорта в Lottie.
Максим Дубнев
Привет! Я Максим, 3D Дизайнер Работал с Northen Sound, Duo Sapience, Surf, Alinom, Milo Concert Hall, Face Control. Преподаю в HSE Art and Design, там же получил образование граф диза. Люблю изучать инструменты и находить новые приёмы. Интересуюсь генеративными подходами, работаю в Cinema 4D + Redshift и Blender. Для меня важно создавать гибкие системы и оптимизировать процессы. Создаю: — Графику для соцсетей — 3d ассеты для дизайн команд — Ролики для презентации продукта — Анимации для сайтов. В том числе и Lotty — Визуальные системы и айдентику — Обучающие форматы, воркшопы → Портфолио Контакт для связи: @sbor_ntra #портфолио
Изображение поста
❗️ Новостной дизайн
#news Magic Animator – ИИ-инструмент для анимации в Figma #figma #uiux #designtrends #design Новый инструмент от Lottielab позволит дизайнерам создавать анимации в Figma всего за несколько секунд, автоматически настраивая все элементы без дополнительных усилий. Инструмент анализирует структуру макета и автоматически создает анимации для элементов интерфейса, значительно ускоряя рабочий процесс. 📌 Ссылка на источник Поставь реакцию 💕 | 🙍‍♂️ Design News
Канал по AE — коллекции эффектов, тренды, плагины, инструменты, примеры и уроки — рассказываем вам про @a_study. Клевое - гайды по экспорту вектора из Ai в Ae, советы по Lottie и его растру, шаблоны и киты. В общем всяко-разно.
Drawer — анимированные иллюстрации на Lottie.
drawer.design
Ecco Icon
Бесплатный регулярно пополняемый набор иконок — классических и анимированных. Через плагин можно добавлять статичные версии, а для разработки скачать Lottie-анимации с сайта. А для тонкой настройки доступны исходники в After Effects. #иконки Людочка, плагины – отборные плагины в Фигме
🍳 Сковородка оживила трекер Deliveroo
Крис Эванс рассказал, как команда перерисовала любимые анимации трекера заказов — ту самую сковородку и её друзей — чтобы они совпадали с новой цветовой палитрой. Идеи проверяли на юзерах, которые всё ещё обожали старый стиль, поэтому решили не отказываться от «магии», а обновить её под современные форматы. GIF-ки заменили на векторные файлы через связку Figma и Jitter, создали версии под новые виды доставки, сократили вес роликов на восемьдесят один процент и добавили поддержку тем. Теперь картинки грузились быстрее, легко меняли цвета и оставались чёткими на любых экранах. Внутри: – Причины обновления анимаций; – Переход с GIF на Lottie; – Связка Figma и Jitter; – Новые цвета и темы; – Экономия веса и скорости. ➡️ Читать статью (medium, надо vpn) ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Lottie Animations — более 3 миллионов анимированных иконок.
LottieFiles — создавайте анимации в Figma и экспортируйте их в Lottie.
Библиотека персонажей.
• Персонажи для B2B и B2C-проектов • Анимационные подсказки в шаблоне • Экспорт в Lottie для интерактивных презентаций #storyboard #ux #prototyping Открыть в Figma
Анимируем иконку в After Effects и Lottie.
⚡️Анимируем дизайны из Figma с помощью AI
Теперь можно анимировать дизайны из Figma за секунды — с помощью Magic Animator. Вот что умеет: 🔹 Генерирует сразу несколько вариантов анимации в один клик 🔹 Экспорт в MP4 (до 4K), GIF, Lottie и не только 🔹 Впервые — редактирование AI-ключевых кадров в редакторе анимации 🔹 Пока работает только с Figma, но скоро будет поддержка Canva и Adobe Express ⏩️ Пробуем бесплатно: https://magicanimator.com/ #нейросети #figma #новости
LottieLab — новый инструмент для создания и редактирования Lottie анимации.
Уже сейчас можно записаться на бета-тестирование. lottielab.io 💎 Дизайн Туса
Magic Animator is now LIVE ✨
Brought to you by Lottielab, this brand-new tool helps you animate your designs in just one click — right inside Figma. ✔️ Animate directly in Figma — no extra tools needed ✔️ Prototype micro-interactions in seconds ✔️ Speed up client approvals with animated previews ✔️ Export to Lottie, GIF, or MP4 — perfect for devs, decks, or Dribbble Try it now: 🔗 Magic Animator plugin
Анимация нейросетью Magic Animator в Figma
https://magicanimator.com/">Появился инструмент, который позволяет делать анимацию автоматически прямо в фигме. Отлично подойдёт для презентаций. Далее в самом Lottielab можно редактировать результат. Прикладываю видео как это работает. Уже попробовал сам, реально определяет что показано в интерфейсе, а не просто по заданным сценариям. Так например у меня был чеклист, и чекбоксы в конце анимировались отдельно. А если хотите делать профессиональную анимацию интерфейсов, то смотрите мой курс, в котором я показываю как делать мясо в After Effects. Figma Pluginhttps://magicanimator.com/ ↗ 🖼️ Хороший интерфейс 🖼️ Концепты интерфейсов 🖼️ Офферы для дизайнеров