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

# De Figma a código perfecto al píxel

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="De Figma a código con precisión de píxel" description="Conecta el MCP de Figma y deja que Devin extraiga design tokens, cree componentes y verifique visualmente el resultado frente a tus maquetas." prompt="Implementa la página de precios a partir de este archivo de Figma: https://figma.com/file/abc123/Pricing-Page. Concéntrate en el frame &#x22;Pricing Section&#x22; de la página &#x22;Marketing&#x22;. Tiene un bloque de encabezado + subencabezado, 3 tarjetas de plan de precios (Free, Pro, Enterprise) con listas de características, una tabla comparativa debajo de las tarjetas y un diseño para móvil donde las tarjetas se apilan verticalmente y la tabla se vuelve desplazable. Usa nuestra configuración de Tailwind en tailwind.config.ts para colores y espaciado. Reutiliza los componentes Card y Button existentes de src/components/ui/. La página debe ser una nueva ruta en src/app/pricing/page.tsx. Después de implementarla, inicia el servidor de desarrollo y toma capturas de pantalla de página completa en los viewports de escritorio (1440px), tablet (768px) y móvil (375px). Graba la pantalla desplazándote por la página e interactuando con los estados hover. Comparte las capturas de pantalla y la grabación conmigo en la sesión. Adjunta todo al pull request (PR) para que los revisores puedan ver el resultado visual. No abras el PR hasta que la implementación coincida con el diseño de Figma." category="Desarrollo de funcionalidades" features="MCP" />

<div className="uc-detail-wrapper">
  <Tip>¿Prefieres no configurarlo manualmente? Pega un enlace a esta página en una sesión de Devin y pídele que lo configure todo por ti.</Tip>

  <Steps>
    <Step title="Conectar el MCP de Figma">
      Antes de que Devin pueda leer tus diseños, necesita tener acceso a tus archivos de Figma a través del [Figma MCP](/es/work-with-devin/mcp). Una vez conectado, el MCP está disponible para todos en tu organización: cualquier miembro del equipo puede vincular archivos de Figma en sus sesiones de Devin.

      1. En Figma, haz clic en tu **icono de perfil > Settings > Security**
      2. En **Personal access tokens**, haz clic en **Generate new token**
      3. Concédele al menos permisos de **read** en **File content** y **Dev resources**
      4. Copia el token
      5. En Devin, ve a **Settings > Connections > MCP servers**, busca **Figma** y haz clic en **Enable**
      6. Pega tu token cuando se te solicite

      <Tip>
        Considera crear una cuenta de Figma dedicada para Devin (por ejemplo, `devin@yourcompany.com`) con acceso de visualización a tus archivos de diseño. Esto evita vincular el MCP a una cuenta personal y facilita la gestión del acceso a medida que tu equipo crece.
      </Tip>

      Una vez conectado, Devin puede leer cualquier archivo de Figma que vincules, extrayendo jerarquías de componentes, colores, espaciado, tipografía y restricciones de diseño directamente desde el diseño.
    </Step>

    <Step title="Comparte un enlace al diseño e indica a Devin qué hacer">
      Pega una URL de archivo de Figma en tu prompt junto con lo que quieres que se implemente. Sé específico sobre qué frames quieres que se construyan y qué partes de tu base de código se deben usar.

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

      **Qué hace que un prompt de Figma sea bueno:**

      * Incluye el archivo específico de Figma (no solo el proyecto)
      * Nombra el frame o la página exactos dentro del archivo; los archivos grandes pueden tener docenas de páginas
      * Hace referencia a tu biblioteca de componentes existente y a tu framework de CSS
      * Menciona dónde se encuentran los design tokens (p. ej., `tailwind.config.ts`, `src/tokens/`)
      * Especifica la ruta de archivo de destino para los nuevos componentes

      Si te encuentras repitiendo el mismo contexto en varias sesiones (p. ej., “todas las páginas nuevas van en `src/app/`” o “usamos primitivas de Radix UI”), dale ese comentario a Devin y propondrá guardarlo como [Knowledge](/es/product-guides/knowledge) automáticamente, para que no tengas que repetirlo la próxima vez.
    </Step>

    <Step title="Devin extrae, compila y verifica">
      Devin lee el archivo de Figma a través del MCP, asigna las propiedades de diseño a tu base de código, implementa los componentes y luego abre el navegador para comprobar visualmente el resultado.

      1. **Lee el archivo de Figma** — Extrae el árbol de componentes, design tokens (colores como `#6366F1`, espaciados como `24px`), tipografía (`Inter, 18px/28px, 500 weight`) y propiedades de auto-layout del frame especificado.
      2. **Mapea los tokens a tu sistema** — Hace corresponder los colores de Figma con los tokens de Tailwind más cercanos (por ejemplo, `#6366F1` → `indigo-500`) y usa tu escala de espaciado en lugar de usar valores de píxel codificados a mano.
      3. **Construye los componentes** — Crea componentes de React que siguen tus patrones existentes, reutilizando componentes compartidos como `<Card>` y `<Button>` donde el diseño coincide.
      4. **Lo comprueba en el navegador** — Inicia tu servidor de desarrollo, navega a `localhost:3000/pricing` y compara visualmente el resultado con el diseño de Figma en múltiples viewports.
      5. **Captura pantallas y grabaciones de pantalla** — Devin toma capturas de pantalla de página completa en los breakpoints de escritorio, tableta y móvil, y graba una sesión de pantalla desplazándose por la página e interactuando con estados hover. Las comparte directamente en la sesión para que puedas verificar el resultado visualmente; no hace falta hacer checkout de la rama ni ejecutarla tú mismo.
      6. **Comparte la prueba en todas partes** — Devin adjunta las capturas de pantalla y las grabaciones al pull request (PR) para que los revisores puedan ver el resultado visual sin extraer el código. Si tienes Slack conectado, Devin también puede publicarlas en un canal para que tu equipo de diseño pueda revisarlas sin salir de Slack.
      7. **Abre un PR** — Envía la implementación con prueba visual adjunta junto con los cambios 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="Revisa la pull request (PR) con Devin Review">
      Una vez que Devin abra el PR, usa [Devin Review](https://app.devin.ai/review?utm_source=docs\&utm_medium=use-case-gallery) para revisar la implementación. Devin Review puede detectar desajustes visuales, breakpoints responsivos faltantes y componentes que no siguen tu sistema de diseño.

      Si algo necesita ajustarse — el espaciado no es el correcto, falta un estado hover, los colores no coinciden — deja un comentario directamente en el PR y Devin se encargará de resolverlo. No es necesario abrir una nueva sesión ni escribir un prompt aparte.
    </Step>
  </Steps>
</div>