Создаем простую Lottie анимацию.

Figma to Lottie — анимация проектов Figma с помощью экспорта в Lottie.

5 сайтов для создания стильной анимации by benkaluza

Держите ссылки на сайты из этого видео: — Unicorn Studio — Modyfi — Phase — Lottie — Jitter Уже пользовались каким-то из них? #подборки 💙 Профессия Дизайнер

Процесс создания Lottie анимации.

Созданный на основе Lottie (библиотеки анимированных SVG от Airbnb), Lordicon своим красивым набором анимированных иконок позволяет вдохнуть жизнь в любой интерфейс. Здесь, на мой взгляд, очень ценно внимание к деталям и безупречное исполнение. Наборов иконок в интернете более чем достаточно, но среди них редко встречаются иконки с качественным дизайном и необычной анимацией.
Изображение поста
Анимация конфетти в Figma с помощью Lottie и Smart Animate
Изображение поста
Airbnb
Очень нравится новый релиз. На мой взгляд, ребята идут верным путём и максимально расширяют экспириенс в путешествиях. Начинали просто с аренды, а теперь выкатили массу новых фич. Дизайн тоже шикарный. Особенно их новые 3Д иллюстрации. Выглядят прям как из 2006 в софтах на винде, вернулись на 20 лет назад, но освежили. Отдельный кайф это как всегда их micro intercation. Ненавязчиво и в тему. Календарик особенно, который перелистывается. Кайфанул. Это их новый формат Lava, которым они заменили Lottie Чески респект. Круто быть СЕО продукта, когда ты бывший дизайнер и немного понимаешь, как должно быть. Через них, кстати, всегда было 0 проблем с арендой все разы. Все супер удобно и быстро. Осталось заработать пару десятков миллионов, чтобы пожить там в домах, о которых только мечтать можно) ➡️ Посмотреть релиз ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Сайты с классными анимированными иконками ❤️‍🔥
1.lottieflow.com - иконки разных категорий: 404, медиа, соцсети… Можно менять цвета. Вроде как бесплатно. 2. lottiefiles.com - есть как платные, так и бесплатные. Есть версии как для фигма, так для и after effects. 3.lordicon.com - 33 тыс. статичных и анимированных иконок. Бесплатная версия для личного использования, платная версия (8$ в месяц) для коммерции. 4. useanimations.com - коллекция иконок в формате svg и lottie. Бесплатно. Автор: ui.ux.jam 💪 designkarate – уроки фотошоп и фигма.
Уже раз 20 мои хайповые посты на стыке дизайна и разработки подхватывают крупные каналы, сокращают текст через GPT и выкладывают. Причём не учитывают, что в оригинале я часто рассуждаю и допускаю какие-то варианты, а у них это подаётся как свершившийся факт. Какая, нахуй, «прозрачность» — она и так была у вектора в Lottie, чисто паль генеративного текста. И при чём тут растр и 3D? Я написал «возможно»! 💀
Так появляется не просто кривой репост — так рождается новая реальность. Ты пишешь мысль, а выходишь чужой пресс-релиз. И если раньше искажение было манипуляцией, то теперь — просто баг в цепочке: копировать ▶️ вставить. Да и вообще, ощущение, что мы больше не читаем новости — мы наблюдаем, как слухи косплеят правду. Без фактов, без проверок, просто эхо в красивом оформлении. Респект каналам, которые просто форварднули 🥰 #мысли
Изображение поста
Figma развивается так, как и должна — вопреки ожиданиям сообщества
После презентации поднялась волна комментариев: «Зачем создавать новые продукты, если лучше довести до ума то что есть? В чем выгода?». Но Figma действует вполне осознано и стратегически. Это типичная сценарий для продуктовой компании на поздней стадии развития: чтобы сохранять интерес инвесторов и расширять выручку, требуется не просто дорабатывать существующее, а создавать новые продуктовые вертикали. Все просто: нет инвестиций — нет денег на улучшение корового функционала. Сейчас рост для фигмы — это расширение вглубь организации и покрытие всего продуктового цикла: от генерации идеи и дизайна до разработки и маркетинга. Новые продукты позволяют удерживать и расширять клиентов в рамках одной экосистемы. Иронично, что именно такую модель когда-то выстроили Adobe, которые почувствовав угрозу, пытались поглотить Фигму: • Сентябрь 2022 — Adobe объявляет о покупке Figma за $20 млрд. Комьюнити в шоке, дизайнеры в панике. • Ноябрь 2023 — антимонопольные службы блокируют сделку. • Декабрь 2023 — Сделка отменяется, Adobe платит Figma $1 млрд отступных. • Январь 2024 — Adobe закрывает XD, признавая поражения на этом поле. • Апрель 2025 — Figma подаёт документы на IPO. • Май 2025 — Figma презентует Figma Draw — конкурента Illustrator. Помните, как в сериале Silicon Valley большая корпорация хотела купить маленький стартап, но всё обернулось тем, что стартап в итоге сам поглотил корпорацию? Пока ещё рано говорить о таком сценарии — стек Adobe строился десятилетиями. Но с усилением роли AI и ростом экосистемы внутри фигмы, такой твист становится всё более возможным. С развитием возможностей ИИ такой сложный инструмент как Photoshop скорее всего станет рудиментом, а если фигма пойдет дальше в интеграцию с Lottie и Rive, то начнет откусывать аудиторию у After Effects. В Silicon Valley был момент: «Если мы не растём — мы умираем». Figma выбрала расти.
Изображение поста
Drawer — анимированные иллюстрации на Lottie.
drawer.design
Анимация для AI-чат бота.
• Дайте жизнь вашим дизайнам чатботов с помощью бесплатной анимации AI Voice Assistant. • Использован плагин LottieFiles для Figma с векторными слоями и эффектами размытия. • Многообразие анимаций для плавного и современного эффекта. • Идеально подходит для сайтов чатботов или проектов, вдохновленных AI. #animation #AI #chatbot Открыть в Figma
LottieToGIF
Плагин позволяет легко конвертировать Lottie .JSON анимации в GIF формат. 💾 Открыть Dropzz #Plugin
Изображение поста
Lottie анимация в After Effects
Урок по создании анимации для векторной иллюстрации Смотреть урок Design Box
Изображение поста
Анимированные иконки Tab Bar в After Effects и Lottie.
Physics animation
Плагин с реалистичной физикой анимации. Можно настроить движения каждого слоя отдельно — всё интуитивно, без специальных знаний или кода. Поддерживает экспорт в WEBM, Lottie, GIF и SVG. #прочее Людочка, плагины – отборные плагины в Фигме
Новый инструмент для создания анимаций Magic Animator
Lottielab тизерят Magic Animator — инструмент, который анимирует макеты из Figma с помощью AI. И не только из Figma, на сайте показано, что подойдёт файл из Canva и Adobe Express. magicanimator.com ↗ хороший ux · вакансии · концепты
Открыли вейтлист на альфа версию Magic Animator от Lottielab. Вписался, жду:
Ровно двигайся по жизни и всё окей будет
Lottielab щегольнули фичей Magic Animator, которая на изи анимирует интерфейсы и прочие радости. Если всё будет работать по лёгкому движению промта и так же кучеряво, как в тизере, то это бешеная штука как минимум для оживления концептов. Когда появляются подобные нейроприблуды, то я мысленно говорю «спасибо» себе прошлому, который в силу своей лени не тратил время на изучение условного After Effects. Жду релиз. #вести @vestochka_ai
Figma designs, animated with AI✨
Lottielab launches Magic Animator – a game-changing AI tool for animation directly inside Figma 🔜 ▫️Fully integrated with Figma ▫️Analyzes layout & structure to generate smart UI motion ▫️No manual setup needed This could seriously change how we approach motion in UI design, don’t you think? 🔗 Source