Figma Motion: stili di animazione condivisi ed export Lottie, cosa cambia per un design system

Nella maggior parte dei team le durate e gli easing delle animazioni vivono in tre posti diversi: un file Figma, un foglio di variabili CSS e la memoria di chi ha scritto l'ultima transizione. Il 30 settembre 2026 Figma ha pubblicato nel forum degli aggiornamenti di prodotto un annuncio su Motion, la sua funzione di animazione, che prova a ridurre questa dispersione. Motion è in open beta e l'annuncio è firmato dal team Community Support di Figma.

Le novità sono quattro: stili di animazione personalizzati, audio, animazione del testo ed export in Lottie e dotLottie. Le prime e l'ultima sono quelle che riguardano il lavoro con un design system.

Stili di animazione che si pubblicano come gli altri

Secondo l'annuncio, si può salvare uno stile di animazione con easing, durata e altre proprietà legate a variabili, e applicarlo in tutti i design. Gli stili si possono combinare per ottenere animazioni complesse, pubblicare nelle librerie e usare anche con gli agenti di Figma e con gli agenti di codice, tramite MCP o Skills.

Il punto interessante è il perimetro. Un easing salvato come stile in una libreria segue lo stesso percorso di colori e tipografia: si aggiorna in un punto e il cambiamento arriva ai file che usano la libreria. Per le variabili, il post di presentazione di Figma Motion parla già di variabili di motion per personalizzare easing e modalità di animazione, e di una generazione di codice in Dev Mode in formato CSS, JSON e React. Di quel post non ho trovato la data, quindi lo uso solo per il quadro generale delle funzioni.

Quello che l'annuncio non dice è come gli stili si mappano sui token del codice. Una cosa da fare in prova è creare due o tre stili (per esempio un ingresso, un'uscita e un feedback), esportarli e controllare se durate e curve coincidono con quelle già presenti nel tuo CSS. Non l'ho provato io: lo segnalo come verifica da fare, non come risultato.

Audio e animazione del testo

Si può trascinare un file audio su una clip o sulla timeline, tagliarlo, dividerlo e riposizionarlo rispetto ai keyframe; l'audio viene esportato insieme all'animazione in MP4 e WebM. Nei livelli di testo si possono animare singoli caratteri, parole o righe, e il testo resta modificabile dopo l'animazione. Sono funzioni utili soprattutto per video, prototipi e presentazioni. Per un'interfaccia pesano meno, e per questo le lascio fuori dal resto dell'articolo.

Lottie e dotLottie: i limiti scritti nella documentazione

La pagina di aiuto di Figma sull'export elenca i formati disponibili da Motion: MP4, WebM, GIF e SVG, più Lottie, un file JSON con una animazione per file, e dotLottie, un archivio compresso che può contenere più animazioni con le risorse incorporate. Per esportare si seleziona un frame di primo livello con livelli animati, si passa alla scheda Animated nella sezione Export, si scelgono formato, dimensione, frame rate e qualità e si scarica il file.

La documentazione dichiara anche cosa non passa:

• shader, video e gradienti angolari non sono supportati nell'export Lottie;
• ombre esterne, rumore ed effetti vetro sono supportati solo in parte: non si animano e mantengono l'aspetto del primo fotogramma;
• le animazioni complesse o ricche di contenuti multimediali possono pesare sulle prestazioni nei player Lottie;
• esportare oltre 1920 x 1080 o oltre 30 fps richiede un piano a pagamento.

Per l'accesso, la stessa pagina precisa che chi ha il permesso di visualizzazione sul file può esportare, a meno che il proprietario abbia limitato copia e condivisione.

Quando Lottie è la scelta giusta

Le considerazioni che seguono sono mie, non di Figma. Lottie funziona bene per animazioni vettoriali contenute: un'icona che cambia stato, un'illustrazione nell'onboarding, un indicatore di caricamento. In questi casi il file esportato da Motion può arrivare in produzione senza ridisegnare l'animazione nel codice.

Per una transizione di un componente, come l'apertura di un menu o il feedback di un pulsante, resta in generale più adatto il CSS: lavora sugli stessi elementi del DOM, si aggancia ai token e può rispettare la preferenza di riduzione del movimento con una media query. Un player Lottie, invece, riproduce un file e il rispetto di quella preferenza va gestito nel codice che lo incorpora. Anche la regola di Figma sui contenuti pesanti conta: prima di adottare Lottie per un'animazione complessa conviene misurare peso del file e fluidità sui dispositivi più modesti del tuo pubblico.

Cosa fare con una beta

Motion è ancora in open beta, e l'annuncio non indica limiti di piano oltre a quelli visibili nella pagina sull'export. Il post di presentazione dice che gli utenti Starter hanno un accesso limitato e un export ristretto, mentre i full seat di tutti i piani hanno le funzioni di base e l'export, e che gli strumenti legati al design system e al Figma agent richiedono un piano a pagamento. Prima di costruirci sopra un processo, controlla il tuo piano e riesporta due o tre animazioni reali per vedere cosa cambia nel passaggio a Lottie.

Il valore concreto dell'aggiornamento, per ora, è un'ipotesi da mettere alla prova: se gli stili di animazione diventano un asset di libreria, designer e sviluppatori possono smettere di descrivere a parole una curva di easing.

Fonti

1. Figma Forum, Product updates, “Motion adds custom styles, audio, text animations and Lottie export”, 30 settembre 2026
2. Figma Help, “Export animations from Figma”
3. Figma Blog, “Introducing Figma Motion: Your Canvas Now Has a Timeline” (data non verificata)