Manual de Figma: del archivo a los resultados

El recorrido completo de una prueba con un prototipo de Figma, en el orden en que sucede. Las imágenes usan Aurora Pay, una app de demostración.

Para qué sirve

Disponer de pantallas con nombres y orden para los bloques visuales. Este manual reúne en una sola página todo lo que viene después: crear la tarea, revisar el camino, probar, publicar y leer los resultados.

Cuándo usarlo

Al probar un prototipo existente o imágenes sin archivo Figma. Léelo antes de la primera prueba con Figma y vuelve aquí cuando una tarea no termine donde debería.

Antes de empezar

• Permiso para el archivo de Figma o imágenes listas
• Estudio editable

Prepara el archivo en Figma

• Enlaza las pantallas. UXTap sigue las interacciones de navegación de Figma (Navigate to, Open overlay y Swap overlay) desde la pantalla de inicio. Los marcos que ningún enlace alcanza quedan fuera.
• Copia el enlace correcto. Usa el enlace de Compartir prototipo con el node-id de la pantalla de inicio. Un enlace de página, sin una pantalla elegida, se rechaza.
• Permite la visualización. Deja el archivo en «Cualquier persona con el enlace puede ver». Si Figma pide iniciar sesión o una contraseña, quien responde ve «Este prototipo es privado» y la tarea no ocurre.
• Da nombres distintos a pantallas parecidas. Cuando cada flujo tiene su copia de la misma pantalla, incluye el flujo en el nombre (por ejemplo «Enlace creado — con monto»). Los marcos con el mismo nombre y tamaño aparecen como «copia 1 de 6» y se confunden fácilmente.
• Cierra los overlays. Los teclados y otras superposiciones necesitan un enlace para cerrarse o seguir; sin él, la persona queda atrapada.
• Hasta 80 pantallas. Cada importación acepta hasta 80 pantallas; divide los flujos más grandes.

Ejemplo

Tarea: «Necesitas cobrarle $ 150 a un alumno. Crea un enlace de cobro con ese monto». Pantalla de inicio: Inicio. Meta: la pantalla «Enlace creado» del mismo flujo, y no su copia que existe en el flujo «Enlace sin monto».

Paso a paso

1. Conectar Figma. Abre el estudio, ve a la pestaña Prototipo y pulsa Conectar Figma. Autoriza la lectura de los archivos; al volver aparece «Conectado como» con tu usuario.

2. Importar el flujo. Pega el enlace en el campo Enlace del prototipo y pulsa Importar. Sigue el conteo de pantallas hasta la etiqueta Listo. Si aparece un error, el mensaje indica qué corregir: acceso al archivo, enlace de página o límite de pantallas.

3. Revisar la galería. Comprueba que la pantalla de inicio y la pantalla final estén en el conjunto. Pulsa una miniatura para ampliarla y usa el ojo para ocultar lo que no entra en la prueba; ocultar solo ordena la galería y los selectores. La etiqueta «copia i de n» marca marcos repetidos.

4. Crear el bloque. En Crear, pulsa Añadir bloque y elige Prueba de prototipo. Escribe la Instrucción de la misión, elige Figma interactivo en Visualización y selecciona el prototipo importado.

5. Definir inicio y meta. Elige la Pantalla de inicio y el Modo de meta: Llegar a una pantalla (marca las Pantallas de meta) o Seguir un camino exacto (marca el Camino esperado, en orden). La tarea termina solo en la pantalla elegida: la copia igual de otro flujo no cuenta.

6. Revisar el camino con Figma. Si un paso no tiene enlace desde el anterior, el editor avisa «Este camino no existe en el prototipo de Figma:» y muestra adónde lleva el prototipo desde ahí. Cambia el paso por la pantalla sugerida o pulsa Usar este camino, que propone el camino real por las pantallas que marcaste y también ajusta la pantalla de inicio. Nada cambia sin tu clic.

7. Usar el recorrido de una prueba. Otra forma segura de armar el camino: haz la tarea una vez con el enlace publicado, vuelve al bloque y pulsa Usar el recorrido de una prueba. Elige la prueba, pulsa la pantalla donde debe terminar la tarea y confirma.

8. Dar una salida. Deja activado Permitir desistir o completa Tiempo límite (segundos, opcional). Sin ninguno de los dos el estudio no se publica, para que nadie quede atrapado en la tarea.

9. Probar la tarea. Vista previa en otra pestaña ejecuta el prototipo de verdad, en la computadora o en el móvil, sin guardar respuestas. Al llegar a la meta aparece «Llegaste a la pantalla correcta.» con el botón Continuar. La Vista previa del estudio revisa la lógica con una respuesta simulada.

10. Publicar. Pulsa Publicar. Cada publicación crea una versión nueva, y las respuestas quedan vinculadas a la versión en que se recopilaron.
11. Traer cambios de Figma. Con Versión de Figma en Archivo actual (recomendado), lo que edites en Figma aparece para quien responde: evita tocar el archivo durante la recopilación. Para actualizar las imágenes de los resultados, pulsa Reimportar en la pestaña Prototipo, elige la importación nueva en el campo Prototipo del bloque, rehaz inicio, meta y camino, y publica de nuevo.

Cómo leer el resultado

• Pantallas disponibles en la pestaña Prototipo
• Importación seleccionable en los bloques visuales
• En Resultados, la tarjeta de la tarea tiene las pestañas Resumen, Heatmap, Caminos y Sesiones. El Resumen muestra Score UXTap, Éxito directo, Éxito indirecto, Abandono y el tiempo hasta el desenlace.
• Éxito directo es llegar a la meta por el camino esperado (o por uno alternativo); por otra ruta, es indirecto.
• Abandono incluye a quien pulsó Me rindo y a quien agotó el tiempo. Un prototipo que no abrió cuenta como incompleto y queda fuera de los promedios.

Cuidados y límites

• Usa el enlace de presentación de Figma con el flujo correcto.
• Los límites de Figma pueden impedir otra importación; puede reutilizarse una importación compatible existente.
• Pegar el mismo enlace otra vez reutiliza la copia ya importada. Para traer la versión nueva del archivo, usa Reimportar.
• Cambiar el prototipo de un bloque borra la pantalla de inicio, las metas y el camino; revisa todo antes de publicar.
• La revisión del camino depende de los enlaces leídos de Figma. Si se eliminó la conexión de la importación, reimporta para recuperar la revisión.
• El marco de móvil de la vista previa es ilustrativo; prueba también en un dispositivo real con el enlace publicado, sabiendo que esa participación es real.

Continuar en la guía interactiva

Traer pantallas de Figma o imágenes

Guías relacionadas

• Elegir navegación y objetivo de la tarea
• Conectar pantallas con áreas clicables