Cuando hayas generado tu URL en el plugin de Figma de Pixelay, puedes abrirla en el navegador para empezar a usar la aplicación web de Pixelay. La aplicación web es la que te permite comparar los diseños que subiste con el plugin de Figma con las URL de la versión en desarrollo de tu sitio web.
La aplicación web carga cada URL que quieres comparar en un iFrame y superpone tus diseños de Figma encima. El tamaño de cada imagen subida define el ancho y el alto de cada iFrame, así puedes comprobar el comportamiento responsive de tu sitio web frente a los diseños previstos en Figma.
Instala la extensión de Chrome de Pixelay. Para comparar tus diseños con URL mediante Pixelay, instala el plugin de Chrome de Pixelay. Se ejecuta en segundo plano y carga Pixelay cuando detecta en el navegador una URL generada por el plugin.
Desplazarte por la página para ver todos tus frames
Puedes recorrer toda la página desplazándote en vertical y en horizontal (con la rueda del ratón o haciendo clic y arrastrando las barras de desplazamiento). Si te desplazas a la izquierda y a la derecha, ves todos los frames que subiste; si te desplazas arriba y abajo, ves todo el contenido de cada uno de esos frames.
Si tu proyecto de Pixelay tiene más de 20 frames de Figma, la extensión de Chrome pasa automáticamente a mostrar un solo frame cada vez para comparar, y así evita que la página se ralentice al cargar todas las URL a la vez. Puedes cambiar de uno a otro eligiendo cualquiera de tus frames de Figma en el panel de controles de la esquina inferior derecha de la pantalla.
Alternar entre el diseño de Figma y el sitio web desarrollado
Para alternar rápidamente entre el diseño original de Figma y tu sitio web desarrollado, haz clic en los botones de icono Original Figma Design y Live Website Build del panel de control de Pixelay.
Cada uno activa el modo seleccionado y te permite ver cada modo por separado, sin el otro.
Interactuar con las vistas previas del sitio web real. Si cambias el modo de superposición a Live Website Build, puedes interactuar con la página. Es útil si necesitas usar campos de formulario o hacer clic en algo para que tu sitio web real se parezca más visualmente a los diseños originales de Figma que estás comparando.
Usar el modo de superposición transparente
Para comparar tus diseños de Figma y tu sitio web con distintos niveles de opacidad, haz clic en el botón de icono Transparent Overlay para activar este modo de comparación. Así se activa el modo de superposición transparente.
Si haces clic (o mantienes pulsado) y arrastras el control deslizante Overlay Opacity, defines el grado de transparencia entre el diseño original y la URL real.
Usar el modo de superposición en pantalla dividida
Para comparar tus diseños de Figma y tu sitio web con la pantalla dividida, haz clic en el botón de icono Split Screen Overlay para activar este modo de comparación. Así se activa el modo de superposición en pantalla dividida.
Si haces clic (o mantienes pulsado) y arrastras la Split Line azul que aparece en medio de cada diseño, defines qué parte del diseño original y qué parte de la URL real se muestran a la vez.
Usar el modo de superposición de diferencias
Para comparar tus diseños de Figma y tu sitio web con un modo de fusión de diferencias, haz clic en el botón de icono Blend-Diff Overlay para activar este modo de comparación. Así se activa el modo de superposición de diferencias.
Si haces clic (o mantienes pulsado) y arrastras el control deslizante Overlay Opacity, defines el grado de transparencia entre el diseño original y la URL real.
Usar el modo de superposición arrastrable
Para ajustar a mano la posición de la superposición en todos tus diseños, haz clic en el botón de icono Draggable Overlay para activar este modo de comparación. Así se activa el modo de superposición arrastrable.
Si haces clic (o mantienes pulsado) y arrastras el control deslizante Overlay Opacity, defines el grado de transparencia entre el diseño original y la URL real.
Usar la regla para medir píxeles
Para medir la distancia entre cualquier par de elementos de tu página con una regla de píxeles, haz clic en el botón de icono Measure Pixels para activar este modo de medición. Así se activa el modo de medición de píxeles.
Mientras este modo está activo, puedes medir la distancia en píxeles de la página haciendo clic (o manteniendo pulsado) y arrastrando el cursor del ratón entre dos puntos cualesquiera de la página.
Si haces clic (o mantienes pulsado) y arrastras el control deslizante Overlay Opacity, defines el grado de transparencia entre el diseño original y la URL real.
Alternar entre las URL de los entornos
Si añadiste URL de entornos adicionales en el plugin de Figma de Pixelay antes de subir los diseños que quieres comparar, puedes alternar entre ellas desde el desplegable Change Environment Base URL del panel de controles de la aplicación web de Pixelay.
Así se cambia automáticamente la URL base de todos los frames de tus vistas previas de Pixelay. Por ejemplo, si seleccionas https://dev.yoursite.com, todas las URL https://www.yoursite.com pasan a tener la URL base dev.yoursite.com, incluidas las URL de páginas concretas (por ejemplo, un frame de Figma con la URL de página https://www.yoursite.com/about cargaría https://dev.yoursite.com/about).
Usar Pixelay con un entorno de desarrollo con recarga en caliente
Si tus URL de desarrollo local usan una implementación de Hot Module Replacement (HMR), los frames de la aplicación web de Pixelay se actualizan automáticamente en tiempo real (porque apuntan a tus URL de desarrollo dentro de iFrames), sin tener que recargar la URL de la aplicación web de Pixelay.
Cualquier cambio que hagas en local en tu editor de código se refleja en la aplicación web de Pixelay cuando guardas esos archivos y HMR inyecta los cambios en tus URL.