Quién puede hacerlo: Todos los usuarios
Qué planes: Todos los planes
Qué plataformas: Navegador, escritorio y móvil
Usa la Biblioteca de prototipos para crear diseños de prototipos directamente en el lienzo de Miro. La biblioteca incluye pantallas, componentes de interfaz de usuario y iconos que te ayudan a visualizar flujos y estructurar ideas desde el inicio.
Puedes usar la Biblioteca de prototipos para crear prototipos estáticos. Funciones como componentes avanzados, líneas conectoras y vista previa interactiva requieren un plan Business o el complemento Miro Prototypes para los planes Enterprise.
La biblioteca de prototipos incluye todo lo que necesitas para crear manualmente flujos de una o varias pantallas en Miro
Abrir la biblioteca de prototipos
- En el lienzo, desde la barra de creación selecciona Herramientas, medios e integraciones (
).
- Busca y encuentra Prototyping, luego selecciona Biblioteca de prototipos.
- Se abre el panel de la Biblioteca de prototipos .
Qué hay en la Biblioteca de prototipos
La Biblioteca de prototipos está organizada en pestañas. Todos los usuarios pueden usar la biblioteca para armar diseños de prototipos estáticos usando pantallas, componentes de interfaz de usuario e íconos.
💡 Para prototipos generados por IA y flujos interactivos, usa la Biblioteca de prototipos junto con Miro Prototypes.
Pantallas
Pantallas son marcos predefinidos para prototipar flujos. Puedes agregar pantallas Móvil, Tableta o Escritorio a tu lienzo y crear diseños arrastrando elementos de la interfaz sobre ellas.
Trabajar con pantallas
- Mostrar u ocultar el marco de la pantalla (para que parezca el marco de un dispositivo o un marco simple)
- Girar una pantalla
- Cambiar el tamaño de una pantalla arrastrando para aumentar su altura (solo vertical)
Componentes de la interfaz
Los componentes de la interfaz son elementos comunes que puedes arrastrar a las pantallas, como botones, campos de entrada, barras de navegación y elementos de formulario.
Puedes:
- Arrastrar componentes a una pantalla
- Cambiar el tamaño y reposicionar componentes
- Editar texto y el estilo básico desde el menú contextual
✏️ Las opciones del menú contextual varían según el elemento que selecciones.
Con Miro Prototypes, algunos componentes de la interfaz se vuelven interactivos en el modo de vista previa. Por ejemplo, los botones, deslizadores, campos de entrada y menús desplegables responden a las acciones del usuario según las líneas de conexión que hayas definido.
Algunos conjuntos de componentes, como los Componentes avanzados, están disponibles solo con Miro Prototypes. Si no tienes acceso, estos componentes pueden aparecer en la biblioteca con un indicador.
Iconos
La pestaña Iconos incluye una biblioteca de iconos con función de búsqueda que puedes usar en prototipos.
Agregar o reemplazar un icono
- Arrastra un icono desde la biblioteca al lienzo.
- Selecciona el icono para actualizar su color desde el menú contextual.
- Selecciona Reemplazar icono para intercambiarlo por otro icono sin cambiar su posición ni su tamaño.
Wireframes (legado)
La pestaña Wireframes contiene elementos de wireframes (legado). Estos elementos siguen disponibles y son editables en los tableros existentes, pero los prototipos nuevos deberían usar pantallas y componentes de interfaz de usuario de la Biblioteca de prototipos.
Líneas de conexión e interactividad (Miro Prototypes)
Líneas de conexión te permiten definir la navegación entre pantallas en un prototipo. Con Miro Prototypes, puedes crear líneas de conexión entre elementos y pantallas para construir flujos de varios pasos.
Las líneas de conexión también habilitan la vista previa interactiva. En el modo de vista previa, las pantallas conectadas se comportan como un flujo cliqueable y se desplazan verticalmente si se extienden más allá del área visible. Sin Miro Prototypes, las líneas de conexión y el comportamiento interactivo no están disponibles.
💡 Algunos elementos de la interfaz muestran un icono de rayo cuando se agregan a una pantalla. En flujos de varias pantallas, arrastra el icono de rayo para crear una línea de conexión entre pantallas.