En la versión 2.3 del UX fomo Design system te dejamos la primera versión del componente modal para usar en Figma.
Un modal es una ventana emergente utilizada en diseño UX para mostrar un mensaje al usuario por encima del contenido principal, bloqueando su interacción con el resto de elementos de interfaz.
Para continuar, el usuario tendrá que tomar acción pulsando al menos un botón o enlace dentro del modal.
Anatomía
Hagamos un repaso de las características y propiedades de la ventana emergente:
Encabezado
El título del modal debe ser claro y sencillo para explicar la acción que se va a realizar.
Campo de texto
Ofrece al usuario la información que necesita para tomar acción.
Botones Primary y Secondary
Muestran la acción principal y una secundaria. Es importante que los usuarios siempre sepan a dónde irán o qué evento sucederá antes de hacer clic en un botón. Si el botón tiene una copia genérica, como «Aceptar» o «Cancelar», incluye una etiqueta que describa el propósito del botón.
Botón de cierre
Permite cerrar el modal. Los usuarios deben poder hacer clic fuera del modal para cerrarlo automáticamente. Además, el botón de cancelar debe cerrar el modal cuando se presiona.
Contenido personalizado
El modal cuenta con propiedades booleanas para mostrar u ocultar los botones principal y secundario, y está construido para adaptarse al contenido personalizado que el product designer introduzca en su interior.
Si tu proyecto necesita otros contenidos dentro del modal, puedes deshacer la instancia del componente. En próximas versiones del sistema de diseño, crearemos nuevas variantes para incluir más elementos en su interior.
Diseño responsive
El tamaño del modal, los contenidos y los botones de acción se adoptarán a cualquier tipo de pantalla y funcionarán en diferentes dispositivos.
Por ejemplo, en móviles adapta el modal a pantalla completa para ganar más espacio.
Y en desktop oscurece o difumina o aclara el fondo detrás del modal para que el usuario pueda «enfocarlo».
Cómo usar un modal en UX
Veamos algunos ejemplos de uso:
- Confirmación de acciones: Pedir al usuario que confirme o cancele una acción determinada.
- Recolección de información: Recoger información específica del usuario sin redirigir a otra página.
- Notificaciones importantes: Notificar al usuario sobre algo importante que necesita su atención inmediata.
Si quieres usar el modal en tus diseños y proyectos de Figma aquí debajo te dejo un botón para conseguirlo junto al resto de componentes del sistema de diseño de la comunidad de UX y UI fácil.
Compartido bajo licencia Creative Commons 4.0
Por favor, deja tus comentarios con tus necesidades y requerimientos. Escucharemos tus inquietudes para reducir al mínimo la necesidad de hacer «Detach».
Si tienes alguna duda por favor deja tus comentarios.
Aprende sobre Figma, Design System y Product Design
🔥 Únete a la comunidad UX y UI fácil en Discord
🔴 Suscríbete al canal de YouTube para ver tutoriales
Suscríbete gratis para recibir nuevos recursos todas las semanas.
Información de privacidad
En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Deja una respuesta