Figma Motion — это просто космос

Figma Motion — это первая за долгое время функция Figma, которая действительно заставила меня с нетерпением снова открыть холст. Последние полтора года я был так погружен в конструкторы на основе ИИ, что рисование прямоугольников в Figma казалось медленным. Но Figma Motion меняет это ощущение, потому что движение, шейдеры, агенты, автоматические ключевые кадры и эффекты теперь могут располагаться гораздо ближе к самому дизайну. В этом видео я тестирую: базовую анимацию положения, масштаба, размера, прозрачности и цвета автоматические ключевые кадры на временной шкале Figma Motion использование вкладки агента для анимации существующего дизайна анимацию логотипа и текста с шагом где агент все еще ошибается эффекты шейдеров, такие как искажение данных и искажение линзы анимацию настроек шейдера во времени создание пользовательского шейдера в стиле «Матрицы» с помощью агента использование скриншотов и HTML в качестве контекста как это сочетается с агентами Figma, сгенерированными целевыми страницами, автоматической компоновкой и передачей сайта Главная идея: Figma Motion захватывает не потому, что может перемещать круг. Это здорово, потому что позволяет редактировать анимацию там, где уже находится дизайн. Упомянутые ресурсы: Figma Motion: https://www.figma.com/blog/introducin... Использованная программа для записи экрана: https://dreamcut.ai Главы: 00:00 Почему Figma Motion так интересна 00:46 Шейдеры и эффекты в Figma Motion 01:42 Анимация может существовать ближе к коду 02:02 Анимация простого объекта 02:40 Автоматические ключевые кадры и редактирование временной шкалы 03:33 Импорт существующего дизайна 04:17 Использование вкладки агента для анимации 04:54 Анимация логотипа и текста с шагом 05:06 Что агент делает неправильно 05:35 Эффекты шейдеров на реальном пользовательском интерфейсе 06:03 Настройка параметров шейдера 06:49 Поиск плагинов и шейдеров в панели инструментов 07:19 Настройка ключевых кадров искажения линзы 08:16 Создание пользовательского шейдера с помощью агент 08:38 Использование скриншотов и HTML для контекста шейдера 09:09 Анимация пользовательского шейдера Matrix 09:34 Агенты Figma и сгенерированные целевые страницы 09:59 Автоматическая компоновка, сайты и дальнейшие шаги