Settimana scorsa ho fatto una cosa che provo a trasmettere da mesi ai designer del mio team: ho preso un componente da Figma, l’ho trasformato in codice React, l’ho pushato su GitHub e l’ho ricollegato a Figma. Tutto dal terminale, senza aprire un IDE, senza copiare un colore a mano. Venti minuti netti. Cambia il paradigma di tutto: dai consumi di Token che usi dentro Make al tuo lavoro di creare componenti.
Il componente era un CardButton del design system. Due varianti – sfondo bianco, sfondo scuro – un badge “New” opzionale e un’icona sport. Roba che un dev implementa in un’ora dopo aver interpretato le specifiche dal pannello Inspect di Figma. Io l’ho generato leggendo direttamente il nodo Figma via MCP server.
MCP sta per Model Context Protocol. In pratica e’ un ponte che permette a Claude Code di parlare con Figma come se fosse un’API. Gli passo un URL, lui mi restituisce le proprieta’ del componente: colori, spacing, tipografia, varianti, tutto strutturato. Da li’ genero il codice adattato allo stack del progetto (React, TypeScript, Vite in questo caso) e lo pusho su una repo GitHub con il CLI gh.
La parte che mi ha sorpreso e’ stata Code Connect. Per chi non lo conosce: e’ la feature di Figma che permette di mappare un componente del design al codice reale della tua codebase. Quando un dev apre il pannello Dev Mode e clicca su quel CardButton, invece di vedere background: #2f3c43; border-radius: 8px – che non dice niente a nessuno – vede direttamente
Ho pubblicato il mapping Code Connect via MCP, sempre dal terminale. Un comando, e Figma sapeva che quel nodo corrispondeva a quel file TypeScript su GitHub. Ho verificato con uno screenshot: pannello Dev Mode, etichetta verde “Connected”, preview del codice React. Funziona.
Dove si e’ inceppato il flusso? Sulle icone. Figma MCP esporta le icone vettoriali come sei frammenti SVG separati con posizionamento CSS assoluto, invece che come un unico SVG combinato. Ho dovuto scaricare ogni pezzo, calcolare le coordinate esatte dalle percentuali inset del layout Figma con uno script Python, e ricomporre il tutto a mano. Per un’icona di 24×24 pixel. L’ironia di automatizzare tutto tranne l’ultimo miglio non mi e’ sfuggita. Ovviamente poi ho automatizzato con task specifici anche questo.
Questo mi porta alla riflessione vera. Il flusso design-to-code oggi e’ un problema di integrazione, non di capacita’. Gli strumenti esistono: Figma espone i dati via MCP, Claude Code genera codice idiomatico, GitHub ospita il risultato, Code Connect chiude il cerchio. Il collo di bottiglia sta nei dettagli di interconnessione. Un mapping che si blocca perche’ il primo tentativo ha creato un record “fantasma”. Un token di accesso non configurato che impedisce la pubblicazione via CLI. Un’icona che arriva a pezzi.
Eppure il valore c’e’, ed e’ enorme. Per la prima volta ho visto un flusso dove il designer disegna, l’AI genera e pubblica il componente, e il dev trova il codice pronto in Dev Mode senza dover interpretare nulla. Zero handoff verbale, zero Slack con screenshot, zero “ma quel grigio e’ #2f3c43 o #333?”.
La domanda che mi faccio: quanto tempo ci vuole prima che questo diventi il workflow standard di un team prodotto? Sei mesi? Un anno? E soprattutto – nel vostro team, chi fa oggi quel lavoro di traduzione tra design e codice?
Continua a leggere
