Componente Modal

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.