La prueba de Fidelidad de Diseño compara tu página activa con un frame de Figma e informa dónde la implementación se desvió del diseño. Puntúa 5 categorías de forma independiente — Disposición, Colores, Tipografía, Espaciado, Componentes — y señala cada diferencia con su severidad y una recomendación de corrección específica.

Qué necesitas

El plugin de QA Proof para WP instalado y conectado (guía).
Un archivo de Figma con tu frame objetivo. La configuración de uso compartido del archivo debe permitir "Cualquier persona con el enlace puede ver", O puedes proporcionar un token de acceso personal de Figma (los planes gratuitos de Figma no admiten acceso a la API — se requiere Professional o superior para el acceso basado en token).
La URL activa de la página que implementa ese diseño.
Como alternativa, puedes subir una imagen estática en lugar de una URL de Figma — misma lógica de comparación, sin necesidad de cuenta de Figma.

Obtén tu URL de Figma

En Figma, selecciona el frame que quieres comparar, haz clic derecho → Copiar/Pegar como → Copiar enlace a la selección. La URL se ve así:

https://www.figma.com/design/<file-key>/<name>?node-id=<frame-id>

El node-id es esencial — sin él capturamos el primer frame del archivo, que normalmente no es lo que quieres.

Obtén un token de acceso personal de Figma (opcional)

Si tu archivo es privado, genera un token en Figma:

Abre Figma → haz clic en tu avatar → Configuración.
Ve a Seguridad → Tokens de acceso personal.
Genera un nuevo token y cópialo (empieza con figd_). Los tokens se muestran solo una vez.
Pégalo en el formulario de Tests del plugin de WP al ejecutar una prueba de Fidelidad de Diseño.

⚠ Límite del plan Starter de Figma: la API de Figma limita la tasa de los planes Starter a tan solo 6 solicitudes por mes. Para pruebas activas, necesitas un espacio de trabajo Figma Professional+, O usa la opción Subir Imagen en su lugar.

Ejecuta la prueba

Admin de WP → QAProof → Tests → pestaña Design Fidelity.
Elige tu fuente de diseño: Subir Imagen (recomendado para la mayoría de los usuarios) o URL de Figma.
Introduce la URL de la página activa.
Para Figma: pega la URL y (si es necesario) el token de acceso personal. Hay un botón "Guardar Diseño" que almacena en caché la imagen obtenida para que las ejecuciones futuras no vuelvan a acceder a la API de Figma.
Haz clic en Run Test. Tiempo total de 30 a 90 segundos.

Leer el resultado

La Fidelidad de Diseño puntúa 5 categorías:

Disposición — posiciones de los elementos y estructura de la cuadrícula.
Colores — fondos, bordes, color del texto.
Tipografía — familia de fuente, tamaño, peso, altura de línea.
Espaciado — valores de padding, margin, gap.
Componentes — consistencia de botones, formularios, tarjetas.

La lista de Problemas muestra cada diferencia con su severidad (alta / media / baja) y una sugerencia de corrección a nivel de CSS. La vista de la captura de pantalla superpone marcadores que muestran exactamente dónde está cada problema en la página. Debajo de la puntuación hay un botón "Descargar como PDF" — el mismo informe con marca enviado en los correos de notificación.

Fidelidad a nivel de elemento

En lugar de comparar la página completa, puedes seleccionar una región específica (por ejemplo, solo el hero) y comparar únicamente esa. En el formulario de Tests, haz clic en Inspect Mode después de introducir la URL — la página se renderiza con un selector de región. Arrastra para resaltar la región y luego ejecuta.

Consejos para buenos resultados

Haz coincidir el viewport con el diseño. Si el frame de Figma es de 1440×900, ejecuta la prueba también a 1440 (predeterminado). Para diseños mobile-first, prueba también la prueba Responsiva, que captura múltiples viewports automáticamente.
Estabiliza primero el contenido dinámico. Si la página tiene un carrusel o contadores, la captura de pantalla en vivo puede mostrar un estado diferente al del diseño. El plugin enmascara el contenido dinámico (temporizadores, elementos rotativos) de forma predeterminada.
Guarda la imagen del diseño. Después de tu primera obtención desde Figma, haz clic en Guardar Diseño en el panel de vista previa. Todas las pruebas posteriores reutilizan la imagen guardada — cero llamadas a la API de Figma.

Solución de problemas

"Figma file not found"

O el archivo es privado (necesita un token), la URL está mal formada (debe incluir node-id), o el archivo fue eliminado. Abre la URL en tu navegador para verificar el acceso.

"Figma rate limit exceeded"

Has alcanzado la cuota mensual de la API de Figma. Usa Subir Imagen en su lugar, o mejora tu plan de Figma a Professional+. El plugin almacena en caché las imágenes de Figma durante 24 horas de forma predeterminada para minimizar los accesos.