Áreas clicables y enlaces
Transformar imágenes estáticas en un prototipo navegable.
2 minutos de lectura
En esta página
Convertir imágenes en un recorrido navegable.
Para qué sirve
Definir qué elementos llevan a otras pantallas y comprobar que se alcanza el objetivo.
Cuándo usarlo
Para un prototipo clicable con imágenes subidas.
Antes de empezar
- Pantallas subidas y nombradas
- Destino previsto para cada botón
Ejemplo
El área Editar dirección abre el formulario; Guardar lleva a la confirmación.
Paso a paso
- Abrir Enlaces. En Prototipo, busca el conjunto de imágenes y pulsa Enlaces en la pantalla inicial. Comprueba el nombre de la pantalla en el editor: sobre esa imagen dibujarás las áreas de navegación. Pantalla inicial.
- Marcar áreas. Arrastra sobre Editar dirección para dibujar un área. Si está disponible, Detectar botones con IA propone áreas para revisar. Pulsa el área y ajusta sus límites: debe cubrir el botón sin invadir otro control. Botón Editar dirección · Sin superposición accidental.
- Definir destinos. En la lista de áreas, completa Etiqueta y Destino. Conecta Editar dirección con el formulario y Guardar con la confirmación. Repite en las pantallas intermedias y pulsa Guardar enlaces; espera la confirmación antes de cerrar. Editar → formulario · Guardar → confirmación.
- Recorrer la ruta. Pulsa Probar enlaces en el editor y recorre Editar dirección, formulario y confirmación. Cada clic debe abrir su destino. En el bloque, selecciona Imágenes con enlaces; revisa inicio y objetivo y corrige cualquier aviso de pantalla inalcanzable. El clic abre el destino esperado.
Validar antes de recolectar
En el editor, Vista previa del estudio aplica grupos, reglas y filtros del borrador sin crear sesiones ni ocupar cuotas. En tareas Figma, sitio y entrevista, muestra Respuesta simulada para probar la lógica: el autor indica el desenlace; no demuestra una interacción real.
Vista previa en otra pestaña permite revisar cada bloque en escritorio o móvil, incluida la navegación interactiva en Figma y una conversación simulada en la entrevista. Esta vista por bloque no aplica los saltos del estudio.
Para validar sitio, grabación, voz y seguimiento de IA reales, publica y, en Compartir, usa Abrir enlace en una pestaña nueva. El enlace publicado abre una participación real en /r/[token]: puede generar respuestas y consumir cuota. Separa esa participación al analizar la recolección.
Cómo leer el resultado
- Áreas con etiqueta y destino
- Una ruta verificable del inicio al objetivo
Cuidados y límites
- Revisa tamaño, etiqueta y destino de las sugerencias de IA.
- Una imagen que parece un botón no navega por sí sola.
Continuar en la guía interactiva
Conectar pantallas con áreas clicables
Guías relacionadas
¿Te faltó algo? Escribe a contato@paineltap.com.br.