Come l’intelligenza artificiale sta ridefinendo il workflow tra designer e sviluppatori
Da febbraio 2026 esiste un ponte diretto tra il codice e il canvas di design. OpenAI Codex e Figma hanno creato un’integrazione bidirezionale che permette di muoversi liberamente tra queste due dimensioni: dal design al codice, e dal codice di nuovo al design. Non è solo automazione – è un cambio di paradigma nel modo in cui pensiamo la costruzione di software.
L’applicazione desktop Codex è progettata per il coding agentivo: fornisce un’interfaccia che ti permette di gestire più agenti in parallelo su progetti diversi, monitorare l’avanzamento senza perdere il contesto e integrare strumenti esterni. L’integrazione con Figma è uno di questi strumenti, ma è anche qualcosa di più: è un esempio di come l’AI possa effettivamente ridurre l’attrito tra discipline diverse.
Dal canvas Figma al codice funzionante
Partiamo dal caso d’uso più intuitivo: hai un design in Figma e vuoi trasformarlo in codice. Il Figma MCP server può catturare informazioni da file Figma Design, Make e FigJam e passarle direttamente a Codex durante il processo di build.
Il processo è semplice ma potente: apri il file Figma, selezioni un frame facendo clic destro e scegli “Copy as” > “Copy link to selection”. Questi URL sono collegati direttamente a un frame specifico sul canvas. Una volta ottenuto il link, passi a Codex e istruisci l’agente con un prompt tipo:
“`
help me implement this Figma design in code, use my existing design system components as much as possible.
“`
A quel punto l’agente chiama il tool `get_design_context` dal Figma MCP server, che estrae layout, stili e informazioni sui componenti. Non è una semplice screenshot – sono dati strutturati che Codex può effettivamente comprendere e utilizzare per generare codice che rispetta il design system esistente.
Quello che fa la differenza
Non stiamo parlando di conversione automatica da design a codice (quella roba ha sempre prodotto risultati mediocri). Qui l’AI comprende il contesto: sa quali componenti hai già nel tuo design system, capisce la logica del layout, riconosce i pattern ricorrenti. Il risultato non è codice generato meccanicamente, ma un’implementazione che tiene conto delle tue convenzioni esistenti.
Dal codice di ritorno al canvas
E qui diventa interessante. Dopo aver iterato nel codice, puoi riportare il design sul canvas Figma per confrontare flussi, esplorare alternative e validare assunzioni. Il tool `generate_figma_design` trasforma un’interfaccia live e funzionante in frame Figma completamente editabili in pochi secondi.
Il workflow prevede questi passaggi: renderizzi la UI dell’applicazione (localmente o tramite un server web pubblico), chiedi a Codex di generare un nuovo file di design Figma, e l’agente ti guida attraverso la creazione o selezione di un file esistente, la scelta del workspace e il setup per la cattura UI.
Quando l’applicazione si ricarica, compare una toolbar con tre opzioni:
– **Entire screen**: cattura il render dell’intera schermata e lo invia al file Figma
– **Select element**: scegli un componente specifico da catturare
– **Open file**: apri il file Figma per ispezionare i nuovi layer di design
Questa è la parte che mi ha colpito: non stai generando screenshot statiche. Stai creando layer Figma veri, editabili, con la struttura gerarchica preservata. Puoi aprire il file e modificare colori, spaziature, tipografia come se avessi disegnato quelle schermate manualmente.
Il ciclo completo
Una volta costruita l’app e configurato il file di design, puoi sfruttare appieno il canvas Figma per iterare: aggiungi componenti del design system, aggiorna stili e font a variabili, regoli layout, inserisci annotazioni, crei interazioni e stati vuoti, collabori su varianti multiple. Fatto questo, riporti le modifiche nell’applicazione via MCP server seguendo gli stessi passaggi iniziali.
Non è un workflow lineare. È un ciclo continuo dove design e sviluppo si informano a vicenda. Il design non è più un artefatto statico che viene “implementato” – diventa parte del processo iterativo di costruzione del software.
Come cambia il ruolo dei professionisti
Alexander Embiricos, product lead di Codex, l’ha messo in modo chiaro: “L’integrazione rende Codex potente per una gamma molto più ampia di builder perché non assume che tu sia prima un designer o un ingegnere. Gli ingegneri possono iterare visivamente senza uscire dal loro flusso, e i designer possono lavorare più vicino all’implementazione reale senza diventare sviluppatori a tempo pieno.”
Loredana Crisan, Chief Design Officer di Figma, ha aggiunto una prospettiva interessante: “Man mano che le barriere per costruire software scendono, la quantità di software creato aumenterà esponenzialmente. Non si tratta più di se puoi costruire, ma di cosa costruisci e come si distingue.”
I numeri dietro l’integrazione
Questa integrazione non arriva nel vuoto. Codex ha superato 1 milione di utenti settimanali. L’app macOS ha raggiunto 1 milione di download nella prima settimana dal lancio a febbraio 2026. La crescita dell’uso è oltre il 400% dall’inizio dell’anno. Più di 500.000 utenti su piani Free e Go si sono uniti dopo il lancio dell’app desktop. Enterprise come Cisco, NVIDIA, Ramp e Datadog hanno già adottato Codex.
L’integrazione supporta attualmente Claude Code e Codex by OpenAI tramite il remote Figma MCP server (https://mcp.figma.com/mcp). Questa è arrivata una settimana dopo un’analoga integrazione con Anthropic Claude Code, segnalando una strategia più ampia di Figma di tessere strumenti AI nel flusso di design.
Cosa significa per chi sviluppa con l’AI
La partnership tra OpenAI e Figma non è nuova – include l’app Figma in ChatGPT lanciata nell’ottobre 2025 e l’utilizzo dei più recenti modelli OpenAI nella piattaforma Figma. Ma questa integrazione bidirezionale via MCP è diversa: non è un assistente che ti suggerisce layout o un plugin che genera varianti. È un’infrastruttura che permette agli agenti AI di operare fluidamente tra il dominio del codice e quello del design.
Per chi sviluppa applicazioni che integrano l’AI, questa è una dimostrazione di come i Large Language Model possano fare da ponte tra rappresentazioni diverse dello stesso artefatto. Il codice e il design non sono più due linguaggi separati che richiedono traduzione manuale – diventano due viste dello stesso oggetto che l’AI può navigare e trasformare.
La documentazione completa è disponibile su https://developers.figma.com/docs/figma-mcp-server/. Il fatto che sia documentata in modo così dettagliato suggerisce che Figma vede questa non solo come una feature, ma come una piattaforma che altri potrebbero estendere.
