Crea wireframes directamente en el tablero usando la biblioteca de componentes de wireframes de Miro. Incluye alrededor de 60 patrones de diseño de UI que se pueden combinar fácilmente para ayudarte a crear maquetas de baja fidelidad únicas sin ningún esfuerzo.
Wireframes en la barra de herramientas
Agrega wireframes a la barra de herramientas de creación para tu comodidad.
Agregar wireframes a la barra de herramientas
Editar componentes de wireframing
Elige entre una amplia variedad de elementos para crear una página web, una pantalla de producto o un diseño de aplicación móvil con detalles:
- Tipos de dispositivo (teléfono, tableta, navegador).
- Componentes de la UI (elementos interactivos de tu wireframe).
- Chips
- Listas
- Tarjetas
- Componentes de barra de progreso
- Iconos.
Los tipos de dispositivo son marcos con las proporciones de los dispositivos más populares. Haz clic en el borde del marco para seleccionarlo y ver el menú de contexto. Aquí puedes cambiar el tipo de dispositivo, alternar entre mostrar/ocultar la interfaz del dispositivo, cambiar la orientación y rellenar con color.
Menú de tipos de dispositivo
💡 Los wireframes de tipos de dispositivos son adhesivos y actúan como páginas que agrupan objetos, como nuestros marcos habituales. Esto significa que, cuando agregas componentes e iconos al wireframe, todo el contenido dentro de él se mueve y se copia junto con el marco.
Wireframe de dispositivo adhesivo
💡Si exportas el tablero como PDF, los wireframes del dispositivo también se exportarán como páginas PDF separadas.
Los componentes de UI interactivos prediseñados te permiten crear prototipos simples de baja fidelidad de páginas de sitios web y pantallas de productos en cuestión de minutos, aunque no tengas mucha experiencia en diseño.
Agregar un componente de UI
Haz doble clic para comenzar a editar. Dependiendo del componente elegido, puedes cambiar el estilo, el estado (marcado/no marcado, seleccionado/deshabilitado, texto/marcador, etc.), cambiar el icono o agregar una fila (en botones de selección, casillas de selección).
Editar un componente
En el caso de los Chips, puedes establecer el color, el icono y el estado (habilitado, deshabilitado) y seleccionar el chip sólido o el chip de contorno.
Añadir un chip desde la biblioteca de Wireframes
Cuando usas Listas, puedes seleccionar una lista primaria o secundaria y establecer el color. Haz doble clic en la lista para establecer un icono.
Cuando usas el componente Tarjetas, puedes elegir tarjetas sin imagen, con una imagen a la izquierda o con una imagen en la parte superior, y establecer el color y el icono de una tarjeta.
Si agregas una Barra de progreso, siéntete libre de seleccionar una barra de progreso rectangular, redonda o de hito, elegir el color y el estado (Iniciar, en progreso, completa).
Aprovecha nuestra biblioteca de iconos integrada, usarla junto con los componentes de UI o sola te ahorrará tiempo y te ayudará a crear wireframes detallados.
En la pestaña Icons (Iconos) de la biblioteca de wireframes, verás los iconos más populares y las categorías de iconos (flechas, comida, social, etc.).
Editar un icono
Potentes funciones para crear wireframes simples en minutos
- Feedback de cualquier dispositivo en tiempo real
Colabora en wireframes en tiempo real y obtén feedback de tu equipo con múltiples opciones de comunicación: comentarios con @menciones, videochat integrado y más.
- Integraciones con Unsplash, IconFinder y más
Usa las integraciones de Miro con IconFinder y Unsplash para crear wireframes claros y completos.
- Marcos, líneas de conexión y enlaces
Usa marcos para mostrar varias pantallas de sitios web o productos o agrega una plantilla de wireframe prediseñada del selector. Conéctalos con líneas y usa la función Link to (Vincular a) para visualizar los flujos de usuario y moverte de una pantalla a otra.
Biblioteca antigua
Por ahora, los wireframes anteriores también se pueden encontrar en la biblioteca de wireframes: desplázate por la lista para verlos.
Wireframes anteriores en la biblioteca
⚠️ Ten presente que la versión anterior de la biblioteca de wireframes será discontinuada.
Preguntas frecuentes
- ¿Puedo ampliar el componente desplegable?
- No, en este momento, esto no es posible. - ¿Puedo agregar mis propios elementos a la biblioteca?
- Esto no es posible actualmente, pero puedes agregar iconos de los conjuntos de iconos y las formas a tu tablero.