Collega la tua libreria di design
Indica all'agente il tuo design system così il codice generato farà riferimento a token, variabili e struttura dei componenti reali, non a placeholder generici.
Converti i design in codice sul canvas
Trasforma i design di Figma in codice pronto per la produzione con l'AI, direttamente nel tuo file. Niente esportazioni, niente ricostruzioni in un altro strumento, niente fraintendimenti tra design e sviluppo.
Dal design allo sviluppo, tutto in un unico posto
L'agente di Figma traduce i tuoi livelli, componenti e stili reali in codice utilizzabile dagli sviluppatori, mantenendo tutti allineati nello stesso file.
Genera codice allineato al tuo design
L'agente di Figma legge i tuoi livelli, la spaziatura e i componenti reali per produrre codice che riflette ciò che hai effettivamente costruito, non un'approssimazione generica da rifare.
Meno attrito nell'handoff, più velocità
Salta il vai e vieni di esportare specifiche, annotare redline e rispondere a domande sul padding. L'agente traduce le tue decisioni di design in codice che gli sviluppatori possono utilizzare.
Mantieni allineati designer e sviluppatori
La generazione del codice avviene nello stesso file su cui il team lavora sul design, quindi tutti vedono l'unica fonte di verità. Niente esportazioni obsolete in giro, niente dubbi su quale versione sia quella giusta.
Le funzionalità dietro la conversione
Uno sguardo più da vicino a ciò che rende unico l'agente di Figma, pensato per il modo in cui i team di design lavorano davvero.
Prompt in parallelo
Esplora più output di codice insieme — prova una versione React e una HTML contemporaneamente, poi scegli quella che si adatta meglio al tuo stack.
Thread condivisibili
Condividi un thread e il tuo team vedrà l'intero prompt, il contesto di design e l'output di codice. Gli sviluppatori capiscono non solo il 'cosa' ma anche il 'perché'.
Affina con prompt successivi
Il primo output non è perfetto? Aggiusta nello stesso thread — chiedi breakpoint responsive, una sintassi diversa o convenzioni di naming più ordinate.
Figma sembra un'estensione naturale delle mie mani. Elaboro le idee di design sul canvas e lascio che sia l'agente a portarle a termine. Con la libreria di design collegata, si passa dal design al codice più velocemente che mai.
Andy Madrick
Product Designer, Notion
Inizia a usare l'agente di Figma
Seleziona il tuo design
Apri il file in Figma Design e seleziona la cornice, il componente o la sezione che vuoi convertire in codice.
Descrivi l'output
Racconta all'agente cosa ti serve — HTML e CSS, componenti React, o un framework specifico. Includi eventuali convenzioni già in uso dal team.
Rivedi il codice
Controlla l'output generato sul canvas. Non è perfetto? Affina nello stesso thread oppure prova un altro approccio con un prompt parallelo.
Passa lo sviluppo al team
Condividi il thread con gli sviluppatori. Vedranno design, prompt e codice generato in un unico posto, pronti per implementare e iterare.
Diventa un esperto dell'agente
L'agente di design di Figma è arrivato
Scopri di piùGuarda l'agente AI di Figma in azione e scopri come integrarlo nei tuoi flussi di lavoro.
Lavora con l'agente di Figma
IniziaUn playground pratico per esplorare le funzionalità dell'agente di Figma — dalle modifiche in blocco all'implementazione dei feedback — con una guida passo passo integrata.
Come usare l'agente di Figma nei tuoi flussi di lavoro di design
Guarda oraScopri come usare l'agente di Figma nei tuoi flussi di lavoro di design con un tutorial passo passo del team Figma.
FAQ
Un convertitore da Figma a codice trasforma i design visivi in codice pronto per la produzione — HTML, CSS, React o altri formati. L'agente di Figma lo fa direttamente sul canvas, leggendo livelli, componenti e token di design reali per generare codice che riflette ciò che hai effettivamente costruito. Non servono strumenti esterni né esportazioni.
In Figma Design, seleziona la cornice o il componente da convertire, poi apri l'agente dalla barra laterale sinistra o premi CMD + Invio. Descrivi l'output che ti serve — React, HTML, CSS responsive — e l'agente genererà il codice a partire dai livelli di design reali. Affina con altri prompt finché non è pronto per lo sviluppo.
L'agente di Figma può generare codice a partire dal design quando fai un prompt. Seleziona una cornice, descrivi il formato di output desiderato e l'agente convertirà i livelli in codice. Non è completamente automatico — guidi il processo con i prompt — ma la conversione vera e propria viene delegata, senza doverla ricostruire manualmente.
L'accuratezza dipende da quanto è organizzato il tuo design. L'agente di Figma legge livelli, spaziatura e gerarchia dei componenti reali, quindi file più ordinati producono codice più pulito. Naming, comportamento responsive e sintassi possono essere affinati con altri prompt per adattarsi ai tuoi standard.
L'agente di Figma è disponibile su tutti i piani Figma a pagamento. Lo trovi nella barra laterale sinistra di Figma Design. Durante l'attuale beta aperta non consuma crediti AI: è il momento ideale per esplorarlo, sperimentare e condividere il tuo feedback con noi.
Lavora più velocemente con l'agente di Figma