Preparar los diseños en el plugin de Figma
Pixelay sube con su plugin de Figma imágenes de los frames principales de nivel superior de la página actual de Figma y, en la aplicación web de Pixelay, las superpone a las URL de sus páginas en tu sitio web desarrollado.
Necesitas frames de Figma de nivel principal. Para comparar tus diseños, tu página de Figma debe contener al menos un «frame principal». Es decir, cualquier frame situado directamente bajo la página.
Seleccionar los frames de Figma que quieres comparar
Para empezar, selecciona los frames de tu diseño de Figma que quieres comparar con las URL de tu sitio web desarrollado.
Pixelay carga todos tus «frames principales» en el plugin como una lista de diseños que puedes comparar con tu sitio web. Haz clic en la casilla o en la miniatura de cualquier frame para seleccionarlo (si vuelves a hacer clic, se deselecciona).
Resaltar frames principales de Figma para seleccionarlos. Para que te resulte más fácil seleccionar los frames principales de Figma que quieres comparar, al hacer clic en uno o varios frames de tu página de Figma o resaltarlos, la lista de frames disponibles del plugin de Pixelay se filtra automáticamente para mostrarlos.
Actualizar los frames principales de Figma
Si el plugin de Pixelay ya está abierto y necesitas añadir o quitar frames principales en tu página actual de Figma, haz los cambios que necesites y, después, haz clic en el botón de icono Refresh frames que hay junto al recuento de frames seleccionados en el plugin de Pixelay.
Introducir la URL de tu sitio web
Para definir la URL por defecto con la que quieres comparar tus diseños, introduce una URL válida en el campo Base Website URL de la parte superior del plugin de Pixelay. Esta URL se usa como la página por defecto que se carga para compararla con los diseños seleccionados.
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.
Usa URL con https://. Pixelay solo puede cargar sitios web publicados y URL de desarrollo local a través de HTTPS.
Añadir URL de páginas concretas
Si comparas varios frames a la vez, puedes indicar una URL para cada frame. Por ejemplo, si comparas el diseño de una página «Sobre nosotros», podrías poner una URL como _https://yoursite.com/about/_. Esta URL concreta sustituye a la URL por defecto de la barra de herramientas de Pixelay.
Añadir URL de varios entornos del sitio web (opcional)
Si tienes más de un entorno del sitio web, añade una URL base adicional para cada sitio de desarrollo, staging o producción. Puedes alternar entre esos entornos desde la aplicación web de Pixelay.
Para añadir URL adicionales, haz clic en el botón de icono Show extra website URLs que hay junto a la URL base de tu sitio web. Después, añade la nueva URL en el campo Add Extra Base URL (por ejemplo, https://dev.yoursite.com o https://test.yoursite.com) y haz clic en el botón Add URL para añadirla a tu lista de URL base de entornos adicionales. Aparecerán como una lista desplegable en la aplicación web de Pixelay cuando vuelvas a subir tus diseños desde el plugin.
Para quitar una URL de entorno, selecciónala en el desplegable, haz clic en el icono Delete selected URL y, después, en Delete para confirmarlo. Vuelve a subir los diseños de Pixelay para aplicar el cambio al enlace de comparación actual.
Generar tu URL de comparación
Cuando hayas seleccionado los frames de Figma que quieres comparar y les hayas asignado las URL de tu sitio web, haz clic en el botón Compare Designs del plugin de Pixelay (indica cuántos frames se van a comparar). En el panel Compare Figma Designs, haz clic en el botón Upload Designs para confirmar y empezar la subida.
Si Compare Designs no está disponible, pasa el cursor por encima para ver por qué: primero introduce una URL base del sitio web o marca al menos un frame. En el modo gratis, solo se pueden comparar frames de hasta 430 px de ancho.
Al duplicar un archivo de Figma también se copia su URL. Para generar una URL distinta para el duplicado, introduce el código Konami (Up, Up, Down, Down, Left, Right, Left, Right, B, A) con el plugin abierto. Pixelay crea una URL nueva sin eliminar la anterior.
Si falla la subida o la actualización de los frames, Pixelay muestra un error en el plugin y detiene el indicador de progreso. Un error de subida no deshace los frames ni los ajustes que ya se han enviado a la página de comparación.
Abrir tu URL de comparación
Cuando se hayan subido todos tus frames, verás el mensaje de confirmación Designs Uploaded Successfully!, que te indica que la URL de la página de comparación ya está lista para usar.
Puedes hacer clic en el botón de icono Copy link para copiar la URL y pegarla en tu navegador (o compartirla con otra persona), o hacer clic en el enlace Comparison URL del mensaje de confirmación. Así se abre la aplicación web de Pixelay en tu navegador y puedes empezar a comparar tus diseños de Figma con las URL de desarrollo de tu sitio web.
Ten en cuenta que, para poder comparar tus diseños con URL mediante Pixelay, tienes que instalar el plugin de Chrome de Pixelay, que también está enlazado en el mensaje de confirmación del plugin.
Volver a acceder a tu URL de comparación desde el plugin
Si ya has creado tu URL de comparación con el plugin y quieres volver a copiarla (sin volver a subir tus diseños), haz clic en el botón Compare Designs del plugin de Pixelay. Se mostrará la URL de comparación que creaste antes en el panel Compare Figma Designs. Para volver a usarla, haz clic en el botón de icono Copy link para copiar la URL y pegarla en tu navegador (o compartirla con otra persona), o haz clic en el enlace comparison URL del panel.
Volver a subir tus diseños de Figma a la URL de comparación
Si has actualizado el diseño, quieres incluir o excluir otros frames de Figma, o cambiar algún enlace del sitio web o de las páginas de tu URL de comparación, puedes volver a subir los diseños seleccionados a la URL de comparación igual que los subiste la primera vez: haz clic en el botón Compare Designs del plugin de Pixelay y, esta vez, en el botón Update Designs.
Tu URL de comparación no cambia al volver a subir los diseños. Cada vez que haces clic en el botón Update Designs, se sustituyen los frames y los enlaces del sitio web que habías subido antes, y la URL de comparación de Pixelay generada anteriormente se actualiza con tus nuevos diseños y enlaces.