Á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. Selecciona una pantalla subida y abre Enlaces. Empieza por la pantalla inicial para construir el recorrido completo. Pantalla inicial.
- Marcar áreas. Dibuja un área sobre el elemento o usa Sugerir con IA. Ajusta los límites a la zona que debe recibir el clic. Botón Editar dirección · Sin superposición accidental.
- Definir destinos. Pon una etiqueta a cada área y selecciona la siguiente pantalla o el final de la tarea. Repite en las pantallas intermedias. Editar → formulario · Guardar → confirmación.
- Recorrer la ruta. Selecciona el modo clicable en el bloque y prueba del inicio al objetivo. Corrige el aviso de objetivo inalcanzable antes de publicar. El clic abre el destino esperado.
Validar antes de recolectar
La vista previa lateral permite revisar el bloque; en Figma es estática. Para validar reglas y orden del borrador, usa Probar flujo completo, sin crear sesiones ni ocupar cuotas. Figma, grabación, voz y seguimiento de IA requieren el enlace publicado. Probar publicado abre el enlace real /r/[token]: puede generar respuestas y consumir cuota. Separa estas pruebas 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@uxtap.app.