> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devinenterprise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Da Figma a codice pixel perfect

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Da Figma a codice pixel-perfect" description="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." prompt="Implementa la pagina di pricing partendo da questo file Figma: https://figma.com/file/abc123/Pricing-Page. Concentrati sul frame 'Pricing Section' nella pagina 'Marketing'. Comprende un blocco con titolo e sottotitolo, 3 card dei piani di pricing (Free, Pro, Enterprise) con le liste delle funzionalità, una tabella di confronto sotto le card e un layout mobile in cui le card sono impilate verticalmente e la tabella diventa scrollabile. Usa la nostra configurazione di Tailwind in tailwind.config.ts per colori e spaziatura. Riutilizza i componenti Card e Button esistenti da src/components/ui/. La pagina deve essere una nuova route in src/app/pricing/page.tsx. Dopo l'implementazione, avvia il dev server e cattura screenshot a pagina intera su desktop (1440px), tablet (768px) e mobile (375px). Registra lo schermo mentre scorri la pagina e interagisci con gli stati hover. Condividi gli screenshot e la registrazione con me nella sessione. Allega tutto alla pull request (PR) così i revisori possono vedere il risultato visivo. Non aprire la pull request (PR) finché l'implementazione non corrisponde al design in Figma." category="Sviluppo di funzionalità" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>Non vuoi configurarlo manualmente? Incolla un collegamento a questa pagina in una sessione di Devin e chiedigli di impostare tutto per te.</Tip>

  <Steps>
    <Step title="Collega l’MCP di Figma">
      Prima che Devin possa leggere i tuoi design, deve poter accedere ai tuoi file Figma tramite il [Figma MCP](/it/work-with-devin/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 > Connections > server MCP**, trova **Figma** e fai clic su **Enable**
      6. Incolla il token quando richiesto

      <Tip>
        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.
      </Tip>

      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.
    </Step>

    <Step title="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.

      <PromptBlock>
        ```txt Implement pricing page from Figma theme={null}
        Implement the pricing page from this Figma file:
        https://figma.com/file/abc123/Pricing-Page

        Focus on the "Pricing Section" frame on the "Marketing" page. It has:
        - A heading + subheading block
        - 3 pricing tier cards (Free, Pro, Enterprise) with feature lists
        - A comparison table below the cards
        - Mobile layout: cards stack vertically, table becomes scrollable

        Use our Tailwind config in tailwind.config.ts for colors and spacing.
        Reuse the existing Card and Button components from src/components/ui/.
        The page should be a new route at src/app/pricing/page.tsx.

        After implementing, spin up the dev server and verify the result:
        - Take full-page screenshots at desktop (1440px), tablet (768px),
          and mobile (375px) viewports
        - Record a screen recording scrolling through the page and
          interacting with hover states
        - Share the screenshots and recording with me in the session
        - Attach them to the PR so reviewers can see the visual result
        - Do not open the PR until the implementation matches the Figma design
        ```
      </PromptBlock>

      **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](/it/product-guides/knowledge) — così non dovrai ripeterlo la volta successiva.
    </Step>

    <Step title="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
      ```
    </Step>

    <Step title="Esamina la PR con Devin Review">
      Una volta che Devin apre la PR, usa [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) 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.
    </Step>
  </Steps>
</div>