Skip to main content
¿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.
1

Conectar el MCP de Figma

Antes de que Devin pueda leer tus diseños, conecta el Figma MCP con una cuenta que tenga acceso a los archivos que quieres usar.
  1. En Devin, abre Customize > MCPs, elige Browse marketplace y busca Figma.
  2. Sigue las indicaciones de instalación y luego abre su configuración de conexión en Customize > MCPs.
  3. Elige el acceso Personal para cuentas individuales, o el acceso Organization para compartir una sola conexión con tu organización.
  4. Elige Connect y autoriza el acceso mediante el OAuth flow de Figma.
Para el acceso Organization, usa una cuenta de Figma dedicada con acceso a los archivos de diseño del equipo. Con el acceso Personal, cada miembro conecta su propia cuenta.
Una vez conectado, Devin puede leer los archivos de Figma vinculados a los que la cuenta conectada tenga acceso, extrayendo jerarquías de componentes, colores, espaciado, tipografía y restricciones de diseño directamente desde el 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
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.