> ## 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.

# Do Figma para código 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="Do Figma ao Código Pixel-Perfect" description="Conecte o Figma MCP e deixe o Devin extrair tokens de design, construir componentes e verificar visualmente o resultado em relação aos seus mockups." prompt="Implemente a página de preços a partir deste arquivo Figma: https://figma.com/file/abc123/Pricing-Page. Foque no frame 'Pricing Section' na página 'Marketing'. Ele contém um bloco de título + subtítulo, 3 cards de planos de preços (Free, Pro, Enterprise) com listas de funcionalidades, uma tabela comparativa abaixo dos cards e um layout mobile onde os cards são empilhados verticalmente e a tabela passa a ter rolagem horizontal. Use nossa configuração do Tailwind em tailwind.config.ts para cores e espaçamentos. Reutilize os componentes Card e Button existentes em src/components/ui/. A página deve ser uma nova rota em src/app/pricing/page.tsx. Após implementar, inicie o servidor de desenvolvimento e tire capturas de tela da página inteira nas viewports de desktop (1440px), tablet (768px) e mobile (375px). Grave um screencast rolando pela página e interagindo com os estados de hover. Compartilhe as capturas de tela e a gravação comigo na sessão. Anexe-as ao PR para que os revisores possam ver o resultado visual. Não abra o PR até que a implementação corresponda ao design do Figma." category="Desenvolvimento de Funcionalidades" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>Não quer configurar isso manualmente? Cole um link para esta página em uma sessão do Devin e peça para ele configurar tudo para você.</Tip>

  <Steps>
    <Step title="Conecte o MCP do Figma">
      Antes de o Devin poder ler seus designs, ele precisa de acesso aos seus arquivos Figma por meio do [Figma MCP](/pt-BR/work-with-devin/mcp). Depois de conectado, o MCP fica disponível para todos na sua organização — qualquer membro da equipe pode vincular arquivos Figma em suas sessões do Devin.

      1. No Figma, clique no **ícone do seu perfil > Settings > Security**
      2. Em **Personal access tokens**, clique em **Generate new token**
      3. Conceda a ele pelo menos permissões de **read** em **File content** e **Dev resources**
      4. Copie o token
      5. No Devin, vá para **Settings > Connections > MCP servers**, encontre **Figma** e clique em **Enable**
      6. Cole seu token quando solicitado

      <Tip>
        Considere criar uma conta Figma dedicada para o Devin (por exemplo, `devin@yourcompany.com`) com permissão de visualização para seus arquivos de design. Isso evita vincular o MCP a uma conta pessoal e facilita o gerenciamento de acesso conforme sua equipe cresce.
      </Tip>

      Depois de conectado, o Devin pode ler qualquer arquivo Figma para o qual você criar um link — extraindo hierarquias de componentes, cores, espaçamentos, tipografia e restrições de layout diretamente do design.
    </Step>

    <Step title="Compartilhe um link do design e envie um prompt para o Devin">
      Cole a URL de um arquivo do Figma no seu prompt, junto com o que você quer que seja implementado. Seja específico sobre quais frames devem ser implementados e quais partes da sua codebase devem ser usadas.

      <PromptBlock>
        ```txt Implementar página de preços a partir do Figma theme={null}
        Implemente a página de preços a partir deste arquivo Figma:
        https://figma.com/file/abc123/Pricing-Page

        Foque no frame "Pricing Section" na página "Marketing". Ele tem:
        - Um bloco de título + subtítulo
        - 3 cards de níveis de preço (Free, Pro, Enterprise) com listas de recursos
        - Uma tabela de comparação abaixo dos cards
        - Layout mobile: cards empilhados verticalmente e tabela rolável

        Use nossa configuração do Tailwind em tailwind.config.ts para cores e espaçamento.
        Reutilize os componentes Card e Button existentes em src/components/ui/.
        A página deve ser uma nova rota em src/app/pricing/page.tsx.

        Depois de implementar, inicie o servidor de desenvolvimento e verifique o resultado:
        - Tire capturas de tela de página inteira em desktop (1440px), tablet (768px)
          e mobile (375px)
        - Grave um vídeo de tela rolando pela página e
          interagindo com os estados de hover
        - Compartilhe as capturas de tela e a gravação comigo na sessão
        - Anexe-os ao PR para que os revisores possam ver o resultado visual
        - Não abra o PR até que a implementação corresponda ao design do Figma
        ```
      </PromptBlock>

      **O que torna um bom prompt de Figma:**

      * Inclua o arquivo específico do Figma (não apenas o projeto)
      * Nomeie o frame ou a página exata dentro do arquivo — arquivos grandes podem ter dezenas de páginas
      * Faça referência à sua biblioteca de componentes existente e ao framework CSS
      * Mencione onde ficam os design tokens (por exemplo, `tailwind.config.ts`, `src/tokens/`)
      * Especifique o caminho de arquivo de destino para novos componentes

      Se você perceber que está repetindo o mesmo contexto em várias sessões (por exemplo, "todas as novas páginas vão em `src/app/`" ou "nós usamos primitivos do Radix UI"), dê esse feedback ao Devin e ele vai propor salvar isso como [Knowledge](/pt-BR/product-guides/knowledge) automaticamente — assim você não precisa repetir na próxima vez.
    </Step>

    <Step title="Devin extrai, constrói e verifica">
      Devin lê o arquivo Figma via MCP, mapeia as propriedades de design para a sua codebase, implementa os componentes e então abre o navegador para verificar visualmente o resultado.

      1. **Lê o arquivo Figma** — Busca a árvore de componentes, design tokens (cores como `#6366F1`, espaçamentos como `24px`), tipografia (`Inter, 18px/28px, 500 weight`) e propriedades de auto-layout do frame especificado
      2. **Mapeia tokens para o seu sistema** — Faz a correspondência entre as cores do Figma e os tokens Tailwind mais próximos (por exemplo, `#6366F1` → `indigo-500`) e usa sua escala de espaçamento em vez de fixar valores em pixels
      3. **Constrói os componentes** — Cria componentes React que seguem seus padrões existentes, reutilizando componentes compartilhados como `<Card>` e `<Button>` quando o design corresponde
      4. **Verifica no navegador** — Inicia seu servidor de desenvolvimento, navega até `localhost:3000/pricing` e compara visualmente o resultado com o design do Figma em vários viewports
      5. **Captura screenshots e gravações de tela** — Devin tira capturas de tela de página inteira em breakpoints de desktop, tablet e mobile, e grava uma captura de tela rolando pela página e interagindo com estados de hover. Ele compartilha isso diretamente na sessão para que você possa verificar o resultado visualmente — sem precisar puxar a branch e rodar localmente.
      6. **Compartilha evidências em todos os lugares** — Devin anexa as capturas de tela e as gravações ao PR para que os revisores possam ver o resultado visual sem precisar fazer checkout do código. Se você tiver o Slack conectado, Devin também pode publicá-las em um canal para que sua equipe de design revise sem sair do Slack.
      7. **Abre um PR** — Envia a implementação com evidência visual anexada juntamente com as mudanças de código

      ```
      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="Revise o PR usando o Devin Review">
      Quando o Devin abrir o PR, use o [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) para revisar a implementação. O Devin Review pode detectar divergências visuais, breakpoints responsivos ausentes e componentes que não seguem seu design system.

      Se algo precisar de ajuste — espaçamento desalinhado, estado de hover ausente, cores que não combinam — deixe um comentário diretamente no PR e o Devin cuidará disso. Não é necessário abrir uma nova sessão ou escrever um prompt separado.
    </Step>
  </Steps>
</div>