LanguageSvenska
Pillar 02 · Motion Design Guide
Figma Motion: Vad det kan och inte kan göra (och vad man ska använda för produktion)
Figma Motion är det snabbaste sättet att designa rörelse inuti Figma. ExodeUI är till för när den rörelsen måste köras i produkten, med tillstånd, fysik och input från användaren.
What is Figma Motion: in ExodeUI?
Figma Motion är Figma:s inbyggda animeringsläge, som lanserades i öppen beta den 24 juni 2026. Det lägger till en tidslinje till en designram så att du kan nyckelbildsposition, skala, rotation, färg och opacitet, och sedan exportera resultatet som MP4, WebM, GIF, ZXQ, ZXQ animated ZXQ, ZXQ, ZXQ dotLottie. Den stannar vid designfilen: en exporterad animation kör inte din produkt på egen hand, och tillstånd, indata och databindning måste fortfarande byggas in i kod. ExodeUI passar bättre när rörelsen måste köras i en riktig app på webben, iOS och Android, driven av tillstånd, fysik och input från användaren.
Kärnarkitektur
Varför ingenjörer och designers väljer ExodeUI
Design, logic and motion in one file that runs inside your app.
Körbar komponent kontra exporterat klipp
ExodeUI-utgången är en .exode-fil som körningen spelar upp i din app. Figma Motion exporterar video, GIF, SVG eller Lottie, som spelar animation men inte har ditt appstatus.
Ange maskiner kopplade till din app
Modell inaktiv, laddning, framgång och fel som tillstånd med utlöser din kod, istället för att hålla varje kombination som en Figma-variant.
Fysik som svarar på input
Fjädrar och kontinuerligt momentum löper i den levande produkten, så ett drag eller kast fortsätter med användarens hastighet, inte en fast kurva.
Ta med ditt Figma-arbete
Ramar stöter på med ExodeUI Figma plugin, så du fortsätter designa i Figma och bygger den interaktiva delen i ExodeUI.
Objektiv utvärdering
Hur ExodeUI jämförs med Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Skickas som en löpande komponent: .exode-filen spelas upp i React, React Native, SwiftUI, Flutter och mer, så rörelsen byggs inte om för hand
- En tillståndsmaskin med ingångar och händelser som din applikation startar under körning
- Fjädrar och fysik som svarar på drag- och gesthastighet i den levande produkten
- En MCP-server så att AI-kodningsverktyg som Claude Code och Cursor kan skapa och redigera rörelsefilen
Figma Motion
- Rörelse finns i designfilen om du inte exporterar den som video, GIF, SVG eller Lottie; den körs inte som din appkomponent på egen hand
- Exporterade Lottie och dotLottie kan spela upp animationer och bära interaktiva tillstånd på formatnivå, men de är inte kopplade till din applikationsdata
- Figma Motion är i öppen beta; publicering av animerade komponenter, agentgenerering och högupplöst export kräver en betald Full plats
- 3D-transformationer tillkännages som kommer snart, skickas inte
Utvecklare Handoff
Använder den i din kod
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importera { ExodeUICanvas } från 'exodeui';
// Fjädrar, tillstånd och timing live i .exode-filen (designad i
// redaktör). Din kod skickar in ingångar och hör händelser tillbaka.
exportfunktion FluidCard() {
återvända (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(namn) => console.log('ExodeUI händelse:', namn)}
/>
);
}Vad Figma Motion är
Figma Motion är ett läge inuti Figma som sätter en animationstidslinje bredvid din design. Figma introducerade den vid Config 2026 och började rulla den 24 juni 2026, och den är fortfarande i öppen beta, så funktioner kan ändras. Du växlar en bildruta till rörelseläge och nyckelbildruteegenskaper som position, skala, rotation, färg, streckbredd, bantrimning och bågar. Den levereras med animeringsförinställningar (Tona, Rotera, Skala, Ändra storlek och mer) och anpassade stilar, rörelsevariabler för lättnader och timing, bezier-kurvor och fjädrar, och auto-keying som registrerar förändringar när du skrubbar. Senare uppdateringar lade till textanimering och ljud på tidslinjen. Motion är tillgängligt medan du redigerar på alla Figma-planer, inklusive Starter; Figma för regeringsplaner har det inte.
- Lanserades på Config 2026, rullas ut från 24 juni 2026, i öppen beta
- Tidslinje, nyckelbildrutor, förinställningar, anpassade stilar, rörelsevariabler och fjädrar
- Textanimering och ljud på tidslinjen kom i uppdateringen den 30 september 2026
- 3D-transformationer listas som kommer snart på Figma Motion-sidan
Vad Figma Motion kan exportera
Från en ram med animering kan du exportera MP4, WebM, GIF eller animerad SVG direkt från Figma. Den 30 september 2026 lade Figma till Lottie och dotLottie export också. Exporter större än 1920 gånger 1080, eller över 30 bilder per sekund, kräver en betald plan. Lottie export stöder inte allt: skuggningar, video och vinkelgradienter kommer ut som statiska bilder, och vissa effekter som skuggor, brus och glas är tillplattade till sin första bildruta, så Figma rekommenderar att du testar filen i spelaren du planerar att använda. Dev Mode visar hela rörelsetidslinjen och kan kopiera animationsvärden som CSS, JSON eller React (inklusive motion.dev), och Figma MCP-servern skickar animationer till kodningsagenter. Kopiering av kod och publicering av animerade komponenter kräver en betald Full plats eller Dev-plats.
Video och bild
MP4, WebM, GIF och animerade SVG, begränsade till 1920×1080 och 30 FPS på gratisplaner.
Lottie och dotLottie
Tillagd 30 september 2026; Shaders, video och vinkelgradienter stöds inte, och vissa effekter plattas ut till den första bildrutan.
Kod och agenter
Dev Mode kopierar värden som CSS, JSON eller React, och Figma MCP-servern lämnar rörelse till kodningsagenter på en betalplats.
Där Figma Motion stannar för produktion
Figma Motion är starka på att designa rörelse bredvid gränssnittet, och dess export- och utvecklingsläge stänger mycket av det gamla handoff-gapet. Gränsen är vad en export är: en video, en GIF eller en Lottie fil är en uppspelningstillgång, och koden från Dev Mode är ett utdrag som en utvecklare fortfarande kopplar upp. Ingen av dem fungerar som din produktkomponent på egen hand och inte heller är bunden till tillstånden och data i din app. Om en knapp måste vara ledig, sväva, tryckas in, laddas, inaktiveras och vara felaktig, och animeringen måste reagera på data och användarinmatning på webben, iOS och Android, måste den logiken byggas in i varje kodbas. Figma Motion täcker nu mer av rörelsedesignen och handoff-steget än vad det gjorde vid lanseringen; körtidssteget är där den lämnar över till ett verktyg som är byggt för det.
Om rörelsen måste köras i appen
ExodeUI är ett webbläsar- och skrivbordsverktyg för interaktivt användargränssnitt och animering, för designers, utvecklare och AI-agenter. Du bygger rörelsen en gång i en öppen .exode-fil med tillståndsmaskiner, fjäderfysik, ingångar och händelser, och skickar den sedan med runtime-paket för React, Vue, Svelte, Angular, Solid, React Native, ZXQXX och ZXQXX. Din kod skickar in ingångar och hör händelser tillbaka, så samma fil körs i appen istället för att byggas om per plattform. En MCP-server låter Claude Code, Cursor och andra AI-kodningsverktyg skapa och redigera filen från vanliga uppmaningar. Du kan ta in ramar från Figma med ExodeUI Figma plugin. Vi gör ExodeUI, så väg den här delen därefter.
Topic Cluster Network
Utforska anslutna koncept och verktyg
ExodeUI vs Figma Motion
Körtidsskillnaden, sida vid sida
Figma till Exode översikt
Migrerar Figma rörelsearbete till ExodeUI
Rörelseutvecklingsmiljö
Utforska hela MDE-kategorin
Figma till Exode Converter Tool
Förvandla Figma animationsvärden till produktionsfjädrar
Ordlista: Vårfysik
Vårmatematik, dämpning och styvhet förklaras
Har du frågor?
Vanliga frågor
Bygg levande komponenter med verklig rörelse.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.