Skip to main content

Da Figma a codice pixel-perfect

Collega l'MCP di Figma e lascia che Devin estragga i design token, crei i componenti e verifichi visivamente il risultato rispetto ai tuoi mockup.
AuthorCognition
CategorySviluppo di funzionalità
FeaturesMCP
1

Collega l’MCP di Figma

Prima che Devin possa leggere i tuoi design, deve poter accedere ai tuoi file Figma tramite il Figma MCP. Una volta connesso, l’MCP è disponibile per tutti nella tua organizzazione: qualsiasi membro del team può collegare file Figma nelle proprie sessioni con Devin.
  1. In Figma, fai clic sull’icona del profilo > Settings > Security
  2. In Personal access tokens, fai clic su Generate new token
  3. Assegna almeno le autorizzazioni di read su File content e Dev resources
  4. Copia il token
  5. In Devin, vai su Settings > MCP Marketplace, trova Figma e fai clic su Enable
  6. Incolla il token quando richiesto
Valuta di creare un account Figma dedicato per Devin (ad esempio, devin@yourcompany.com) con accesso come viewer ai tuoi file di design. In questo modo eviti di collegare l’MCP a un account personale e semplifichi la gestione degli accessi man mano che il tuo team cresce.
Una volta connesso, Devin può leggere qualsiasi file Figma a cui colleghi un link, estraendo gerarchie di componenti, colori, spaziature, tipografia e vincoli di layout direttamente dal design.
2

Condividi un link al design e invia un prompt a Devin

Incolla l’URL di un file Figma nel tuo prompt insieme a ciò che vuoi venga implementato. Sii specifico su quali frame implementare e quali parti della tua codebase utilizzare.Cosa rende buono un prompt per Figma:
  • Inserisci il link al file Figma specifico (non solo al progetto)
  • Indica il frame o la pagina esatta all’interno del file — i file grandi possono avere decine di pagine
  • Fai riferimento alla tua libreria di componenti esistente e al framework CSS
  • Indica dove si trovano i design token (ad es. tailwind.config.ts, src/tokens/)
  • Specifica il percorso del file di destinazione per i nuovi componenti
Se ti ritrovi a ripetere lo stesso contesto tra le sessioni (ad es. “tutte le nuove pagine vanno in src/app/” o “usiamo le primitive di Radix UI”), fornisci questo feedback a Devin e ti proporrà automaticamente di salvarlo come Knowledge — così non dovrai ripeterlo la volta successiva.
3

Devin estrae, compila e verifica

Devin legge il file Figma tramite l’MCP, mappa le proprietà di design alla tua codebase, implementa i componenti e quindi apre il browser per verificare visivamente il risultato.
  1. Legge il file Figma — Estrae l’albero dei componenti, i design token (colori come #6366F1, spaziature come 24px), la tipografia (Inter, 18px/28px, 500 weight) e le proprietà di auto-layout dal frame specificato
  2. Mappa i token al tuo sistema — Collega i colori Figma ai token Tailwind più vicini (ad es. #6366F1 → indigo-500) e usa la tua scala di spaziatura invece di hardcodare valori in pixel
  3. Costruisce i componenti — Crea componenti React che seguono i tuoi pattern esistenti, riutilizzando componenti condivisi come <Card> e <Button> dove il design corrisponde
  4. Li controlla nel browser — Avvia il tuo dev server, naviga a localhost:3000/pricing e confronta visivamente il risultato con il design in Figma su più viewport
  5. Acquisisce screenshot e registrazioni dello schermo — Devin cattura screenshot a pagina intera ai breakpoint desktop, tablet e mobile e registra una schermata video che scorre la pagina e interagisce con gli stati hover. Li condivide direttamente nella sessione così puoi verificare visivamente il risultato — senza bisogno di fare il pull del branch ed eseguirlo in locale.
  6. Condivide le prove ovunque — Devin allega gli screenshot e le registrazioni alla PR così i revisori possono vedere il risultato visivo senza dover fare il checkout del codice. Se hai collegato Slack, Devin può anche pubblicarli in un canale così il tuo team di design può fare la review senza uscire da Slack.
  7. Apre una PR — Invia l’implementazione con le prove visive allegate insieme alle modifiche al codice
feat: Implement pricing page from Figma design

New files:
  src/app/pricing/page.tsx              (pricing page route)
  src/components/pricing/TierCard.tsx   (individual pricing card)
  src/components/pricing/CompareTable.tsx (feature comparison)

Updated:
  tailwind.config.ts                    (added 2 missing color tokens)

Verified at: 1440px, 768px, 375px viewports
4

Esamina la PR con Devin Review

Una volta che Devin apre la PR, usa Devin Review per verificare l’implementazione. Devin Review può individuare discrepanze visive, breakpoint responsivi mancanti e componenti che non rispettano il tuo design system.Se qualcosa va sistemato — la spaziatura è sbagliata, manca uno stato hover, i colori non corrispondono — lascia un commento direttamente sulla PR e Devin se ne occuperà. Non è necessario aprire una nuova sessione o scrivere un prompt separato.