Vai al contenuto principale

Figma Motion

Crea animazioni precise e pronte per la produzione direttamente sull'area di lavoro.

IniziaProva Figma Motion

Motion design, dove progetti.

Puoi allungare, far rimbalzare e schiacciare i tuoi elementi in tutta facilità, sia che tu sia alle prime armi o esperto di easing.

  • Qualcuno sta usando l'agente AI di Figma per creare un'animazione per un'app per attività all'aperto. La finestra di dialogo chiede all'agente di creare un'animazione di tipo glitch, con forme sfalsate.Qualcuno sta usando l'agente AI di Figma per creare un'animazione per un'app per attività all'aperto. La finestra di dialogo chiede all'agente di creare un'animazione di tipo glitch, con forme sfalsate.

    Animazioni sofisticate con un semplice prompt

    Crea animazioni di livello professionale grazie all'agente di Figma. Usalo per movimenti ripetitivi o per narrazioni visive complesse.

  • Una copertina animata per un'app di attività all'aperto viene visualizzata affiancata alla sequenza temporale e ai fotogrammi chiave che la fanno muovere in FigmaUna copertina animata per un'app di attività all'aperto viene visualizzata affiancata alla sequenza temporale e ai fotogrammi chiave che la fanno muovere in Figma

    Controlla ogni fotogramma chiave

    Hai il controllo totale sulla timeline. Imposta ogni fotogramma e proprietà esattamente come desideri, poi coinvolgi il tuo team per dare forma all'animazione finale.

Creatività senza confini. Controllo preciso.

Dai chiarezza ed espressività al tuo lavoro. Anima stati di caricamento, interazioni al passaggio del mouse, stili di loghi e molto altro. L'unico limite è la timeline.

  • Crea velocemente con stili predefiniti

    Gli stili di animazione sono già integrati, inclusi Dissolvenza, Rotazione, Dimensionamento, Ridimensionamento e altri ancora. Combina più stili per realizzare la tua visione.Stili personalizzati in arrivo.

    Esplora stili predefiniti

  • Regola il tempo automaticamente

    Usa l'autokey per tracciare e registrare le tue animazioni, poi personalizza ogni fotogramma chiave con curve di Bézier e molle.

    Informazioni sui fotogrammi chiave
  • Tre immagini piatte di una struttura a cupola arancione, una struttura a cupola bianca e una giacca imbottita che vengono trasformate in una pila di oggetti 3D.Tre immagini piatte di una struttura a cupola arancione, una struttura a cupola bianca e una giacca imbottita che vengono trasformate in una pila di oggetti 3D.

    Entra in una nuova dimensione

    Le trasformazioni 3D danno profondità ai tuoi progetti e alle tue immagini. Combinale con le animazioni per far muovere gli oggetti come nel mondo reale. In arrivo.

    Iscriviti alla lista di attesa

  • Rendi fluide tutte le transizioni

    Ora ogni transizione tra schermate ha una timeline completa, ed è possibile regolare la tempistica di ogni singolo elemento. In arrivo.

Crea i sistemi una sola volta. Applicali ovunque.

Grazie ai sistemi di movimento l'intero team può aggiungere risorse di animazione in linea con il brand ovunque sia necessario.

  • Riutilizza componenti tra le risorse diverse

    Sistematizza le animazioni comuni senza dover ricominciare da zero ogni volta. Crea modalità e componenti in grado di funzionare ovunque vengano applicati.

    Esplora i sistemi

  • Scambia le variabili per risparmiare tempo

    Passa rapidamente da un valore di animazione all'altro grazie a variabili e token.

    Come applicare le variabili

Esporta le animazioni direttamente in codice.

Tutte le tue animazioni sono supportate da codice reale pronto per la produzione ed esportabile direttamente da Figma.

  • Una mappa animata di un museo è visualizzata affiancata al codice che la supporta.Una mappa animata di un museo è visualizzata affiancata al codice che la supporta.

    Passaggi di consegne agli sviluppatori senza complicazioni

    Gli sviluppatori possono ispezionare l'intera timeline di animazione in Dev Mode, per poi copiare il codice dell'animazione direttamente in CSS, JSON o React.

    Come trasferire il codice
  • Una finestra pop-up mostra un file di animazione che viene spostato in un agente di codifica AI.Una finestra pop-up mostra un file di animazione che viene spostato in un agente di codifica AI.

    Fornisci il contesto completo dell'animazione agli agenti AI

    Invia il codice dell'animazione ai tuoi strumenti di programmazione agentici tramite il server MCP di Figma. Mantiene intatti tutti i tuoi valori, come le curve di easing e il tempo.

    Ottieni la guida
  • Un'animazione di una sedia e una lampada futuristica color argento è in fase di esportazione come file MP4.Un'animazione di una sedia e una lampada futuristica color argento è in fase di esportazione come file MP4.

    Esporta direttamente da Figma

    Condividi le tue animazioni ovunque. Trasforma qualsiasi fotogramma animato in un file MP4, GIF, SVG o WebM

    Come esportare file