LanguageNorsk bokmål
Pilar 02 · Motion Design Guide
Figma Motion: Hva det kan og ikke kan gjøre (og hva du skal bruke til produksjon)
Figma Motion er den raskeste måten å designe bevegelse inne i Figma. ExodeUI er for når den bevegelsen må kjøres i produktet, med tilstander, fysikk og input fra brukeren.
What is Figma Motion: in ExodeUI?
Figma Motion er Figmas innebygde animasjonsmodus, lansert i åpen beta 24. juni 2026. Den legger til en tidslinje til en designramme slik at du kan nøkkelbildeposisjon, skalering, rotasjon, farge og opasitet, og deretter eksportere resultatet som MP4, WebM, GIF, ZXQ, ZXQ animated ZXZX, ZXQ, dotLottie. Den stopper ved designfilen: en eksportert animasjon kjører ikke produktet ditt alene, og tilstand, input og databinding må fortsatt bygges inn i kode. ExodeUI passer bedre når bevegelsen må kjøres i en ekte app på web, iOS og Android, drevet av tilstander, fysikk og input fra brukeren.
Kjernearkitektur
Hvorfor ingeniører og designere velger ExodeUI
Design, logic and motion in one file that runs inside your app.
Kjørbar komponent kontra eksportert klipp
ExodeUI-utdata er en .exode-fil kjøretiden spiller av i appen din. Figma Motion eksporterer video, GIF, SVG eller Lottie, som spiller av animasjon, men som ikke har appstatusen din.
Oppgi maskiner koblet til appen din
Modell inaktiv, lasting, suksess og feil som tilstander med utløser koden din, i stedet for å holde hver kombinasjon som en Figma-variant.
Fysikk som reagerer på innspill
Fjærer og kontinuerlig momentum kjører i det levende produktet, så et drag eller sleng fortsetter med brukerens hastighet, ikke en fast kurve.
Ta med Figma-arbeidet ditt
Rammer kommer over med ExodeUI Figma-plugin, så du fortsetter å designe i Figma og bygger den interaktive delen i ExodeUI.
Objektiv evaluering
Hvordan ExodeUI sammenlignes med Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Sendes som en løpende komponent: .exode-filen spilles av i React, React Native, SwiftUI, Flutter og mer, slik at bevegelsen ikke gjenoppbygges for hånd
- En tilstandsmaskin med innganger og hendelser applikasjonen din utløses under kjøretid
- Fjærer og fysikk som reagerer på drag og bevegelseshastighet i det levende produktet
- En MCP-server slik at AI-kodingsverktøy som Claude Code og Cursor kan opprette og redigere bevegelsesfilen
Figma Motion
- Motion bor i designfilen med mindre du eksporterer den som video, GIF, SVG eller Lottie; den kjører ikke som din app-komponent alene
- Eksporterte Lottie og dotLottie kan spille av animasjon og bære interaktive tilstander på formatnivå, men de er ikke koblet til applikasjonsdataene dine
- Figma Motion er i åpen beta; publisering av animerte komponenter, agentgenerering og høyoppløselig eksport krever et betalt Fullt sete
- 3D-transformasjoner annonseres som kommer snart, ikke sendt
Utvikler Handoff
Bruker den i koden din
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importer { ExodeUICanvas } fra 'exodeui';
// Fjærer, tilstander og timing live i .exode-filen (designet i
// redaktør). Koden din sender inn og hører hendelser tilbake.
eksportfunksjon FluidCard() {
returnere (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(navn) => console.log('ExodeUI hendelse:', navn)}
/>
);
}Hva Figma Motion er
Figma Motion er en modus inne i Figma som setter en animasjonstidslinje ved siden av designet ditt. Figma introduserte det på Config 2026 og begynte å rulle det ut 24. juni 2026, og det er fortsatt i åpen beta, så funksjonene kan endres. Du bytter en ramme til bevegelsesmodus og nøkkelbildeegenskaper som posisjon, skala, rotasjon, farge, strekbredde, banetrim og buer. Den leveres med forhåndsinnstillinger for animasjon (Fade, Rotate, Scale, Resize og mer) og egendefinerte stiler, bevegelsesvariabler for lettelser og timing, bezier-kurver og fjærer, og auto-tasting som registrerer endringer mens du skrubber. Senere oppdateringer la til tekstanimasjon og lyd på tidslinjen. Motion er tilgjengelig mens du redigerer på alle Figma-planer, inkludert Starter; Figma for regjeringsplaner har det ikke.
- Lansert på Config 2026, ruller ut fra 24. juni 2026, i åpen beta
- Tidslinje, nøkkelbilder, forhåndsinnstillinger, egendefinerte stiler, bevegelsesvariabler og fjærer
- Tekstanimasjon og lyd på tidslinjen kom i 30. september 2026-oppdateringen
- 3D-transformasjoner er oppført som kommer snart på Figma Motion-siden
Hva Figma Motion kan eksportere
Fra en ramme med animasjon kan du eksportere MP4, WebM, GIF eller animert SVG direkte fra Figma. 30. september 2026 la Figma til Lottie og dotLottie eksport også. Eksporter større enn 1920 med 1080, eller over 30 bilder per sekund, trenger en betalt plan. Lottie-eksport støtter ikke alt: skyggelegging, video og vinkelgradienter kommer ut som statiske bilder, og noen effekter som fallskygge, støy og glass er flatet ut til sitt første bilde-utseende, så Figma anbefaler å teste filen i spilleren du planlegger å bruke. Dev Mode viser hele bevegelsestidslinjen og kan kopiere animasjonsverdier som CSS, JSON eller React (inkludert motion.dev), og Figma MCP-serveren sender animasjoner til kodeagenter. Kopiering av kode og publisering av animerte komponenter krever et betalt Full-sete eller Dev-sete.
Video og bilde
MP4, WebM, GIF og animerte SVG, begrenset til 1920×1080 og 30 FPS på gratisplaner.
Lottie og dotLottie
Lagt til 30. september 2026; skyggelegging, video og vinkelgradienter støttes ikke, og noen effekter flater ut til det første bildet.
Kode og agenter
Dev Mode kopierer verdier som CSS, JSON eller React, og Figma MCP-serveren sender bevegelse til kodeagenter, på et betalt sete.
Hvor Figma Motion stopper for produksjon
Figma Motion er sterke på å designe bevegelse ved siden av grensesnittet, og eksport- og Dev Mode-utdata lukker mye av det gamle overleveringsgapet. Grensen er hva en eksport er: en video, en GIF- eller en Lottie-fil er et avspillingselement, og koden fra Dev Mode er en kodebit en utvikler fortsatt kobler opp. Ingen av dem kjører som produktkomponenten din alene, og ingen av dem er bundet til tilstandene og dataene i appen din. Hvis en knapp må være inaktiv, sveve, trykkes, lastes, deaktiveres og være feilaktig, og animasjonen må reagere på data og brukerinndata på web, iOS og Android, må den logikken bygges inn i hver kodebase. Figma Motion dekker nå mer av bevegelsesdesignet og overleveringstrinnet enn det gjorde ved lanseringen; kjøretidstrinnet er der den overføres til et verktøy bygget for det.
Hvis bevegelsen må kjøres i appen
ExodeUI er et nettleser- og skrivebordsverktøy for interaktivt brukergrensesnitt og animasjon, for designere, utviklere og AI-agenter. Du bygger bevegelsen én gang i en åpen .exode-fil med tilstandsmaskiner, vårfysikk, innganger og hendelser, og sender den deretter med kjøretidspakker for React, Vue, Svelte, Angular, Solid, React Native, ZXQX og ZXQX. Koden din sender innganger inn og hører hendelser tilbake, så den samme filen kjører i appen i stedet for å bygges om per plattform. En MCP-server lar Claude Code, Cursor og andre AI-kodingsverktøy opprette og redigere filen fra rene spørsmål. Du kan ta inn rammer fra Figma med ExodeUI Figma-plugin. Vi lager ExodeUI, så vei denne delen deretter.
Topic Cluster Network
Utforsk tilkoblede konsepter og verktøy
ExodeUI vs Figma Motion
Kjøretidsforskjellen, side ved side
Figma til Exode oversikt
Migrering av Figma bevegelsesarbeid til ExodeUI
Motion Development Environment
Utforsk hele MDE-kategorien
Figma til Exode Converter Tool
Gjør Figma animasjonsverdier til produksjonsfjærer
Ordliste: Vårfysikk
Vårmatematikk, demping og stivhet forklart
Har du spørsmål?
Ofte stilte spørsmål
Bygg levende komponenter med ekte bevegelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.