Livelli di codice Figma e Specs: cosa sono, come funzionano e dove si fermano12 min read

I livelli di codice Figma inseriscono il codice in esecuzione sull’area di disegno e Figma Specs inserisce anche Markdown. Entrambi sono entrati in open beta su Config India il 15 ottobre 2026, quindi un file di progettazione ora può contenere frame, un prototipo funzionante e il piano scritto da cui un agente costruisce.

Questa guida è rivolta a progettisti, PM e ingegneri front-end che decidono se spostare il lavoro su prototipi e specifiche in Figma. Copre cosa fa ciascuna funzionalità, come iniziare, quanto costa in crediti AI e dove il lavoro deve lasciare Figma per i compagni di squadra in Claude, ChatGPT o Cursor.

Nell’era dell’intelligenza artificiale, il design è un codice. Per progettare direttamente nel codice con l’intelligenza artificiale o per trasformare i tuoi progetti Figma in codice, utilizza Anima Playground: descrivi una schermata o inizia da un progetto Figma, quindi continua a ripetere su un’app modificabile che puoi visualizzare in anteprima e pubblicare.

Progetta direttamente nel codice con l’intelligenza artificiale

Progetta con l’intelligenza artificiale: descrivi uno schermo o trasforma i progetti Figma in codice.

Cosa è stato lanciato Figma allo Config India 2026?

I livelli di codice e Specs erano il titolo, ma sono arrivati con una serie di funzionalità dell’agente attorno a loro. Ecco lo stato attuale dal centro assistenza di Figma:

Entrambe le beta verranno distribuite nell’arco di diverse settimane, quindi potresti vederle prima o dopo il resto della tua squadra.

Cosa sono i livelli di codice Figma?

Un livello di codice è un livello che contiene codice reale e in esecuzione. Invece di un prototipo che simula le interazioni con i collegamenti dei frame, ottieni un prototipo funzionante e supportato da codice posizionato sulla tela accanto ai tuoi progetti. I compagni di squadra possono fare clic su di esso, commentarlo e duplicarlo per provare una direzione diversa fianco a fianco.

Figma ti offre quattro modi per avviarne uno:

• Da un disegno. Seleziona i frame e chiedi all’agente Figma di trasformarli in un livello di codice.
• Da un sito web live. Cattura una pagina con l’estensione Figma Chrome e incollala sull’area di disegno.
• Da un repository. Importa una codebase di prototipazione leggera e supportata da GitHub o da una cartella locale. Un’importazione GitHub rimane connessa a quel repository.
• Da zero. Aggiungi un livello di codice vuoto e chiedi all’agente di creare.

Puoi anche portare sul canvas un prototipo che hai creato in uno strumento di codifica tramite il server Figma MCP.

La modifica avviene in tre modi. Chiedi all’agente, annoti i frame per mostrare a cosa appartiene una modifica oppure apri l’editor del codice e modifichi tu stesso il codice. Quando i dettagli visivi contano più del codice, Extract designs trasforma le schermate da un livello di codice in frame Figma modificabili. Quando il codice è pronto per gli ingegneri, puoi inviarlo a un ramo e aprire una richiesta pull.

Cos’è Figma Specs?

Figma chiama Specs “una casa nativa per il contesto”. In pratica si tratta di un documento Markdown collaborativo che vive sull’area di disegno di un file Figma Design o di una scheda FigJam, oppure come un proprio file Spec.

Iniziare è veloce:

1. Crea uno Spec autonomo dal browser dei file o vai a figma.com/spec/new.
2. All’interno di un file di progetto o di una scheda FigJam, fare clic su Spec nella barra degli strumenti o premere D.
3. Ho già un .md file? Trascinalo sull’area di disegno e diventa una specifica.
4. Scrivi con lo Markdown che già conosci: # per le intestazioni, - per proiettili, [] per le cose da fare, > per le virgolette, tre apici inversi per il codice. Digitare / per le immagini, incastri e divisori Figma.

Ciò che rende una specifica più di un file Markdown è ciò che si trova attorno al testo. Puoi incorporare una cornice, una scheda FigJam o qualsiasi nodo dell’area di disegno, in modo che il requisito e il design che descrive rimangano uno accanto all’altro. I compagni di squadra commentano e l’agente Figma può leggere e rispondere a tali commenti.

Specs funziona anche all’esterno di Figma. Gli agenti di codifica connessi al server Figma MCP possono leggere, creare e aggiornare le specifiche utilizzando il file figma-spec abilità. Per distribuirne uno, copi il collegamento alle specifiche nel prompt dell’agente di codifica e con esso vengono forniti i frame, i diagrammi, i livelli di codice e gli snippet Code Connect collegati.

