LanguageČeština
Pilíř 02 · Průvodce návrhem pohybu
Figma Motion: Co umí a co nemůže (a co použít pro výrobu)
Figma Motion je nejrychlejší způsob, jak navrhnout pohyb uvnitř Figma. ExodeUI je pro případy, kdy tento pohyb musí běžet v produktu, se stavy, fyzikou a vstupem od uživatele.
What is Figma Motion: in ExodeUI?
Figma Motion je vestavěný animační režim Figma, spuštěný v otevřené beta verzi dne 24. června 2026. Přidává časovou osu do rámečku návrhu, takže můžete klíčový snímek umístit, měřítko, rotaci, barvu a neprůhlednost a poté exportovat výsledek jako MP4, WebM, GIF, animovaný ZQX1, ZQXX5. Zastaví se u souboru návrhu: exportovaná animace nespustí váš produkt sama o sobě a stále je třeba zabudovat do kódu stav, vstup a datovou vazbu. ExodeUI je vhodnější, když pohyb musí běžet ve skutečné aplikaci na webu, iOS a Androidu, řízený stavy, fyzikou a vstupem od uživatele.
Základní architektura
Proč si inženýři a designéři vybírají ExodeUI
Design, logic and motion in one file that runs inside your app.
Spustitelná komponenta vs exportovaný klip
Výstup ExodeUI je soubor .exode, který běhové prostředí přehrává ve vaší aplikaci. Figma Motion exportuje video GIF, SVG nebo Lottie, které přehrává animaci, ale nenese stav vaší aplikace.
Uveďte stroje připojené k vaší aplikaci
Model nečinnosti, načítání, úspěch a chyba jako stavy se spouštěči spouští váš kód, místo toho, abyste drželi každou kombinaci jako variantu Figma.
Fyzika, která reaguje na vstup
Pružiny a spojitá hybnost běží v živém produktu, takže tažení nebo házení pokračuje rychlostí uživatele, nikoli pevnou křivkou.
Přineste svou práci Figma
Rámečky se setkávají s pluginem ExodeUI Figma, takže můžete pokračovat v navrhování v Figma a vytvářet interaktivní část v ExodeUI.
Objektivní hodnocení
Jak ExodeUI ve srovnání s Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Odesílá se jako běžící komponent: soubor .exode se přehrává v React, React Native, SwiftUI, Flutter a dalších, takže pohyb není ručně přestavěn
- Stavový stroj se vstupy a událostmi, které vaše aplikace spouští za běhu
- Pružiny a fyzika, které reagují na rychlost tažení a gest v živém produktu
- Server MCP, takže nástroje pro kódování AI, jako jsou Claude Code a Cursor, mohou vytvářet a upravovat soubor pohybu
Figma Motion
- Pohyb žije v souboru návrhu, pokud jej neexportujete jako video, GIF, SVG nebo Lottie; neběží jako součást vaší aplikace samostatně
- Exportované Lottie a dotLottie mohou přehrávat animaci a přenášet interaktivní stavy na úrovni formátu, ale nejsou propojeny s daty vaší aplikace
- Figma Motion je v otevřené beta verzi; publikování animovaných komponent, generování agentů a exporty ve vysokém rozlišení vyžadují placené plné místo
- 3D transformace jsou oznámeny jako brzy, nebudou odeslány
Developer Handoff
Použití ve vašem kódu
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 časování žijí v souboru .exode (navržený v
// editor). Váš kód předává vstupy a slyší události zpět.
export funkce FluidCard() {
vrátit (
<ExodeUIPlátno
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Co je Figma Motion
Figma Motion je režim uvnitř Figma, který vedle vašeho návrhu umístí časovou osu animace. Figma jej představil na Config 2026 a začal jej zavádět 24. června 2026 a je stále v otevřené beta verzi, takže funkce se mohou změnit. Přepnete snímek do režimu pohybu a vlastnosti klíčového snímku, jako je poloha, měřítko, otočení, barva, šířka tahu, oříznutí cesty a oblouky. Dodává se s přednastavenými animacemi (Fade, Rotate, Scale, Resize a další) a vlastními styly, proměnnými pohybu pro náběh a načasování, Bézierovými křivkami a pružinami a automatickým klíčováním, které zaznamenává změny při drhnutí. Pozdější aktualizace přidaly na časovou osu textovou animaci a zvuk. Pohyb je dostupný, když upravujete všechny plány Figma, včetně Starteru; Figma pro vládní plány to nemají.
- Spuštěno na Config 2026, zaváděno od 24. června 2026, v otevřené beta verzi
- Časová osa, klíčové snímky, přednastavení, vlastní styly, proměnné pohybu a pružiny
- Textová animace a zvuk na časové ose dorazily v aktualizaci z 30. září 2026
- 3D transformace jsou uvedeny jako brzy na stránce Figma Motion
Co umí Figma Motion exportovat
Z rámečku s animací můžete exportovat MP4, WebM, GIF nebo animovaný SVG přímo z Figma. Dne 30. září 2026 přidal Figma také export Lottie a dotLottie. Exporty větší než 1920 x 1080 nebo nad 30 snímků za sekundu vyžadují placený plán. Export Lottie nepodporuje vše: shadery, video a úhlové přechody vycházejí jako statické obrázky a některé efekty, jako je vržený stín, šum a sklo, jsou srovnány do podoby prvního snímku, takže Figma doporučuje otestovat soubor v přehrávači, který plánujete použít. Režim Dev zobrazuje úplnou časovou osu pohybu a může kopírovat hodnoty animace jako CSS, JSON nebo React (včetně motion.dev) a server Figma MCP předává animace kódovacím agentům. Kopírování kódu a publikování animovaných komponent vyžaduje placené plné místo nebo místo pro vývojáře.
Video a obrázek
MP4, WebM, GIF a animovaný SVG s maximálním rozlišením 1920×1080 a 30 FPS na bezplatné plány.
Lottie a dotLottie
Přidáno 30. září 2026; shadery, video a úhlové přechody nejsou podporovány a některé efekty se sloučí k prvnímu snímku.
Kód a agenti
Režim Dev zkopíruje hodnoty jako CSS, JSON nebo React a server Figma MCP předá pohyb kódovacím agentům na placeném místě.
Kde se Figma Motion zastaví kvůli výrobě
Figma Motion je silný v navrhování pohybu vedle rozhraní a jeho export a výstup v režimu Dev zaplňují velkou část staré mezery při předávání. Limit je to, co je export: video, soubor GIF nebo Lottie je aktivum pro přehrávání a kód z režimu Dev je úryvek, který vývojář stále zapojuje. Ani jeden se nespouští samostatně jako komponenta vašeho produktu a ani jeden není vázán na stavy a data uvnitř vaší aplikace. Pokud musí být tlačítko nečinné, najeté, stisknuté, načítané, deaktivované a chybné a animace musí reagovat na data a vstup uživatele na webu, iOS a Androidu, musí být tato logika zabudována do každé kódové báze. Figma Motion nyní pokrývá více z návrhu pohybu a předávání, než tomu bylo při spuštění; krok běhu je místo, kde se předává nástroji, který je pro to vytvořen.
Pokud má být pohyb spuštěn v aplikaci
ExodeUI je prohlížeč a desktopový nástroj pro interaktivní uživatelské rozhraní a animace pro návrháře, vývojáře a agenty AI. Pohyb vytvoříte jednou v otevřeném souboru .exode se stavovými automaty, pružinovou fyzikou, vstupy a událostmi a poté jej odešlete s runtime balíčky pro React, Vue, Svelte, Angular, Solid, React Native, SwiftUI a SwiftUI a Flutter. Váš kód předává vstupy a slyší události zpět, takže stejný soubor běží v aplikaci místo toho, aby byl znovu sestavován pro platformu. Server MCP umožňuje Claude Code, Cursor a dalším nástrojům pro kódování AI vytvářet a upravovat soubor z výzev v běžném jazyce. Snímky můžete přivést ze Figma pomocí pluginu ExodeUI Figma. Vyrábíme ExodeUI, takže tuto část odpovídajícím způsobem zvažte.
Topic Cluster Network
Prozkoumejte propojené koncepty a nástroje
ExodeUI vs Figma Motion
Rozdíl doby běhu vedle sebe
Přehled Figma až Exode
Migrace pohybové práce Figma na ExodeUI
Prostředí pro vývoj pohybu
Prozkoumejte celou kategorii MDE
Nástroj pro převod Figma na Exode
Přeměňte hodnoty animace Figma na produkční pružiny
Glosář: Jarní fyzika
Vysvětlení pružinové matematiky, tlumení a tuhosti
Máte otázky?
Často kladené otázky
Vytvářejte živé komponenty skutečným pohybem.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.