Vai al contenuto principale
Individua le discrepanze di design prima che arrivino in produzione. Questa automazione si esegue su ogni PR con modifiche all’UI: acquisisce screenshot dei componenti aggiornati, recupera i frame Figma corrispondenti tramite Figma MCP e pubblica una revisione inline sulla PR con segnalazioni puntuali su spaziatura, colori, tipografia e variazioni di layout.

Usa questo template

Apri Figma Design Review on PR in Devin e crea l’automazione con la configurazione predefinita. Puoi personalizzarla prima di salvarla.
Cerchi una guida pratica? Consulta il tutorial passo passo per Figma Design Review on PR.

​
Cosa fa questa automazione

La revisione del design è uno degli aspetti più difficili da automatizzare nello sviluppo frontend. Figma MCP fornisce a Devin l’accesso programmatico ai design di riferimento — token, specifiche dei componenti, dimensioni dei frame — così da poter confrontare un componente renderizzato con quanto effettivamente specificato dal designer e fornire feedback precisi sugli scostamenti.

​
Come funziona

Trigger: evento GitHub — pull.request
  • Evento: github:pull_request
    • Condizioni:
      • action eq opened
      • repository.full_name eq your-org/your-repo
Cosa fa Devin: avvia una session con il context completo dell’evento, esegue il prompt seguente e, facoltativamente, ti invia una notifica in caso di errore.

​
Prerequisiti

​
Esempio di prompt

Il template include questo prompt. Puoi modificarlo dopo aver fatto clic su Use template, oppure lasciarlo così com’è.

​
Configurazione

  1. Apri Automations → Templates in Devin.
  2. Fai clic su Figma Design Review on PR. Si apre la pagina di creazione con questo template già precompilato.
  3. Collega le integrazioni richieste e installa i server MCP, se non l’hai già fatto.
  4. Sostituisci eventuali valori segnaposto nelle condizioni del trigger (ad esempio, sostituisci your-org/your-repo con la tua repo reale).
  5. Rivedi il prompt e adattalo al linguaggio, alle convenzioni e alle barriere di sicurezza del tuo team.
  6. Fai clic su Create automation.
La maggior parte dei template di automazione include limiti consigliati di ACU e invocazioni per contenere i costi nelle prime fasi del rollout. Lasciali invariati finché non sei sicuro del comportamento dell’automazione, poi aumentali in base al tuo carico di lavoro.

​
Quando usare questo template

  • Team fortemente orientati ai design system, per cui la fedeltà visiva è fondamentale
  • Codebase frontend di grandi dimensioni, con molti contributori e livelli diversi di sensibilità al design
  • Ridurre i colli di bottiglia nella revisione del design (invece di aspettare che un designer riveda ogni PR)
  • Garantire la coerenza visiva in tutto il prodotto

​
Idee di personalizzazione

  • Limitare a repo, directory o pattern di file specifici
  • Configurare le tolleranze dei design token (pixel-perfect vs. “sufficientemente vicino”)
  • Aggiungere un ID file Figma obbligatorio a ogni template di PR
  • Abbinare a una regola di lint del design system per bloccare i merge in caso di scostamenti significativi

​
Vedi anche