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-трансформації з’являться найближчим часом, але не постачаються
Розробник Handoff
Використання цього у вашому коді
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 року, і він все ще перебуває у відкритій бета-версії, тому функції можуть змінюватися. Ви перемикаєте кадр у режим руху та використовуєте такі властивості ключового кадру, як положення, масштаб, обертання, колір, ширина штриха, обрізка контуру та дуги. Він постачається з попередніми настройками анімації (Fade, Rotate, Scale, Resize тощо) і користувальницькими стилями, змінними руху для ослаблення та синхронізації, кривими Безьє та пружинами, а також автоматичним натисканням клавіш, що записує зміни під час протирання. Пізніше оновлення додали текстову анімацію та аудіо на шкалі часу. Рух доступний під час редагування на всіх планах 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 рекомендує протестувати файл у програвачі, який ви плануєте використовувати. Режим Dev показує повну часову шкалу руху та може копіювати значення анімації як CSS, JSON або React (включно з motion.dev), а сервер Figma MCP передає анімацію агентам кодування. Для копіювання коду та публікації анімованих компонентів потрібне платне повне місце або місце розробника.
Відео та зображення
MP4, WebM, GIF і анімований SVG, максимальна роздільна здатність 1920 × 1080 і 30 FPS на безкоштовних планах.
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 та іншим інструментам кодування штучного інтелекту створювати та редагувати файл із підказок простою мовою. Ви можете додати кадри з Figma за допомогою плагіна ExodeUI Figma. Ми виготовляємо ExodeUI, тому зважте цю частину відповідно.
Topic Cluster Network
Досліджуйте концепції та інструменти Connected
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.