Skip to main content

De Figma a código con precisión de píxel

Conecta el MCP de Figma y deja que Devin extraiga design tokens, cree componentes y verifique visualmente el resultado frente a tus maquetas.
AuthorCognition
CategoryDesarrollo de funcionalidades
FeaturesMCP
1

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. 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 > MCP Marketplace, busca Figma y haz clic en Enable
  6. Pega tu token cuando se te solicite
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.
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 archivo de diseño.
2

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.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 automáticamente, para que no tengas que repetirlo la próxima vez.
3

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
4

Revisa la pull request (PR) con Devin Review

Una vez que Devin abra el PR, usa Devin Review 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.