Figma mette GitHub nel canvas di design. Cursor scommette sull’opposto

Code Layers, la nuova funzione di Figma, fa qualcosa che due anni fa sarebbe sembrato impossibile: consente di clonare un repository GitHub direttamente sul canvas di design. Una volta trasferito, è possibile estrarre frame di design modificabili dal codice esistente, apportare modifiche visivamente e sincronizzarle di nuovo nel repository — tutto all’interno di un unico file Figma, con la collaborazione in tempo reale intatta. Design e sviluppo nella stessa finestra.

Per i designer che hanno trascorso anni a scrivere note di consegna, copiare specifiche nei ticket Jira o inviare link Zeplin al team di sviluppo, Code Layers cambia il luogo in cui avviene la conversazione tra design e codice. Le modifiche in Figma aggiornano il codice sottostante; le modifiche nel codice aggiornano il layer di design. Il ponte tra le due discipline ha sempre richiesto un cambio di contesto — ora quel cambio diventa più piccolo.

Figma Motion trasforma le animazioni in codice pronto alla consegna

Figma ha annunciato anche Motion, una timeline di animazione basata su keyframe integrata direttamente nel canvas. I designer possono creare transizioni, stati hover e animazioni di scorrimento con una timeline e una libreria di preset, poi esportarle in sette formati: CSS, JSON, React, MP4, WebM, SVG animato e GIF. Un’animazione di caricamento progettata in Figma non è più un documento di riferimento che uno sviluppatore deve interpretare — è l’animazione stessa.

Il terzo annuncio importante riguarda gli Shader Effects, riempimenti accelerati dalla GPU alimentati da WebGPU — lo standard grafico più recente del browser — che permettono ai designer di applicare texture visive complesse e matematicamente generate direttamente ai layer Figma. L’agente IA di Figma può generare questi riempimenti personalizzati da una descrizione testuale o un’immagine caricata. Digitando una frase come ‘vetro smerigliato con morbidi motivi di interferenza blu’, il canvas produce qualcosa che si renderizza in tempo reale e può essere modificato in modo interattivo.

L’agente IA aggiunge competenze, strumenti e connessioni esterne

L’agente IA stesso si è considerevolmente ampliato. Ora può costruire ‘competenze’ riutilizzabili da istruzioni in linguaggio naturale — strumenti personalizzati che automatizzano le attività di design ripetitive senza richiedere conoscenze API — e si connette direttamente a servizi esterni tra cui Notion, GitHub e Microsoft Excel. Un aggiornamento previsto per più avanti nel 2026 aggiungerà Weavy, un costruttore di workflow acquisito da Figma l’anno scorso, per l’automazione basata su nodi all’interno dei file di design.

Non tutto è disponibile oggi. Code Layers è in accesso anticipato, con le candidature che si apriranno a luglio 2026; richiede un posto Full su un piano Figma a pagamento. Shader Effects e l’agente IA migliorato sono già attivi sui piani a pagamento. Figma Motion è disponibile ora per i titolari di posto Full, con la disponibilità generale di Code Layers attesa per più avanti nel 2026.

L’ambizione di Figma di assorbire parti del flusso di lavoro dell’editor di codice si scontra con una domanda concreta: scrivere codice e progettare interfacce sono attività cognitive diverse, e Cursor — l’editor di codice IA che SpaceX ha acquisito per 60 miliardi di dollari la settimana scorsa — ha costruito il suo pubblico tra gli ingegneri, non tra i designer. Se quelle due comunità convergeranno attorno a un canvas condiviso è ancora una questione aperta.

Tag: GitHub, Code Layers, Config 2026, Cursor, Figma, strumenti di design