LanguageDansk
Søjle 02 · Motion Design Guide
Figma Motion: Hvad det kan og ikke kan (og hvad man skal bruge til produktion)
Figma Motion er den hurtigste måde at designe bevægelse inde i Figma. ExodeUI er til når den bevægelse skal køre i produktet, med tilstande, fysik og input fra brugeren.
What is Figma Motion: in ExodeUI?
Figma Motion er Figma's indbyggede animationstilstand, lanceret i åben beta den 24. juni 2026. Den tilføjer en tidslinje til en designramme, så du kan keyframeposition, skalering, rotation, farve og opacitet og derefter eksportere resultatet som MP4, WebM, GIF, ZXQ, ZXQ animated ZXQ, ZXQ, dotLottie. Det stopper ved designfilen: en eksporteret animation kører ikke dit produkt alene, og tilstand, input og databinding skal stadig være indbygget i kode. ExodeUI passer bedre, når bevægelsen skal køre i en rigtig app på web, iOS og Android, drevet af tilstande, fysik og input fra brugeren.
Kernearkitektur
Hvorfor ingeniører og designere vælger ExodeUI
Design, logic and motion in one file that runs inside your app.
Kørbar komponent vs eksporteret klip
ExodeUI-output er en .exode-fil, som runtime afspiller i din app. Figma Motion eksporterer video, GIF, SVG eller Lottie, som afspiller animation, men som ikke bærer din app-tilstand.
Oplys maskiner forbundet til din app
Model inaktiv, indlæsning, succes og fejl som tilstande med udløser din kode udløses, i stedet for at holde hver kombination som en Figma variant.
Fysik, der reagerer på input
Fjedre og kontinuerligt momentum løber i det levende produkt, så et træk eller slyngning fortsætter med brugerens hastighed, ikke en fast kurve.
Medbring dit Figma-arbejde
Rammer støder på ExodeUI Figma plugin, så du bliver ved med at designe i Figma og bygge den interaktive del 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 kørende komponent: .exode-filen afspilles i React, React Native, SwiftUI, Flutter og mere, så bevægelsen ikke genopbygges i hånden
- En tilstandsmaskine med input og hændelser, som din applikation udløser under kørsel
- Fjedre og fysik, der reagerer på træk- og gestushastighed i det levende produkt
- En MCP-server, så AI-kodningsværktøjer såsom Claude Code og Cursor kan oprette og redigere bevægelsesfilen
Figma Motion
- Bevægelse lever i designfilen, medmindre du eksporterer den som video, GIF, SVG eller Lottie; den kører ikke som din app-komponent alene
- Eksporterede Lottie og dotLottie kan afspille animation og bære interaktive tilstande på formatniveau, men de er ikke forbundet til dine applikationsdata
- Figma Motion er i åben beta; udgivelse af animerede komponenter, agentgenerering og eksport i høj opløsning kræver et betalt fuldt sæde
- 3D-transformationer annonceres som kommende snart, ikke afsendt
Udvikler Handoff
Brug det i din kode
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importer { ExodeUICanvas } fra 'exodeui';
// Fjedre, tilstande og timing live i .exode-filen (designet i
// redaktør). Din kode sender input ind og hører begivenheder tilbage.
eksportfunktion FluidCard() {
returnere (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(navn) => console.log('ExodeUI hændelse:', navn)}
/>
);
}Hvad Figma Motion er
Figma Motion er en tilstand inde i Figma, der sætter en animationstidslinje ved siden af dit design. Figma introducerede det ved Config 2026 og begyndte at rulle det ud den 24. juni 2026, og det er stadig i åben beta, så funktioner kan ændres. Du skifter en ramme til bevægelsestilstand og keyframe-egenskaber såsom position, skala, rotation, farve, stregbredde, kurvetrim og buer. Den leveres med forudindstillinger for animation (Fade, Rotate, Scale, Resize og mere) og brugerdefinerede stilarter, bevægelsesvariabler til easing og timing, bezier-kurver og -fjedre og auto-keying, der registrerer ændringer, mens du skrubber. Senere opdateringer tilføjede tekstanimation og lyd på tidslinjen. Bevægelse er tilgængelig, mens du redigerer på alle Figma-planer, inklusive Starter; Figma for regeringsplaner har det ikke.
- Lanceret på Config 2026, rullende ud fra 24. juni 2026, i åben beta
- Tidslinje, keyframes, forudindstillinger, brugerdefinerede stilarter, bevægelsesvariabler og fjedre
- Tekstanimation og lyd på tidslinjen ankom i opdateringen den 30. september 2026
- 3D-transformationer er angivet som kommer snart på Figma Motion-siden
Hvad Figma Motion kan eksportere
Fra en ramme med animation kan du eksportere MP4, WebM, GIF eller animerede SVG direkte fra Figma. Den 30. september 2026 tilføjede Figma også Lottie og dotLottie eksport. Eksporter større end 1920 gange 1080 eller over 30 billeder i sekundet kræver en betalt plan. Lottie-eksport understøtter ikke alt: Shaders, video og vinkelgradienter kommer ud som statiske billeder, og nogle effekter som drop shadow, støj og glas er fladtrykt til deres første-frame-look, så Figma anbefaler at teste filen i den afspiller, du planlægger at bruge. Dev Mode viser den fulde bevægelsestidslinje og kan kopiere animationsværdier som CSS, JSON eller React (inklusive motion.dev), og Figma MCP-serveren sender animationer til kodningsagenter. Kopiering af kode og udgivelse af animerede komponenter kræver et betalt Full-sæde eller Dev-sæde.
Video og billede
MP4, WebM, GIF og animerede SVG, begrænset til 1920×1080 og 30 FPS på gratis planer.
Lottie og dotLottie
Tilføjet 30. september 2026; Shaders, video og vinkelgradienter understøttes ikke, og nogle effekter flader til det første billede.
Kode og agenter
Dev Mode kopierer værdier som CSS, JSON eller React, og Figma MCP-serveren sender bevægelse til kodningsagenter på et betalt sæde.
Hvor Figma Motion stopper for produktion
Figma Motion er stærk til at designe bevægelse ved siden af grænsefladen, og dens eksport- og Dev Mode-output lukker meget af det gamle overdragelsesgab. Grænsen er, hvad en eksport er: en video, en GIF eller en Lottie fil er et afspilningsaktiv, og koden fra Dev Mode er et uddrag, som en udvikler stadig tilslutter. Ingen af dem kører som din produktkomponent alene, og ingen af dem er bundet til tilstandene og dataene i din app. Hvis en knap skal være inaktiv, svævende, trykket ned, indlæst, deaktiveret og ved en fejl, og animationen skal reagere på data og brugerinput på web, iOS og Android, skal denne logik bygges ind i hver kodebase. Figma Motion dækker nu mere af bevægelsesdesignet og overdragelsestrinnet, end det gjorde ved lanceringen; runtime-trinnet er, hvor det afleveres til et værktøj, der er bygget til det.
Hvis bevægelsen skal køre i appen
ExodeUI er et browser- og skrivebordsværktøj til interaktiv UI og animation til designere, udviklere og AI-agenter. Du bygger bevægelsen én gang i en åben .exode-fil med tilstandsmaskiner, fjederfysik, input og hændelser, og sender den derefter med runtime-pakker til React, Vue, Svelte, Angular, Solid, React Native, ZXQX og ZXQX. Din kode sender input ind og hører begivenheder tilbage, så den samme fil kører i appen i stedet for at blive genopbygget pr. platform. En MCP-server lader Claude Code, Cursor og andre AI-kodningsværktøjer oprette og redigere filen fra almindelige prompter. Du kan bringe rammer ind fra Figma med ExodeUI Figma plugin. Vi laver ExodeUI, så vej denne del derefter.
Topic Cluster Network
Udforsk forbundne koncepter og værktøjer
ExodeUI vs Figma Motion
Køretidsforskellen side om side
Figma til Exode oversigt
Migrering af Figma bevægelsesarbejde til ExodeUI
Bevægelsesudviklingsmiljø
Udforsk hele MDE-kategorien
Figma til Exode Konverteringsværktøj
Gør Figma animationsværdier til produktionsfjedre
Ordliste: Forårsfysik
Forårs matematik, dæmpning og stivhed forklaret
Har du spørgsmål?
Ofte stillede spørgsmål
Byg levende komponenter med ægte bevægelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.