LanguageSlovenčina
Pilier 02 · Sprievodca návrhom pohybu
Figma Motion: Čo môže a nemôže robiť (a čo použiť na výrobu)
Figma Motion je najrýchlejší spôsob, ako navrhnúť pohyb vo vnútri Figma. ExodeUI je pre prípad, keď sa tento pohyb musí spustiť v produkte so stavmi, fyzikou a vstupom od používateľa.
What is Figma Motion: in ExodeUI?
Figma Motion je vstavaný animačný režim Figma, ktorý bol spustený v otvorenej beta verzii 24. júna 2026. Do rámca návrhu pridáva časovú os, aby ste mohli umiestniť kľúčovú snímku, jej mierku, rotáciu, farbu a nepriehľadnosť, a potom exportovať výsledok ako MP4, WebM, GIF, animované ZQX1, ZQXX5. Zastaví sa v súbore návrhu: exportovaná animácia nespustí váš produkt sama osebe a kód stavu, vstupu a dátovej väzby musí byť stále zabudovaný. ExodeUI je vhodnejšie, keď sa pohyb musí spustiť v skutočnej aplikácii na webe, iOS a Androide, poháňaný stavmi, fyzikou a vstupom od používateľa.
Základná architektúra
Prečo si inžinieri a dizajnéri vyberajú ExodeUI
Design, logic and motion in one file that runs inside your app.
Spustiteľný komponent vs exportovaný klip
Výstup ExodeUI je súbor .exode, ktorý sa spustí vo vašej aplikácii. Figma Motion exportuje video, GIF, SVG alebo Lottie, ktoré prehráva animáciu, ale nenesie stav vašej aplikácie.
Uveďte stroje pripojené k vašej aplikácii
Model nečinnosti, načítavanie, úspech a chyba ako stavy so spúšťačmi vášho kódu, namiesto toho, aby sa každá kombinácia držala ako variant Figma.
Fyzika, ktorá reaguje na vstup
Pružiny a nepretržitá hybnosť prebiehajú v živom produkte, takže ťah alebo vrhanie pokračuje rýchlosťou používateľa, nie pevnou krivkou.
Prineste svoju prácu Figma
Rámy sa stretávajú s doplnkom ExodeUI Figma, takže pokračujete v navrhovaní v Figma a vytvárate interaktívnu časť v ExodeUI.
Objektívne hodnotenie
Ako ExodeUI v porovnaní s Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Dodáva sa ako bežiaci komponent: súbor .exode sa prehráva v React, React Native, SwiftUI, Flutter a ďalších, takže pohyb nie je prestavovaný ručne
- Stavový stroj so vstupmi a udalosťami, ktoré vaša aplikácia spúšťa za behu
- Pružiny a fyzika, ktoré reagujú na rýchlosť ťahania a gest v živom produkte
- Server MCP, takže nástroje na kódovanie AI, ako sú Claude Code a Cursor, môžu vytvárať a upravovať súbor pohybu
Figma Motion
- Pohyb žije v súbore návrhu, pokiaľ ho neexportujete ako video, GIF, SVG alebo Lottie; nespustí sa ako súčasť vašej aplikácie samostatne
- Exportované Lottie a dotLottie môžu prehrávať animáciu a prenášať interaktívne stavy na úrovni formátu, ale nie sú prepojené s dátami vašej aplikácie
- Figma Motion je v otvorenej beta verzii; publikovanie animovaných komponentov, generovanie agentov a exporty vo vysokom rozlíšení vyžadujú platené plné miesto
- 3D transformácie sú oznámené ako čoskoro, nie sú odoslané
Developer Handoff
Použitie vo vašom kóde
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
import { ExodeUICanvas } z 'exodeui';
// Pružiny, stavy a časovanie žijú v súbore .exode (navrhnutého v
// editor). Váš kód odovzdá vstupy a vypočuje udalosti.
export funkcie FluidCard() {
vrátiť (
<ExodeUIPlátno
src="/fluid_card.bexode"
onTrigger={(name) => console.log('Udalosť ExodeUI:', názov)}
/>
);
}Čo je Figma Motion
Figma Motion je režim vo vnútri Figma, ktorý umiestni časovú os animácie vedľa vášho návrhu. Figma ho predstavil na Config 2026 a začal ho zavádzať 24. júna 2026 a stále je v otvorenej beta verzii, takže funkcie sa môžu zmeniť. Snímku prepnete do režimu pohybu a vlastnosti kľúčovej snímky, ako je poloha, mierka, otočenie, farba, šírka ťahu, orezanie cesty a oblúky. Dodáva sa s prednastavenými animáciami (Fade, Rotate, Scale, Resize a ďalšie) a vlastnými štýlmi, pohybovými premennými na uvoľnenie a načasovanie, Bézierovými krivkami a pružinami a automatickým kľúčovaním, ktoré zaznamenáva zmeny počas čistenia. Neskoršie aktualizácie pridali animáciu textu a zvuk na časovej osi. Pohyb je dostupný, keď upravujete všetky plány Figma vrátane Starter; Figma pre vládne plány ho nemajú.
- Spustené na Config 2026, spustenie od 24. júna 2026, v otvorenej beta verzii
- Časová os, kľúčové snímky, predvoľby, vlastné štýly, premenné pohybu a pružiny
- Textová animácia a zvuk na časovej osi dorazili v aktualizácii z 30. septembra 2026
- 3D transformácie sú čoskoro uvedené na stránke Figma Motion
Čo môže Figma Motion exportovať
Z rámčeka s animáciou môžete exportovať MP4, WebM, GIF alebo animovaný SVG priamo z Figma. Dňa 30. septembra 2026 Figma pridal aj export Lottie a dotLottie. Exporty väčšie ako 1920 x 1080 alebo viac ako 30 snímok za sekundu vyžadujú platený plán. Export Lottie nepodporuje všetko: shadery, video a uhlové prechody vychádzajú ako statické obrázky a niektoré efekty, ako je vrhnutý tieň, šum a sklo, sú sploštené do podoby prvej snímky, takže Figma odporúča otestovať súbor v prehrávači, ktorý plánujete použiť. Režim Dev zobrazuje celú časovú os pohybu a dokáže kopírovať hodnoty animácií ako CSS, JSON alebo React (vrátane motion.dev) a server Figma MCP odovzdá animácie kódovacím agentom. Kopírovanie kódu a publikovanie animovaných komponentov vyžaduje platenú plnú sedačku alebo sedačku pre vývojárov.
Video a obrázok
MP4, WebM, GIF a animované SVG, obmedzené na 1920 × 1080 a 30 FPS na bezplatné plány.
Lottie a dotLottie
Pridané 30. septembra 2026; shadery, video a uhlové prechody nie sú podporované a niektoré efekty sa splošťujú na prvú snímku.
Kód a agenti
Režim vývojára skopíruje hodnoty ako CSS, JSON alebo React a server Figma MCP odovzdá pohyb kódovacím agentom na platenom mieste.
Kde sa Figma Motion zastaví kvôli výrobe
Figma Motion je silný pri navrhovaní pohybu vedľa rozhrania a jeho export a výstup v režime Dev uzatvárajú veľkú časť starej medzery pri odovzdávaní. Limit je to, čo je export: video, súbor GIF alebo Lottie je aktívum na prehrávanie a kód z režimu vývojára je úryvok, ktorý vývojár stále spája. Žiadna z nich nefunguje samostatne ako súčasť vášho produktu a ani jedna nie je viazaná na stavy a údaje vo vašej aplikácii. Ak musí byť tlačidlo nečinné, podržané, stlačené, načítavané, deaktivované a chybné a animácia musí reagovať na údaje a vstup používateľa na webe, iOS a Androide, táto logika musí byť zabudovaná v každej kódovej základni. Figma Motion teraz pokrýva viac z návrhu pohybu a odovzdávania, ako tomu bolo pri spustení; krok za behu je miesto, kde sa odovzdá nástroj, ktorý je na to vytvorený.
Ak sa pohyb musí spustiť v aplikácii
ExodeUI je prehliadač a desktopový nástroj pre interaktívne používateľské rozhranie a animácie pre dizajnérov, vývojárov a agentov AI. Pohyb vytvoríte raz v otvorenom súbore .exode so stavovými strojmi, fyzikou pružiny, vstupmi a udalosťami a potom ho odošlete s balíkmi runtime pre React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a SwiftUI a Flutter. Váš kód odovzdáva vstupy a počuje udalosti späť, takže rovnaký súbor beží v aplikácii namiesto toho, aby bol prebudovaný na platformu. Server MCP umožňuje Claude Code, Cursor a ďalším nástrojom na kódovanie AI vytvárať a upravovať súbor z výziev v jednoduchom jazyku. Snímky môžete priniesť zo Figma pomocou doplnku ExodeUI Figma. Vyrábame ExodeUI, takže túto časť zodpovedajúcim spôsobom zvážte.
Topic Cluster Network
Preskúmajte prepojené koncepty a nástroje
ExodeUI vs Figma Motion
Rozdiel v dobe chodu vedľa seba
Prehľad Figma až Exode
Migrácia pohybovej práce Figma na ExodeUI
Vývojové prostredie pohybu
Preskúmajte celú kategóriu MDE
Nástroj na prevod Figma na Exode
Premeňte hodnoty animácie Figma na produkčné pružiny
Slovník: Jarná fyzika
Vysvetlená pružinová matematika, tlmenie a tuhosť
Máte otázky?
Často kladené otázky
Zostavte živé komponenty skutočným pohybom.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.