Saltar al contenido principal
Detecta desviaciones del diseño antes de que se publiquen. Esta automatización se ejecuta en cada PR con cambios en la UI: toma capturas de pantalla de los componentes actualizados, extrae los frames correspondientes de Figma mediante Figma MCP y publica una revisión en línea en el PR con observaciones específicas sobre diferencias de espaciado, color, tipografía y maquetación.

Usa esta plantilla

Abre Figma Design Review on PR en Devin y crea la automatización con la configuración predeterminada. Puedes personalizarla antes de guardarla.
¿Buscas una guía práctica? Consulta el tutorial paso a paso de Figma Design Review on PR.

​
Qué hace esta automatización

La revisión de diseño es una de las partes más difíciles de automatizar en la ingeniería frontend. Figma MCP le da a Devin acceso programático a los diseños de referencia —tokens, especificaciones de componentes y dimensiones de los frames— para que pueda comparar un componente renderizado con lo que el diseñador realmente especificó y ofrecer comentarios precisos sobre cualquier discrepancia.

​
Cómo funciona

Activador: evento de GitHub — pull.request
  • Evento: github:pull_request
    • Condiciones:
      • action eq opened
      • repository.full_name eq your-org/your-repo
Qué hace Devin: Inicia una sesión con todo el contexto del evento, ejecuta el prompt de abajo y, opcionalmente, te notifica si falla.

​
Requisitos previos

  • Integraciones:
  • Servidores MCP:

​
Ejemplo de prompt

La plantilla incluye este prompt. Puedes editarlo después de hacer clic en Use template o dejarlo tal cual.

​
Configuración

  1. Abre Automations → Templates en Devin.
  2. Haz clic en Figma Design Review on PR. Se abrirá la página de creación con esta plantilla ya rellenada.
  3. Conecta las integraciones requeridas e instala servidores MCP si aún no lo has hecho.
  4. Sustituye los valores de ejemplo en las condiciones de activación (por ejemplo, cambia your-org/your-repo por tu repositorio real).
  5. Revisa el prompt y ajústalo al lenguaje, las convenciones y las restricciones de tu equipo.
  6. Haz clic en Create automation.
La mayoría de las plantillas de automatización incluyen límites sugeridos de ACU y de invocaciones para acotar el costo durante la fase inicial del despliegue. Déjalos tal como están hasta que tengas confianza en el comportamiento de la automatización y, después, auméntalos según tu carga de trabajo.

​
Cuándo usar esta plantilla

  • Equipos muy centrados en sistemas de diseño, donde la fidelidad visual importa
  • Grandes bases de código de frontend con muchos colaboradores y distintos niveles de criterio de diseño
  • Reducir los cuellos de botella en la revisión de diseño (en lugar de esperar a que un diseñador revise cada PR)
  • Garantizar la coherencia visual en todo el producto

​
Ideas de personalización

  • Limítalo a repositorios, directorios o patrones de archivos específicos
  • Configura las tolerancias de los tokens de diseño (perfecto al píxel vs. “lo suficientemente aproximado”)
  • Agrega un ID de archivo de Figma obligatorio a cada plantilla de pull request (PR)
  • Combínalo con una regla de linting del sistema de diseño para bloquear las fusiones cuando haya desviaciones importantes

​
Ver también