Importe un diseño desde Figma
Convierta un diseño de Figma en imágenes de referencia y comprobaciones ya preparadas, y sincronícelas cuando el diseño cambie.
Lo que le aporta la importación
Un diseño hecho en Figma ya dice lo que debe mostrar cada pantalla.Importar desde Figma convierte ese diseño en una prueba: cada pantalla se convierte en una imagen de referencia en la línea de tiempo, con comprobaciones ya preparadas para lo que muestra.
No hay ninguna cuenta que conectar ni ninguna clave que crear.Un pequeño plugin dentro de Figma guarda su diseño en un solo archivo, y GUI Test Studio recoge ese archivo.
La idea en cuatro pasos
Elegir
Marque las pantallas en Figma, o elija un flujo de prototipo
Exportar
El plugin guarda un solo archivo de diseño
Importar
GUI Test Studio encuentra el archivo por sí solo
Revisar
Conserve las comprobaciones que quiera y luego importe
Añadir el plugin a Figma, una sola vez
- 1
Abrir Importar desde Figma
En GUI Test Studio, elija Archivo, Importar desde Figma... (Ctrl+Mayús+D), o haga clic en su botón de la barra de herramientas.
La ventana espera su diseño y dice qué hacer en Figma. - 2
Hacer clic en Obtener el plugin
Obtener el plugin... abre la carpeta que contiene el plugin.Se instala con GUI Test Studio.
- 3
Añadirlo en la aplicación de escritorio de Figma
En Figma, abra Plugins, Development, Import plugin from manifest... y elija el archivo manifest.json de esa carpeta.El plugin ya está en su lista de Plugins, para cada diseño que abra.
Exportar su diseño
- 1
Iniciar el plugin
Abra su diseño en Figma, pulse Ctrl+K e inicie GUI Test Studio desde la pestaña Plugins.
- 2
Elegir qué exportar
Marque las pantallas que quiera.Si su diseño tiene un flujo de prototipo, elija el flujo en su lugar: sus pantallas llegan en orden, con los clics que llevan de una a la siguiente.
- 3
Hacer clic en Exportar y dejar el archivo en Descargas
El plugin guarda un solo archivo de diseño.Déjelo en su carpeta Descargas: GUI Test Studio vigila esa carpeta y abre el diseño en uno o dos segundos.
Revisar lo que se comprobará
Antes de añadir nada a su prueba, la ventana muestra cada pantalla con un recuadro alrededor de cada elemento que encontró, y dice qué comprobación recibe cada uno.
| Lo que contiene el diseño | La comprobación que recibe |
|---|---|
| Una etiqueta, un título, las palabras de un botón | Una aserción de texto: las palabras deben estar en pantalla. |
| Un valor que cambia, como una fecha o un importe | Una aserción de texto dinámico: debe haber una fecha, sea cual sea el día. |
| Un icono, un logotipo, una imagen | Una aserción visual: el elemento debe tener el aspecto del diseño. |
| Un párrafo largo o una fotografía grande | En la lista pero sin marcar: suele ser contenido de ejemplo. |
Las comprobaciones de una parte de la pantalla, como su cabecera o su formulario, viajan juntas en una sola aserción de grupo.Con Comprobar la disposición marcada, el grupo comprueba además que sus elementos están donde los pone el diseño.
| Opción | Qué hace |
|---|---|
| Construir | Las pantallas una tras otra, o un flujo de prototipo con sus clics. |
| Crear | Imágenes y aserciones, o solo imágenes cuando prefiere añadir usted las comprobaciones. |
| Dónde se coloca | En el cabezal de reproducción, o al final de la prueba. |
| Comprobar como imagen / Comprobar como texto | Cambia el elemento seleccionado de un tipo de comprobación al otro. |
| Enlace del diseño | Opcional: pegue la dirección del diseño para abrirlo más tarde en Figma desde la prueba. |
Lo que llega a la línea de tiempo
Haga clic en Importar.Todo llega como un solo escenario con el nombre de su diseño, de modo que puede moverlo, copiarlo o eliminarlo entero.
| En la línea de tiempo | Qué es |
|---|---|
| Referencia visual | Una imagen por pantalla, de cinco segundos cada una.También aparecen en Diseños, dentro de Archivos de contenido. |
| Aserciones | Las comprobaciones de cada pantalla, poco después de que empiece su imagen. |
| Eventos de ratón | En un flujo de prototipo, el clic que lleva a la pantalla siguiente, dirigido al botón del que parte el enlace en el diseño. |
Un solo paso de deshacer retira toda la importación.
El diseñador exporta el flujo «Sign in»: Login, Dashboard, Settings.Usted lo importa y obtiene tres imágenes, el clic en Sign in, el clic en el engranaje de ajustes y las comprobaciones de cada pantalla.El día en que la aplicación exista, la prueba recorre con sus clics la aplicación real e informa, elemento por elemento, de si coincide con el diseño.
Cuando el diseño cambia
Los diseños evolucionan.Cuando el suyo cambie, expórtelo de nuevo desde Figma y luego elija Archivo, Sincronizar desde Figma... en GUI Test Studio, o haga clic con el botón derecho en la imagen del diseño.
| Lo que cambió en el diseño | Lo que hace una sincronización |
|---|---|
| Un texto dice otra cosa | La comprobación espera las palabras nuevas. |
| Un elemento tiene otro aspecto | La comprobación toma la imagen nueva. |
| Un elemento se movió o cambió de tamaño | La comprobación lo sigue, y también un clic dirigido a él. |
| Un elemento ya no está | Su comprobación se elimina. |
| Un elemento es nuevo | Sin marcar: nada nuevo se comprueba a menos que usted lo pida. |
Una comprobación que usted mismo editó tampoco está marcada, de modo que una sincronización nunca sobrescribe su trabajo sin preguntar.La imagen de la pantalla siempre toma su versión más reciente, y un solo paso de deshacer lo devuelve todo a como estaba.
Conviene saber
| Pregunta | Respuesta |
|---|---|
| ¿GUI Test Studio se conecta a mi cuenta de Figma? | No.El plugin guarda un archivo en su equipo y la aplicación lee ese archivo.No se envía nada a ninguna parte. |
| ¿Dónde estará el elemento en la pantalla real? | En cualquier lugar.Un diseño no dice dónde estará la ventana de la aplicación, así que estas comprobaciones buscan en toda la pantalla. |
| Las fuentes de la aplicación no son exactamente las del diseño.¿Fallarán las comprobaciones? | Por ese motivo, las comprobaciones de diseño comparan con una exigencia flexible.Tras la primera ejecución real, puede aceptar una vez el aspecto real desde el Informe de confianza. |
| ¿Puedo importar un solo elemento, como un botón nuevo? | Sí.Importado donde ya se muestra una grabación, el diseño se coloca encima de ella, y usted puede moverlo adonde estará el elemento. |
Para preparar una prueba a partir de simples imágenes de cualquier herramienta de diseño, consulte Pruebe una función antes de que exista.Para aceptar el aspecto real tras la primera ejecución, consulte Cuando la aplicación cambia a propósito.
Diseño en Figma
Prueba lista
Antes de que la función esté desarrollada
Sincronizar
Cada vez que el diseño cambia
¿Sigue con problemas?Díganos qué intentaba hacer, y respondemos en un día laborable.Ask our team