Perché Markdown è diventato il formato di trasferimento

Il post di lancio di Figma lo dice chiaramente: Markdown è ora il formato de facto per la condivisione del contesto con gli agenti. Ogni agente di codifica lo legge. La maggior parte dei team di prodotto conserva già piani, PRD e istruzioni per gli agenti .md file.

La mia lettura è che Specs è Figma che accetta che il passaggio a un agente sia un testo, quindi rende quel testo multiplayer. Un locale AGENTS.md o PRD non ha mai fallito a causa del formato. Ha fallito perché solo una persona l’ha modificato, si è allontanato dai progetti e nessuno è riuscito a vedere quale versione utilizzava l’agente.

All’interno di Figma, Specs risolve il problema. La questione aperta è cosa succede al di fuori di esso. Gli incorporamenti, i commenti e i riferimenti di progettazione in tempo reale sono funzionalità Figma e gli agenti li raggiungono tramite i client elencati nel catalogo Figma MCP. Se i tuoi ingegneri, ChatGPT del tuo PM e Claude del tuo team di marketing hanno tutti bisogno dello stesso piano, devi comunque decidere dove risiedere la copia condivisa.

Un flusso di lavoro pratico: da PRD al livello di codice fino alla richiesta pull

Ecco come le due funzionalità si incastrano in una funzionalità reale, utilizzando solo ciò che Figma documenta oggi.

1. Trascina il tuo PRD sulla tela. Il tuo esistente .md il file diventa una specifica. Nulla viene riscritto e la modifica manuale non utilizza crediti AI.
2. Incorpora i frame di cui parla. Utilizzare / per aggiungere i flussi descritti da PRD. I revisori ora vedono insieme il requisito e la schermata.
3. Trasforma i fotogrammi chiave in un livello di codice. Selezionali e chiedi all’agente. Se disponi già di un repository prototipo, importalo invece da GitHub.
4. Revisione in un unico posto. Raccogli commenti sulle specifiche e sul livello di codice. Chiedi all’agente Figma di rispondere a ogni commento aperto con una soluzione suggerita mentre le persone intervengono sugli stessi thread.
5. Consegnare le specifiche. Incolla il collegamento delle specifiche in Codex, Claude Code o Cursor connesso al server Figma MCP. L’agente ottiene Markdown più il contesto di progettazione collegato.
6. Spedisci il codice prototipo. Invia le modifiche del livello di codice a un ramo e apri una richiesta pull in modo che gli ingegneri possano esaminarle prima di unirle.

L’output è una specifica che il tuo agente di codifica può leggere e un prototipo funzionante su cui il tuo team ha effettivamente fatto clic. Testare il codice generato come qualsiasi altro codice. Un prototipo che viene eseguito non è la stessa cosa del codice pronto per la produzione.

Se il passaggio successivo è trasformare un progetto Figma in codice eseguibile o progettare codice da un prompt, questo è il compito di Anima Playground.

Quanto costano i layer di codice e Specs?

• I livelli di codice utilizzano crediti AI. Sui piani a pagamento, la generazione e la modifica all’interno di un livello di codice sono gratuite fino al 4 novembre 2026. Il lavoro di altri agenti nello stesso prompt utilizza ancora crediti e dopo il 4 novembre tutte le attività del livello di codice utilizzano crediti.
• Specs sono liberi di scrivere. Digitare e modificare personalmente una specifica non utilizza crediti. L’utilizzo dell’agente con una specifica funziona. Passa il mouse sulla ricevuta dopo ogni richiesta per vedere quanto costa.
• Payload e le linee guida aggiungono costi. Figma rileva che entrambi forniscono all’agente più contesto e più lavoro, quindi lo stesso prompt può utilizzare più crediti.

Limiti da verificare prima di pianificare il loro aggiramento

• Lancio. Entrambe le funzionalità sono beta aperte che verranno implementate nel corso di settimane. Cerca l’icona Codice nella barra degli strumenti Figma Design e l’opzione Spec nel browser dei file.
• Piani. Specs necessita di un piano a pagamento. Gli utenti principianti ottengono i livelli di codice ma non Specs. Entrambi necessitano dell’accesso in modifica per creare.
• Rinuncia. Solo gli amministratori aziendali possono disattivare i livelli di codice e solo disattivando tutte le funzionalità AI di Figma.
• Dimensioni del deposito. L’importazione GitHub è destinata a codebase di prototipazione leggera, non a un’app di produzione completa.
• Codice del sistema di progettazione. La connessione del codice del componente reale tramite le origini del codice è ancora una versione beta chiusa, pertanto i livelli di codice potrebbero non utilizzare ancora i componenti di produzione.

Dove si ferma Figma e dove si adattano Anima e AgentGrid.io

