Galeria de wireframes

Quem pode fazer: Todos os usuários
Quais planos: Todos os planos
Quais plataformas: Browser, Desktop, Mobile

NOTA: A Prototyping Library agora se chama a Wireframing Library. Seus screens, components e fluxos existentes funcionarão da mesma forma.

Use a Wireframing Library para criar telas e fluxos de baixa fidelidade diretamente no canvas da Miro. A biblioteca inclui screens, UI components e icons que ajudam a esboçar fluxos e estruturar ideias desde o início.

Todos os usuários podem criar wireframes estáticos. Advanced components, connector lines, e interactive preview exigem um Business plan ou uma Enterprise Accelerate license.

DICA: Precisa de um protótipo de alta fidelidade? Use o Prototypes 2.0 (HTML prototypes). Você pode converter seus wireframes em um HTML Prototype para obter visuais mais ricos, edição por IA, revisão e entrega. Veja Sobre o Prototypes 2.0 e Criar um Prototype 2.0.

Abrir a Wireframing Library

1. No canvas, a partir da barra de criação, clique no ícone Ferramentas, mídia e integrações.
2. Pesquise por Wireframing e clique em Wireframing Library.
3. O painel Wireframing Library abre.

O que há na Wireframing Library

A Wireframing Library está organizada em guias. Todos os usuários podem criar wireframes estáticos com screens, UI components e icons.

Telas

Telas são quadros prontos para criar wireframes. Adicione telas Mobile, Tablet ou Desktop ao seu canvas e arraste elementos de UI para elas.

Trabalhe com telas

• Mostrar ou ocultar a moldura da tela, para que ela apareça como a moldura de um dispositivo ou como um quadro simples.
• Girar a tela.
• Redimensionar a tela arrastando para estender sua altura (apenas vertical).

Componentes de UI

Componentes de UI são elementos comuns de interface, como botões, campos de entrada, barras de navegação e elementos de formulário.

Você pode:

• Arraste componentes para uma tela.
• Redimensione e reposicione componentes.
• Edite o texto e os estilos básicos pelo menu de contexto.

OBSERVAÇÃO: As opções do menu de contexto variam conforme o elemento selecionado.

No plano Business e com a licença Enterprise Accelerate, alguns UI components são interativos no modo Preview. Por exemplo, botões, sliders, campos de entrada e menus suspensos respondem às connector lines que você definiu.

Advanced components estão disponíveis apenas no plano Business e na licença Enterprise Accelerate.

Ícones

A guia Ícones inclui uma biblioteca de ícones pesquisável.

Adicionar ou substituir um ícone

1. Arraste um ícone da biblioteca para o canvas.
2. Selecione o ícone para alterar sua cor no menu de contexto.
3. Escolha Replace icon para substituí-lo por outro ícone sem alterar a posição ou o tamanho.

Connector lines e interactive preview

Quais planos: Business, Enterprise (com licença Accelerate)

Connector lines definem a navegação entre screens. Arraste connector lines de um elemento em uma screen até outra screen para criar fluxos de várias etapas.

Connector lines também ativam a interactive preview. No Preview mode, screens conectadas funcionam como um fluxo clicável.

DICA: Alguns elementos de UI mostram um ícone de raio quando adicionados a uma screen. Em fluxos com várias screens, arraste o ícone de raio para outra screen para criar uma connector line.

Transforme wireframes em HTML Prototypes

Quais planos: Business, Enterprise (com licença Accelerate)

Quando seu fluxo estiver pronto para revisão de alta fidelidade ou entrega, converta seus widgets, wireframes ou screens em um HTML Prototype (Prototypes 2.0). HTML Prototypes oferecem:

• Renderização mais rica (gradientes, sombras, fontes e layouts).
• Edições leves no canvas.
• Conectores interativos.
• Editar com IA.
• Visualização em tela cheia com link compartilhável.
• Exportar para HTML ou imagem.

NOTA: Se você usar Editar com IA em telas da Wireframing Library, a Miro cria um novo protótipo Prototypes 2.0. Suas telas originais não são alteradas.

Perguntas frequentes