LanguageРусский
Столп 02 · Руководство по моушен-дизайну
Figma Motion: что он может и чего не может (и что использовать для производства)
Figma Motion — это самый быстрый способ создания движения внутри Figma. ExodeUI предназначен для случаев, когда это движение должно выполняться в продукте с состояниями, физикой и вводом пользователя.
What is Figma Motion: in ExodeUI?
Figma Motion — это встроенный режим анимации Figma, запущенный в открытой бета-версии 24 июня 2026 года. Он добавляет временную шкалу в кадр дизайна, чтобы вы могли определять положение, масштабирование, вращение, цвет и непрозрачность ключевого кадра, а затем экспортировать результат в форматы MP4, WebM, GIF, анимированный SVG, Lottie или dotLottie. Все останавливается на файле дизайна: экспортированная анимация не запускает ваш продукт сама по себе, а состояние, входные данные и привязку данных все равно придется встраивать в код. ExodeUI лучше подходит, когда движение должно запускаться в реальном приложении в Интернете, iOS и Android, управляемом состояниями, физикой и вводом пользователя.
Базовая архитектура
Почему инженеры и дизайнеры выбирают ExodeUI
Design, logic and motion in one file that runs inside your app.
Запускаемый компонент и экспортированный клип
Выходные данные ExodeUI — это файл .exode, который среда выполнения воспроизводит в вашем приложении. Figma Motion экспортирует видео GIF, SVG или Lottie, которое воспроизводит анимацию, но не передает состояние вашего приложения.
Конечные автоматы, подключенные к вашему приложению
Моделируйте простой, загрузку, успех и ошибку как состояния с триггерами, которые срабатывает ваш код, вместо того, чтобы хранить каждую комбинацию как вариант Figma.
Физика, которая реагирует на ввод
В работающем изделии действуют пружины и постоянный импульс, поэтому перетаскивание или бросок продолжаются со скоростью пользователя, а не по фиксированной кривой.
Принесите свою работу Figma
Фреймы встречаются с плагином ExodeUI Figma, поэтому вы продолжаете проектировать в Figma и создавать интерактивную часть в ExodeUI.
Объективная оценка
Как ExodeUI сравнивается с Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Поставляется как работающий компонент: файл .exode воспроизводится в форматах React, React Native, SwiftUI, Flutter и других форматах, поэтому движение не перестраивается вручную.
- Конечный автомат с входными данными и событиями, которые ваше приложение запускает во время выполнения.
- Пружины и физика, реагирующие на перетаскивание и скорость жестов в реальном продукте.
- Сервер MCP, позволяющий инструментам кодирования AI, таким как Claude Code и Cursor, создавать и редактировать файл движения.
Figma Motion
- Движение присутствует в файле дизайна, если вы не экспортируете его как видео, GIF, SVG или Lottie; он не запускается как компонент вашего приложения сам по себе.
- Экспортированные Lottie и dotLottie могут воспроизводить анимацию и сохранять интерактивные состояния на уровне формата, но они не привязаны к данным вашего приложения.
- Figma Motion находится в стадии открытого бета-тестирования; публикация анимированных компонентов, генерация агентов и экспорт в высоком разрешении требуют платного полного места.
- 3D-трансформации объявлены в ближайшее время, но не отправляются
Передача разработке
Как использовать в коде
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
импортировать { ExodeUICanvas } из exodeui;
// Пружины, состояния и синхронизация находятся в файле .exode (разработанном в
// редактор). Ваш код передает входные данные и принимает события обратно.
функция экспорта FluidCard() {
возврат (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Что такое Figma Motion
Figma Motion — это режим внутри Figma, который помещает временную шкалу анимации рядом с вашим дизайном. Figma представил его на Config 2026 и начал его развертывание 24 июня 2026 года, и он все еще находится в открытой бета-версии, поэтому функции могут измениться. Вы переключаете кадр в режим движения и используете такие свойства ключевого кадра, как положение, масштаб, вращение, цвет, ширина обводки, обрезка пути и дуги. Он поставляется с предустановками анимации («Затухание», «Поворот», «Масштаб», «Изменение размера» и т. д.) и пользовательскими стилями, переменными движения для замедления и синхронизации, кривыми Безье и пружинами, а также автоматическим набором клавиш, который записывает изменения при прокрутке. В более поздних обновлениях на временной шкале была добавлена текстовая анимация и звук. Motion доступно во время редактирования на всех планах Figma, включая Starter; Figma для планов правительства его не имеет.
- Запущен в Config 2026, выйдет с 24 июня 2026 г. в открытой бета-версии.
- Временная шкала, ключевые кадры, пресеты, пользовательские стили, переменные движения и пружины.
- Текстовая анимация и звук на временной шкале появились в обновлении от 30 сентября 2026 г.
- 3D-преобразования указаны в ближайшее время на странице Figma Motion.
Что Figma Motion может экспортировать
Из кадра с анимацией можно экспортировать MP4, WebM, GIF или анимированный SVG непосредственно из Figma. 30 сентября 2026 года в Figma также добавлен экспорт Lottie и dotLottie. Для экспорта размером более 1920 на 1080 или более 30 кадров в секунду требуется платный план. Экспорт Lottie поддерживает не все: шейдеры, видео и угловые градиенты выводятся в виде статических изображений, а некоторые эффекты, такие как тень, шум и стекло, сглаживаются до вида первого кадра, поэтому Figma рекомендует протестировать файл в проигрывателе, который вы планируете использовать. В режиме разработки отображается полная временная шкала движения и можно копировать значения анимации в формате CSS, JSON или React (включая motion.dev), а сервер Figma MCP передает анимацию агентам кодирования. Для копирования кода и публикации анимированных компонентов требуется платное полное место или место разработчика.
Видео и изображение
MP4, WebM, GIF и анимированный SVG с ограничением 1920×1080 и частотой 30 кадров в секунду на бесплатных планах.
Lottie и dotLottie
Добавлено 30 сентября 2026 г.; шейдеры, видео и угловые градиенты не поддерживаются, а некоторые эффекты выравниваются до первого кадра.
Код и агенты
В режиме разработки значения копируются как CSS, JSON или React, а сервер Figma MCP передает движение агентам кодирования на платном месте.
Где Figma Motion останавливается для производства
Figma Motion хорошо умеет проектировать движение рядом с интерфейсом, а его экспорт и выходные данные в режиме разработки устраняют большую часть старого разрыва в передаче обслуживания. Ограничением является то, что представляет собой экспорт: видео, файл GIF или Lottie — это ресурс воспроизведения, а код из режима разработки — это фрагмент, который разработчик все еще подключает. Ни один из них не работает как компонент вашего продукта сам по себе и не привязан к состояниям и данным внутри вашего приложения. Если кнопка должна находиться в режиме ожидания, наведена, нажата, загружаться, отключена и выдавать ошибку, а анимация должна реагировать на данные и ввод пользователя в Интернете, iOS и Android, эта логика должна быть встроена в каждую базу кода. Figma Motion теперь охватывает больше этапов проектирования анимации и передачи управления, чем при запуске; на этапе выполнения он передается созданному для него инструменту.
Если движение должно запускаться в приложении
ExodeUI — это браузер и настольный инструмент для интерактивного пользовательского интерфейса и анимации для дизайнеров, разработчиков и агентов искусственного интеллекта. Вы создаете движение один раз в открытом файле .exode с конечными автоматами, физикой пружин, входными данными и событиями, а затем отправляете его с пакетами времени выполнения для React, Vue, Svelte, Angular, Solid, React Native, SwiftUI и Flutter. Ваш код передает входные данные и принимает события обратно, поэтому один и тот же файл запускается в приложении, а не перестраивается для каждой платформы. Сервер MCP позволяет Claude Code, Cursor и другим инструментам кодирования AI создавать и редактировать файл с помощью подсказок на простом языке. Вы можете импортировать кадры из Figma с помощью плагина ExodeUI Figma. Мы делаем ExodeUI, поэтому взвешивайте эту деталь соответственно.
Topic Cluster Network
Связанные понятия и инструменты
ExodeUI против Figma Motion
Разница во времени выполнения, бок о бок
Обзор Figma — Exode
Перенос работы с движением Figma в ExodeUI
Среда разработки движения
Изучите полную категорию MDE
Конвертер Figma в Exode
Превратите значения анимации Figma в рабочие пружины
Глоссарий: Весенняя физика
Объяснение пружинной математики, демпфирования и жесткости
Остались вопросы?
Частые вопросы
Создавайте живые компоненты с настоящим движением.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.