LanguageItaliano
Pilastro 02 · Guida alla progettazione del movimento
Figma Motion: cosa può e cosa non può fare (e cosa utilizzare per la produzione)
Figma Motion è il modo più veloce per progettare il movimento all'interno di Figma. ExodeUI è per quando il movimento deve essere eseguito nel prodotto, con stati, fisica e input dell'utente.
What is Figma Motion: in ExodeUI?
Figma Motion è la modalità di animazione integrata di Figma, lanciata in open beta il 24 giugno 2026. Aggiunge una sequenza temporale a un fotogramma di progettazione in modo da poter posizionare, ridimensionare, ruotare, colore e opacità i fotogrammi chiave, quindi esportare il risultato come MP4, WebM, GIF, SVG animato, Lottie o dotLottie. Si ferma al file di progettazione: un'animazione esportata non esegue il prodotto da sola e lo stato, l'input e l'associazione dei dati devono ancora essere integrati nel codice. ExodeUI è la soluzione migliore quando il movimento deve essere eseguito in un'app reale su Web, iOS e Android, guidata da stati, fisica e input dell'utente.
Architettura centrale
Perché ingegneri e designer scelgono ExodeUI
Design, logic and motion in one file that runs inside your app.
Componente eseguibile e clip esportata
L'output ExodeUI è un file .exode riprodotto dal runtime nella tua app. Figma Motion esporta video, GIF, SVG o Lottie, che riproduce l'animazione ma non riporta lo stato dell'app.
Macchine a stati collegate alla tua app
Modella inattività, caricamento, successo ed errore come stati con i trigger che il tuo codice attiva, invece di mantenere ogni combinazione come una variante Figma.
Fisica che risponde agli input
Molle e slancio continuo scorrono nel prodotto in tensione, quindi un trascinamento o un lancio continuano con la velocità dell'utente, non con una curva fissa.
Porta qui il tuo lavoro Figma
I frame vengono rilevati con il plug-in ExodeUI Figma, quindi continui a progettare in Figma e costruisci la parte interattiva in ExodeUI.
Valutazione oggettiva
Come si confronta ExodeUI con Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Viene fornito come componente in esecuzione: il file .exode viene riprodotto in React, React Native, SwiftUI, Flutter e altro, quindi il movimento non viene ricostruito manualmente
- Una macchina a stati con input ed eventi attivati dall'applicazione in fase di runtime
- Molle e fisica che rispondono alla resistenza e alla velocità dei gesti nel prodotto live
- Un server MCP in modo che gli strumenti di codifica AI come Claude Code e Cursor possano creare e modificare il file di movimento
Figma Motion
- Il movimento risiede nel file di progettazione a meno che non lo esporti come video, GIF, SVG o Lottie; non viene eseguito autonomamente come componente dell'app
- Lottie e dotLottie esportati possono riprodurre animazioni e trasportare stati interattivi a livello di formato, ma non sono collegati ai dati dell'applicazione
- Figma Motion è in open beta; la pubblicazione di componenti animati, la generazione di agenti e le esportazioni ad alta risoluzione richiedono una postazione completa a pagamento
- Le trasformazioni 3D sono annunciate come disponibili a breve, non spedite
Passaggio allo sviluppo
Usarlo nel tuo codice
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
importa { ExodeUICanvas } da 'exodeui';
// Molle, stati e tempistiche vivono nel file .exode (progettato nel file
//editore). Il tuo codice passa gli input e ascolta gli eventi.
funzione di esportazione FluidCard() {
ritorno (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(nome) => console.log('Evento ExodeUI:', nome)}
/>
);
}Cos'è Figma Motion
Figma Motion è una modalità all'interno di Figma che inserisce una sequenza temporale di animazione accanto al tuo progetto. Figma lo ha introdotto al Config 2026 e ha iniziato a implementarlo il 24 giugno 2026, ed è ancora in versione beta aperta, quindi le funzionalità possono cambiare. Puoi passare un fotogramma alla modalità Movimento e alle proprietà del fotogramma chiave come posizione, scala, rotazione, colore, larghezza del tratto, ritaglio del percorso e archi. Viene fornito con preimpostazioni di animazione (dissolvenza, rotazione, scala, ridimensionamento e altro) e stili personalizzati, variabili di movimento per l'allentamento e il timing, curve e molle di Bezier e codifica automatica che registra le modifiche durante lo scorrimento. Gli aggiornamenti successivi hanno aggiunto animazioni di testo e audio sulla timeline. Il movimento è disponibile durante la modifica su tutti i piani Figma, incluso Starter; Figma per i piani governativi non ce l'hanno.
- Lanciato al Config 2026, in uscita dal 24 giugno 2026, in open beta
- Timeline, fotogrammi chiave, preimpostazioni, stili personalizzati, variabili di movimento e molle
- L'animazione del testo e l'audio sulla sequenza temporale sono arrivati con l'aggiornamento del 30 settembre 2026
- Le trasformazioni 3D sono elencate come disponibili a breve nella pagina Figma Motion
Cosa può esportare Figma Motion
Da un fotogramma con animazione puoi esportare MP4, WebM, GIF o SVG animato direttamente da Figma. Il 30 settembre 2026 Figma ha aggiunto anche l'esportazione di Lottie e dotLottie. Le esportazioni superiori a 1920 per 1080 o superiori a 30 fotogrammi al secondo richiedono un piano a pagamento. L'esportazione Lottie non supporta tutto: shader, video e gradienti angolari risultano come immagini statiche e alcuni effetti come ombra esterna, rumore e vetro vengono appiattiti sull'aspetto del primo fotogramma, quindi Figma consiglia di testare il file nel lettore che intendi utilizzare. La modalità Dev mostra la timeline in movimento completo e può copiare i valori di animazione come CSS, JSON o React (incluso motion.dev) e il server Figma MCP passa le animazioni agli agenti di codifica. La copia del codice e la pubblicazione di componenti animati richiedono una licenza completa o di sviluppo a pagamento.
Video e immagine
MP4, WebM, GIF e SVG animato, limitati a 1920×1080 e 30 FPS sui piani gratuiti.
Lottie e dotLottie
Aggiunto il 30 settembre 2026; shader, video e gradienti angolari non sono supportati e alcuni effetti si appiattiscono sul primo fotogramma.
Codice e agenti
La modalità Dev copia i valori come CSS, JSON o React e il server Figma MCP trasmette il movimento agli agenti di codifica, su un posto a pagamento.
Dove Figma Motion si ferma per la produzione
Figma Motion è efficace nel progettare il movimento accanto all'interfaccia e l'esportazione e l'output in modalità Dev colmano gran parte del vecchio divario di trasferimento. Il limite è ciò che è un'esportazione: un video, un file GIF o Lottie è una risorsa di riproduzione e il codice della modalità Dev è uno snippet che uno sviluppatore continua a collegare. Nessuno dei due viene eseguito autonomamente come componente del prodotto e nessuno dei due è vincolato agli stati e ai dati all'interno della tua app. Se un pulsante deve essere inattivo, posizionato al passaggio del mouse, premuto, caricato, disabilitato e in errore e l'animazione deve reagire ai dati e all'input dell'utente su Web, iOS e Android, tale logica deve essere incorporata in ogni codebase. Figma Motion ora copre maggiormente la fase di motion design e handoff rispetto al lancio; la fase di runtime è quella in cui passa a uno strumento creato per questo.
Se il movimento deve essere eseguito nell'app
ExodeUI è uno strumento browser e desktop per interfaccia utente interattiva e animazione, per designer, sviluppatori e agenti IA. Costruisci il movimento una volta in un file .exode aperto con macchine a stati, fisica delle molle, input ed eventi, quindi lo spedisci con pacchetti runtime per React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter. Il tuo codice passa gli input e ascolta gli eventi, quindi lo stesso file viene eseguito nell'app invece di essere ricostruito per piattaforma. Un server MCP consente a Claude Code, Cursor e altri strumenti di codifica AI di creare e modificare il file da istruzioni in linguaggio semplice. Puoi importare frame da Figma con il plugin ExodeUI Figma. Produciamo ExodeUI, quindi pesa questa parte di conseguenza.
Topic Cluster Network
Esplora concetti e strumenti collegati
ExodeUI contro Figma Motion
La differenza di runtime, fianco a fianco
Panoramica da Figma a Exode
Migrazione del lavoro di movimento da Figma a ExodeUI
Ambiente di sviluppo del movimento
Esplora l'intera categoria MDE
Strumento di conversione da Figma a Exode
Trasforma i valori di animazione Figma in molle di produzione
Glossario: Fisica primaverile
Spiegazione di matematica primaverile, smorzamento e rigidità
Hai domande?
Domande frequenti
Crea componenti vivi con movimento reale.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.