Se tutto il tuo team lavora in Figma, i livelli di codice e Specs sono un’impostazione predefinita forte. Il prototipo, il piano e i commenti si trovano nello stesso file e l’agente di Figma e i clienti MCP possono lavorarci.

Due situazioni comuni non rientrano ancora in quel file.

L’idea è nata da qualche altra parte. Un prototipo Claude Design, una pagina HTML generata da ChatGPT o un sito live da cui vuoi imparare. Il server MCP di Figma ora ha un file html_to_figma strumento per HTML generato dall’agente. Anche Buddy di Anima, il nostro agente di progettazione AI all’interno di Figma, diventa HTML, artefatti, immagini e URL di Claude in livelli Figma modificabili, che è utile quando vuoi continuare a progettare su quei livelli con il tuo sistema di progettazione.

Il risultato deve lasciare Figma. Le tue specifiche o prototipi devono essere rivisti da persone esterne al tuo team Figma, modificati da agenti di diversi fornitori o pubblicati come collegamento live. Questo è il lavoro che fa AgentGrid.io, costruito da Anima. Un artefatto Markdown su AgentGrid.io è un documento live a salvataggio automatico che le persone e gli agenti connessi come Claude, ChatGPT, Cursor e Grok Bot possono modificare, con ogni modifica attribuita per nome nella cronologia delle versioni. Un artefatto HTML è una pagina in esecuzione su cui puoi commentare e pubblicare su un URL pubblico quando viene approvata. Puoi anche importare un frame Figma in AgentGrid.io come artefatto dell’app. L’importazione è unidirezionale, quindi le modifiche Figma successive non vengono sincronizzate.

I due non gareggiano per lo stesso gradino. Figma possiede la tela di progettazione. AgentGrid.io è dove Markdown e gli artefatti HTML scompaiono quando il lavoro incrocia strumenti e team.

Prova AgentGrid.io per conservare una specifica o un prototipo che ogni agente del tuo team può modificare e pubblicare.

Usa ogni strumento quando

• Utilizza i livelli di codice Figma quando le parti interessate devono fare clic su un prototipo funzionante accanto ai progetti e confrontare le indicazioni fianco a fianco.
• Utilizzare Figma Specs quando il piano dovrebbe vivere accanto ai frame ed essere letto da un agente di codifica tramite il server Figma MCP.
• Utilizzare Anima Playground quando desideri progettare direttamente nel codice con l’intelligenza artificiale o trasformare un progetto Figma in un’app modificabile che puoi visualizzare in anteprima e pubblicare.
• Utilizzare Buddy quando il punto iniziale è esterno a Figma e desideri livelli modificabili sull’area di disegno. Per un confronto più completo tra la creazione in Figma e un browser builder, vedere Figma Make rispetto a Anima Playground.
• Utilizzare AgentGrid.io quando la specifica o il prototipo devono essere modificati da persone e agenti attraverso gli strumenti, rivisti con commenti e pubblicati come collegamento live.

Domande frequenti

Cosa sono i livelli di codice in Figma?

Un livello di codice è un livello sul canvas Figma che contiene codice reale e in esecuzione. Puoi crearne uno dai frame selezionati, un sito Web live acquisito con l’estensione Figma Chrome, un repository di prototipazione GitHub o un prompt vuoto, quindi fare clic su di esso, commentarlo e duplicarlo per confrontare le indicazioni.

Figma Specs è solo Markdown?

Specs utilizza Markdown per il testo e puoi trascinare qualsiasi file .md sull’area di disegno per crearne uno. Aggiunge funzionalità Figma attorno a quel testo: frame incorporati e schede FigJam, commenti e un agente in grado di leggere e rispondere a tali commenti.

I layer di codice Figma costano crediti AI?

Sì. Sui piani a pagamento, la generazione e la modifica all’interno di un livello di codice sono gratuite fino al 4 novembre 2026. Il lavoro di altri agenti nello stesso prompt utilizza ancora crediti e dopo il 4 novembre tutte le attività del livello di codice utilizzano crediti AI.

Claude Code, Codex o Cursor possono leggere un Figma Spec?

Sì, se sono connessi al server Figma MCP. Gli agenti di codifica possono leggere, creare e aggiornare le specifiche con la competenza figma-spec ed è possibile incollare un collegamento alla specifica nel prompt per passare il contesto di progettazione collegato.

Quali piani Figma includono Specs?

Specs è in versione beta aperta sui piani a pagamento: Professional, Organization, Enterprise e Education, oltre a Government secondo l’articolo Config India di Figma. Non è nel piano Starter gratuito. I livelli di codice sono in fase di implementazione su tutti i piani, incluso Starter.