Figma
Conecta Figma con Autonomy y usa los frames de diseño como línea base visual para los pasos de prueba.
Conecta Figma y un paso de prueba podrá comparar el producto en vivo con el frame del que fue diseñado. Autonomy renderiza el frame en el servidor y extrae datos de diseño de él, para que la comprobación conozca la geometría, los colores y la tipografía previstos — no solo una imagen plana.
Cómo funciona el plugin de Figma. Autonomy se conecta a través de la API REST de Figma en lugar de ejecutar código dentro del editor de Figma, así que no hay nada que instalar desde la página de la comunidad de Figma. Proporcionas un token de acceso personal una vez y luego pegas las URL de los frames donde los necesites.
Conectar Figma
- En Figma, abre Account Settings → Personal Access Tokens y crea un token con acceso de lectura a archivos y nodos.
- En Autonomy, abre Settings → Integrations y busca la tarjeta de Figma.
- Haz clic en Configure API Key, pega el token y haz clic en Test connection. Autonomy lo verifica contra Figma antes de guardarlo.
- Haz clic en Save key.
El token se cifra en reposo y nunca se devuelve al navegador ni a un runner. Reemplazarlo es una escritura; no existe lectura de vuelta.
Tokens por entorno
Una clave a nivel de espacio de trabajo cubre todo por defecto. Si distintos entornos deben leer archivos de Figma diferentes — una organización de diseño separada para un build de marca blanca, por ejemplo — anula la clave por entorno en Environments → editar un entorno → Figma integration. La clave del entorno gana para las ejecuciones en ese entorno.
Adjuntar un frame a un paso
- Abre el caso de prueba y ve a la pestaña Visual References.
- Selecciona el paso al que pertenece la referencia.
- Haz clic en Add Figma frame y pega la URL del frame.
La URL debe ser un enlace completo de Figma que incluya un node-id:
https://www.figma.com/design/<fileKey>/<title>?node-id=1042-317Se aceptan tanto figma.com/design/... como la forma legacy figma.com/file/.... Abre el frame en Figma y usa Copy link — una URL de archivo sin un nodo no tiene frame que renderizar.
Qué obtiene Autonomy
Cuando se añade una referencia, un trabajo en segundo plano la resuelve:
- Un render PNG del nodo a escala 2×, almacenado como imagen de línea base.
- Datos de diseño del subárbol del nodo: ancho, alto y nombre del frame; colores de relleno en hex; estilos de texto incluyendo familia tipográfica, peso, tamaño, altura de línea y texto de muestra; radios de esquina; y padding y gaps de auto-layout.
Los datos de diseño son lo que permite que la comparación razone sobre la intención. El modelo de visión que revisa una discrepancia recibe los valores reales de color y tipografía del frame, para poder distinguir "el acento tiene el verde equivocado" de "esta captura se tomó durante una animación".
Cada referencia muestra su estado de resolución en la pestaña Visual References. Una referencia que no se pudo resolver puede reintentarse en el mismo lugar. Las referencias sin resolver se reintentan automáticamente cuando se inicia una ejecución.
Mantener las líneas base actualizadas
La referencia es una instantánea, no un enlace en vivo. Cuando el diseño cambie, resuelve la referencia de nuevo para que la línea base coincida. Trata un cambio de diseño intencional como una actualización de dos partes: publica la UI, actualiza la referencia.
Límites
- El selector de frames lista hasta 24 frames de nivel superior por archivo o nodo.
- Las imágenes de referencia subidas manualmente tienen un límite de 25 MB. Los renders de Figma no se ven afectados por este límite.
- El token necesita acceso de lectura a cada archivo que referencias. Un token limitado a un equipo no puede renderizar un frame de otro.
Solución de problemas
"No Figma API key configured"
No hay clave configurada para el espacio de trabajo ni para el entorno que usó la ejecución. Añade una en Settings → Integrations, o configura una anulación por entorno.
"Figma URL is missing a node-id parameter"
Pegaste una URL de archivo en lugar de un enlace de frame. Abre el frame en Figma, copia su enlace y pega la URL completa incluyendo la cadena de consulta.
"Figma rejected the token (403)"
El token fue revocado, expiró o no tiene acceso a ese archivo. Genera uno nuevo y vuelve a ejecutar Test connection antes de guardar.
La línea base se ve bien pero cada ejecución discrepa
Comprueba el viewport. Compara un frame de escritorio contra una captura de escritorio. Consulta Comprobaciones visuales para orientación sobre tolerancia y viewport.