LanguageNederlands
Pijler 02 · Motion Design Gids
Figma Motion: wat het wel en niet kan doen (en wat te gebruiken voor productie)
Figma Motion is de snelste manier om beweging te ontwerpen binnen Figma. ExodeUI is voor wanneer die beweging in het product moet plaatsvinden, met toestanden, fysica en input van de gebruiker.
What is Figma Motion: in ExodeUI?
Figma Motion is de ingebouwde animatiemodus van Figma, gelanceerd in open bèta op 24 juni 2026. Het voegt een tijdlijn toe aan een ontwerpframe, zodat u de positie, schaal, rotatie, kleur en dekking van keyframes kunt wijzigen en het resultaat vervolgens kunt exporteren als MP4, WebM, GIF, geanimeerde SVG, Lottie of dotLottie. Het stopt bij het ontwerpbestand: een geëxporteerde animatie draait je product niet zelfstandig, en status-, invoer- en databinding moeten nog steeds in code worden ingebouwd. ExodeUI past beter wanneer de beweging moet worden uitgevoerd in een echte app op internet, iOS en Android, aangestuurd door statussen, fysica en input van de gebruiker.
Kernarchitectuur
Waarom ingenieurs en ontwerpers kiezen voor ExodeUI
Design, logic and motion in one file that runs inside your app.
Uitvoerbare component versus geëxporteerde clip
ExodeUI-uitvoer is een .exode-bestand dat tijdens de runtime in uw app wordt afgespeeld. Figma Motion exporteert video, GIF, SVG of Lottie, die animaties afspeelt maar uw app-status niet draagt.
Staatsmachines die zijn aangesloten op uw app
Modelleer inactiviteit, laden, succes en fouten als statussen waarbij uw code wordt geactiveerd, in plaats van elke combinatie als een Figma-variant vast te houden.
Fysica die reageert op input
Veren en continu momentum lopen in het live product, dus het slepen of slingeren gaat door met de snelheid van de gebruiker, en niet met een vaste curve.
Breng uw Figma-werk binnen
Frames komen over met de ExodeUI Figma plugin, je blijft dus ontwerpen in Figma en bouwt het interactieve gedeelte in ExodeUI.
Objectieve evaluatie
Hoe ExodeUI zich verhoudt tot Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Wordt verzonden als een actief onderdeel: het .exode-bestand wordt afgespeeld in React, React Native, SwiftUI, Flutter en meer, dus de beweging wordt niet met de hand opnieuw opgebouwd
- Een statusmachine met invoer en gebeurtenissen die uw toepassing tijdens runtime activeert
- Veren en fysica die reageren op sleep- en bewegingssnelheid in het live product
- Een MCP-server zodat AI-coderingstools zoals Claude Code en Cursor het bewegingsbestand kunnen maken en bewerken
Figma Motion
- Beweging leeft in het ontwerpbestand, tenzij u het exporteert als video, GIF, SVG of Lottie; het werkt niet op zichzelf als uw app-component
- Geëxporteerde Lottie en dotLottie kunnen animaties afspelen en interactieve statussen op formaatniveau overbrengen, maar ze zijn niet verbonden met uw applicatiegegevens
- Figma Motion bevindt zich in een open bèta; voor het publiceren van geanimeerde componenten, het genereren van agenten en het exporteren met hoge resolutie is een betaalde Full Seat vereist
- Er wordt aangekondigd dat 3D-transformaties binnenkort beschikbaar zijn en niet worden verzonden
Ontwikkelaar Handoff
Gebruik het in uw code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importeer { ExodeUICanvas } uit 'exodeui';
// Veren, toestanden en timing live in het .exode-bestand (ontworpen in de
//redacteur). Uw code geeft invoer door en hoort gebeurtenissen terug.
exportfunctie FluidCard() {
terug (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(naam) => console.log('ExodeUI gebeurtenis:', naam)}
/>
);
}Wat Figma Motion is
Figma Motion is een modus binnen Figma die een animatietijdlijn naast uw ontwerp plaatst. Figma introduceerde het tijdens Config 2026 en begon het uit te rollen op 24 juni 2026, en het bevindt zich nog steeds in een open bèta, dus functies kunnen veranderen. U schakelt een frame over naar de bewegingsmodus en sleutelframe-eigenschappen zoals positie, schaal, rotatie, kleur, streekbreedte, padafsnijden en bogen. Het wordt geleverd met animatievoorinstellingen (vervagen, roteren, schalen, formaat wijzigen en meer) en aangepaste stijlen, bewegingsvariabelen voor versoepeling en timing, Bezier-curven en veren, en automatisch intoetsen dat veranderingen registreert terwijl je scrubt. Latere updates voegden tekstanimatie en audio toe aan de tijdlijn. Beweging is beschikbaar tijdens het bewerken van alle Figma-abonnementen, inclusief Starter; Figma voor overheidsplannen hebben dit niet.
- Gelanceerd tijdens Config 2026, uitgerold vanaf 24 juni 2026, in open bèta
- Tijdlijn, keyframes, presets, aangepaste stijlen, bewegingsvariabelen en veren
- Tekstanimatie en audio op de tijdlijn zijn aangekomen in de update van 30 september 2026
- 3D-transformaties worden binnenkort vermeld op de Figma Motion-pagina
Wat Figma Motion kan exporteren
Vanuit een frame met animatie kunt u MP4, WebM, GIF of geanimeerde SVG rechtstreeks vanuit Figma exporteren. Op 30 september 2026 heeft Figma ook de Lottie- en dotLottie-export toegevoegd. Voor exporten groter dan 1920 bij 1080, of meer dan 30 frames per seconde, is een betaald abonnement vereist. Lottie-export ondersteunt niet alles: shaders, video en hoekige gradiënten verschijnen als statische afbeeldingen, en sommige effecten zoals slagschaduw, ruis en glas worden afgevlakt tot hun eerste frame-look, dus Figma raadt aan het bestand te testen in de speler die u wilt gebruiken. Dev Mode toont de volledige bewegingstijdlijn en kan animatiewaarden kopiëren als CSS, JSON of React (inclusief motion.dev), en de Figma MCP-server geeft animaties door aan codeeragenten. Voor het kopiëren van code en het publiceren van geanimeerde componenten is een betaalde Full Seat- of Dev-seat vereist.
Video en beeld
MP4, WebM, GIF en geanimeerde SVG, met een maximum van 1920×1080 en 30 FPS bij gratis abonnementen.
Lottie en dotLottie
Toegevoegd op 30 september 2026; shaders, video en hoekgradiënten worden niet ondersteund en sommige effecten worden afgevlakt tot het eerste frame.
Code en agenten
Dev Mode kopieert waarden als CSS, JSON of React, en de Figma MCP-server geeft beweging door aan codeeragenten, op een betaalde stoel.
Waar Figma Motion stopt voor productie
Figma Motion is sterk in het ontwerpen van beweging naast de interface, en de export- en Dev Mode-uitvoer dichten een groot deel van de oude overdrachtskloof. De limiet is wat een export is: een video, een GIF- of een Lottie-bestand is een afspeelmiddel en de code uit de ontwikkelaarsmodus is een fragment dat een ontwikkelaar nog steeds aan het aansluiten is. Geen van beide werkt op zichzelf als uw productcomponent en geen van beide is gebonden aan de statussen en gegevens in uw app. Als een knop inactief moet zijn, moet worden ingedrukt, moet worden ingedrukt, moet worden geladen, uitgeschakeld of een fout moet vertonen, en de animatie moet reageren op gegevens en gebruikersinvoer op internet, iOS en Android, moet die logica in elke codebase worden ingebouwd. Figma Motion omvat nu meer van het bewegingsontwerp en de overdrachtsstap dan bij de lancering; de runtime-stap is waar het wordt overgedragen aan een tool die ervoor is gebouwd.
Als de beweging in de app moet worden uitgevoerd
ExodeUI is een browser- en desktoptool voor interactieve gebruikersinterface en animatie, voor ontwerpers, ontwikkelaars en AI-agenten. Je bouwt de beweging één keer in een open .exode-bestand met toestandsmachines, veerfysica, invoer en gebeurtenissen, en verzendt deze vervolgens met runtime-pakketten voor React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter. Uw code geeft invoer door en hoort gebeurtenissen terug, zodat hetzelfde bestand in de app wordt uitgevoerd in plaats van dat het per platform opnieuw wordt opgebouwd. Met een MCP-server kunnen Claude Code, Cursor en andere AI-coderingstools het bestand maken en bewerken via aanwijzingen in eenvoudige taal. U kunt frames uit Figma binnenhalen met de ExodeUI Figma-plug-in. Wij maken ExodeUI, dus weeg dit onderdeel dienovereenkomstig.
Topic Cluster Network
Ontdek verbonden concepten en tools
ExodeUI versus Figma Motion
Het looptijdverschil, naast elkaar
Overzicht van Figma tot Exode
Bewegingswerk van Figma migreren naar ExodeUI
Bewegingsontwikkelingsomgeving
Ontdek de volledige MDE-categorie
Figma naar Exode conversietool
Zet Figma-animatiewaarden om in productieveren
Woordenlijst: Lentefysica
Veerwiskunde, demping en stijfheid uitgelegd
Heeft u vragen?
Veelgestelde vragen
Bouw levende componenten met echte beweging.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.