www.unanleon.edu.ni 2025: 46/19 ¡Siempre más allá, Seguimos Avanzando en la Revolución! Universidad Nacional Autónoma de Nicaragua, León Área de Conocimiento de Ingeniería y Tecnología Área Específica de Ingeniería de Sistemas Carrera: Ingeniería en Sistemas Componente: Maquetación de aplicaciones Título del Trabajo: Diseño de interfaz de Inicio de Sesión y Registro Elaborado por: Gilder Rafael Talavera. Docente : Manuel Martínez Fecha: 19 - 08 - 26 www.unanleon.edu.ni 2025: 46/19 ¡Siempre más allá, Seguimos Avanzando en la Revolución! Introducción Para esta práctica se diseñaron dos pantallas relacionadas entre sí: una de Inicio de Sesión y otra de Registro, ambas con un estilo visual compuesto por círculos superpuestos en tono azul. Además, se implementó un botón funcional que conecta ambas pantall as mediante el modo Prototipo de Figma. A continuación se detalla el proceso paso a paso. Paso 1: Construcción de la pantalla de Inicio de Sesión Se creó el primer marco (Desktop - 1) con dos círculos grandes superpuestos en la parte izquierda, de color azul, como elemento decorativo de fondo. Sobre estos círculos se colocó el texto de bienvenida "Bienvenidos" junto con una breve descripción invitan do al usuario a iniciar sesión o crear una cuenta. Del lado derecho se agregaron los campos "Usuario:" y "Contraseña:" como rectángulos grises redondeados, el título "Iniciar Sesión", el botón azul "Acceder" y, debajo, el botón "Crear cuenta". Paso 2: Construcción de la pantalla de Registro Se creó un segundo marco (Desktop - 2) siguiendo la misma línea visual: los círculos azules decorativos ahora ubicados del lado derecho, junto con el texto "Bienvenidos" y la invitación a crear una cuenta gratis. Del lado izquierdo se agregó el título "Reg istrarse" y los campos del formulario: "Nombre Completo", "Correo Electrónico", "Región / Ciudad" y "Número Telefónico", todos como rectángulos grises. También se incluyeron las opciones "Femenino" y "Masculino", la casilla "Acepto los términos y condicion es", el botón azul "Registrar" y el botón "Inicio de Sesión" para volver a la primera pantalla. www.unanleon.edu.ni 2025: 46/19 ¡Siempre más allá, Seguimos Avanzando en la Revolución! Paso 3: Convertir el botón "Crear cuenta" en un componente funcional Para que el botón "Crear cuenta" de la pantalla de Inicio de Sesión fuera funcional, primero se seleccionó el elemento y se convirtió en un componente de Figma (Create component), lo que permite reutilizarlo y prepararlo para interacciones. Luego, desde la pestaña "Prototipo" del panel derecho, se seleccionó el botón y se arrastró la conexión azul que aparece a su costado hacia el marco de la pantalla de Registro (Desktop - 2). En el panel de interacción se configuró el disparador "On Click" (Al hacer clic) con la acción "Navigate to" (Navegar a) apuntando al marco de Registro, y una animación de transición simple. De esta manera, al ejecutar el prototipo y hacer clic en "Crear cuenta", el usuario es dirigido automáticamente a la pantalla donde debe completa r sus datos.