Miro Prototypes

Quem pode fazer: Todos os membros com complemento Miro Prototypes
Quais planos: Starter, Business, Enterprise
Quais plataformas: Navegador, Desktop

O Miro Prototypes permite que você crie interfaces de usuário diretamente no canvas do Miro.

Este artigo explica como usar as funcionalidades de Miro Prototyping. Para informações gerais sobre o Miro Prototypes, consulte visão geral do Miro Prototypes. 

Você pode usar prompts para o Prototypes gerar fluxos de uma ou várias telas, refinar seus designs e aplicar estilos, além de pré-visualizar uma simulação interativa do seu protótipo.

✏️ A experiência Prototypes foi movida para o Assistente de IA. Agora em beta público, alguns usuários já têm a entrada atualizada do Assistente de IA para protótipos gerados por IA. Se você perceber que sua experiência não corresponde à documentação, consulte Criar um protótipo com o Assistente de IA (Beta). O conteúdo que explica como refinar e iterar seu resultado ainda é aplicável.

Construa seu design em diversos prompts específicos que geram cada elemento de seu protótipo. Você também pode refinar seus prompts para evitar começar de novo.

Mais informações: Veja perguntas frequentes.

Criar um protótipo com Miro AI

Esta seção descreve como começar a prototipar com o Miro AI. Para saber como começar manualmente, consulte a biblioteca de protótipos.

Começar do zero

1. No canvas do Miro, acima da barra de criação, clique em Sidekicks.
   O painel Sidekick abre-se.
2. Clique em Biblioteca de Assistente de IA.
   Acesse o Prototipo na Biblioteca de Assistente de IA 
3. Clique em Formatos > Prototipo.
4. Especifique se deseja começar com um prompt de texto ou uma captura de tela.
5. Especifique o tipo de dispositivo.
6. Especifique um protótipo de tela única ou multi-telas.
7. Siga as instruções na tela para escrever seu prompt ou carregar uma captura de tela. Na caixa de resposta, você pode usar opcionalmente as tags de sugestão para começar seu prompt.
8. Conclua seu prompt e clique na seta Enviar, ou pressione ENTER no seu teclado.
   Miro AI gera um protótipo de rascunho na canvas.
9. (Opcional) Para interromper a geração, no seu protótipo clique em Parar.
10. (Opcional) Para iterar em seu protótipo, continue a usar o prompt no painel de Protótipo.
    Cada iteração cria uma versão do seu protótipo de rascunho.
11. No seu protótipo de rascunho, escolha uma das seguintes opções:
    • Aplicar ao canvas
      O seu protótipo agora é editável no canvas.
    • Descartar tudo
      O seu rascunho é removido do canvas. Você pode refinar o seu prompt e repetir os passos 7–9.

Crie um protótipo com Assistente de IA (Beta)

Alguns usuários já podem ter a entrada atualizada do Assistente de IA para prototipagem. Esta seção descreve como começar a prototipar com o Assistente de IA. Para aprender a começar manualmente, veja a biblioteca de prototipagem.

✏️ A atualização do Assistente de IA para Protótipos está atualmente em beta público. Se sua experiência não corresponder à documentação nesta seção, consulte Criar um protótipo com Miro AI.

Siga estas etapas:

1. Em um canvas do Miro, acima da barra de Criação, clique em Assistente de IA.
   O painel do Assistente de IA será aberto.

2. No campo de prompt, clique em Criar protótipo.
   O Assistente de IA está pronto para ajudá-lo a criar seu protótipo.
   Comece seu protótipo no painel do Assistente de IA.

   💡 Alternativamente, você pode abrir o painel Assistente de IA e começar a dar prompts imediatamente. Certifique-se de declarar explicitamente que deseja criar um protótipo, por exemplo, "Criar um protótipo para um fluxo de checkout".

   💡 Você também pode acessar o Formato de Protótipo em Ferramentas, Mídia e Integrações (+) na barra de criação.

3. Escreva seu prompt para descrever o protótipo que você deseja que o Assistente de IA gere. 
4. Clique na seta para cima ou pressione ENTER no teclado.
5. (Opcional) Para interromper a geração, no seu protótipo, clique em Parar.
6. (Opcional) Para iterar seu protótipo, continue a usar prompts no painel de Protótipos.
   Cada iteração cria uma versão do seu protótipo de rascunho.
7. No seu protótipo de rascunho, escolha uma das seguintes opções:
   • Aplicar ao canvas
     Seu protótipo agora é editável no canvas.
   • Descartar tudo
     Seu rascunho será removido do canvas. Você pode refinar seu prompt e repetir os passos 3–6.

💡 Comece pequeno e seja específico. Menos telas geradas de uma vez produzem resultados mais precisos em menos tempo. Especifique explicitamente os elementos-chave que deseja para cada tela, como botões, seções ou ações.

💡 Aplique vários rascunhos de protótipos ao canvas. Você pode comparar e explorar decisões de design e continuar refinando a melhor opção.

💡 Um protótipo pode levar de 1 a 3 minutos para ser gerado, dependendo da complexidade do prompt e do tamanho do conteúdo. Se o seu protótipo demorar mais para ser gerado, simplifique seu prompt ou reduza o número de telas.

Usar o canvas como prompt

Selecione o conteúdo no canvas para usar em seu prompt. Por exemplo, você tem um briefing de design em um Documento ou em notas adesivas. Os protótipos podem usar o conteúdo como contexto para criar seu protótipo. 

Siga estas etapas:

1. Selecione o conteúdo do canvas. Por exemplo, um Doc ou notas adesivas. Você pode, opcionalmente, selecionar múltiplos objetos.
2. No canvas da Miro, acima da barra de criação, clique em Sidekicks.
   O painel Sidekick será aberto.
   NOTA: Se você tiver a versão atualizada...
3. Clique em Assistente de IA
   Acesse o Protoype na Assistente de IA 
4. Clique em Formatos > Protótipo.
5. Selecione Um prompt de texto.
6. Especifique o tipo de dispositivo, depois especifique tela única ou múltiplas telas.
   A caixa de resposta mostra o número de objetos que você selecionou na etapa 1.
7. Siga as instruções na tela para gerar seu protótipo.
   A Miro gera seu protótipo a partir das suas especificações e do conteúdo selecionado no canvas.

💡 Você pode instruir a Miro AI a usar objetos específicos do canvas selecionando-os. Por exemplo, no seu prompt você pode dizer "Use capturas de tela no canvas como guias para construir o protótipo." Se você tiver muitos objetos semelhantes no canvas, descreva explicitamente quais objetos deseja que a Miro AI utilize.

Itere seu protótipo

O primeiro rascunho pode não ser o resultado perfeito. Antes de aplicar o rascunho ao canvas, você pode continuar iterando e criar várias versões do seu protótipo.

1. Crie um protótipo com o Miro AI. Não aplique ao canvas.
   O próximo passo no painel de Protótipos é O que você gostaria de fazer a seguir?
2. Escolha Editar protótipo. 
3. Para um fluxo de múltiplas telas, escolha a tela que deseja iterar.
4. Na caixa de resposta, descreva as alterações que deseja.
5. Clique na seta para cima ou pressione Enter no seu teclado.
   A Miro gera uma nova versão do seu protótipo.

✏️ As edições só podem ser feitas uma tela por vez.

💡 Use o contexto do canvas. Selecione Documentos, diagramas, notas adesivas ou outro conteúdo do board para acionar o Miro AI.

Iterar com uma captura de tela como contexto visual

Antes de aplicar seu protótipo ao canvas, você pode usar uma captura de tela ou outro protótipo já no canvas, como contexto para iterar seu rascunho.

1. Crie um protótipo com o Miro AI. Não aplique ao canvas.
   O próximo passo no painel de Protótipo é O que você gostaria de fazer a seguir?
2. Clique em Editar protótipo.
3. Para um fluxo de várias telas, escolha a tela que você deseja iterar.
4. Selecione uma captura de tela no board.
5. Na caixa de resposta, descreva as alterações que você deseja fazer com base na captura de tela selecionada.
6. Clique na seta para cima ou pressione Enter no seu teclado.
   A Miro gera uma nova versão do seu protótipo. 

💡 Você pode usar telas de protótipos existentes no board como contexto visual. Crie e aplique um protótipo ao board. Selecione uma tela.

Aplicar estilos do protótipo a partir de uma captura de tela

Se você deseja que seu protótipo corresponda a um site ou produto existente, é possível extrair estilos de uma captura de tela e aplicá-los às suas telas.

1. Crie um protótipo.
2. Selecione sua(s) tela(s) de protótipo.
   O menu de contexto aparece.
3. Clique no ícone do Miro AI no menu de contexto.
4. Selecione Importar estilo de imagem.
   Importe estilos e aplique-os ao seu protótipo
5. Escolha o arquivo de imagem do qual deseja importar o estilo.
6. Os estilos são aplicados ao seu protótipo.

💡 Aplique estilos primeiro ou por último. Para garantir que todos os elementos do seu protótipo estejam alinhados a um tema, aplique seu tema no início do design do protótipo ou como etapa final.

Converta capturas de tela em protótipos que você pode editar

Você pode converter uma captura de tela de um design ou da interface de um concorrente em um protótipo editável.

1. Adicione a captura de tela ao seu board Miro.
2. Clique na imagem para abrir o menu de contexto.
3. Selecione o ícone Miro AI > Converter imagem em protótipo.
4. Escolha o tipo de dispositivo (Móvel, Tablet, Desktop).
5. A IA irá recriá-la como um protótipo editável—texto, botões, layout e outros elementos.
6. Agora você pode modificar, adicionar ou editar esta versão conforme necessário.

💡 Converta uma captura de tela em um mockup editável. Em seguida, peça ao Miro AI para continuar editando. Você também pode usar uma captura de tela como contexto no seu prompt e gerar um protótipo. Para usar várias capturas de tela, selecione todas e copie como imagem. Depois, use a imagem como contexto no seu prompt.

Selecione uma versão de protótipo

Cada refinamento cria uma versão de protótipo. À medida que você refina seu protótipo, o seletor de versão está acima do rascunho do protótipo. 

Clique nas setas para alternar entre as versões. Quando escolher uma versão, clique em Adicionar ao canvas. Sua versão será aplicada ao canvas.

Escolha qual refinamento, ou versão, do seu protótipo adicionar ao canvas.

💡 Antes de clicar em Adicionar ao canvas, você pode selecionar uma tela de qualquer versão e copiar-colar no canvas. Isso garante que você possa salvar uma tela de uma versão que pode descartar. 

⚠️ Ao clicar em Adicionar ao canvas, todas as outras versões não poderão ser recuperadas.

Visualizar um protótipo

1. Selecione uma tela do protótipo.
   O menu de contexto aparece.
2. No menu de contexto, clique em Visualizar.
   A visualização será carregada.

💡 Para obter uma visualização totalmente interativa do protótipo, use linhas de conexão entre as telas.

Adicione Linhas de Conexão para tornar um protótipo interativo

Para adicionar ou mudar conexões entre objetos no seu Miro Prototype:

1. Clique em um elemento (como um botão) no seu protótipo.
2. Arraste o ícone da Linha de Conexão para a tela à qual deve se conectar.
3. No modo de Visualização, clicar no elemento levará os usuários para a tela vinculada.

Ocultar linhas de conexão

Para protótipos com muitos conectores, para simplificar a visualização do seu protótipo, você pode ocultar os conectores.

No modo de canvas, selecione o seu protótipo. No menu de contexto, clique nos três pontos. Em seguida, selecione Ocultar conectores.

No modo foco, no canto superior esquerdo, clique no botão Ocultar | Mostrar conectores.

Ocultar ou mostrar conectores no modo foco.

Repita os mesmos passos para mostrar os conectores.

💡 Use teclas de atalho para ocultar ou mostrar conectores. No teclado, pressione Shift + E. No modo de Canvas, para usar teclas de atalho, certifique-se de selecionar o seu protótipo.

Modo foco

O Miro Prototypes inclui o modo foco. Entre no modo foco para trabalhar no seu protótipo sem que nenhum outro conteúdo do board esteja visível, permitindo que você trabalhe sem distrações.

Para entrar no modo foco, selecione o seu Miro Prototype. No menu de contexto, clique em Modo foco.

O modo foco proporciona uma experiência de Miro Prototypes livre de distrações.

Exporte seu protótipo

Você pode exportar seu protótipo como SVG. Você também pode usar o Servidor do Protocolo de Contexto de Modelo (MCP) da Miro para exportar para um editor de código AI; times podem usar a exportação para gerar código funcional e acelerar o desenvolvimento.

Exportar para SVG

1. Na barra do board, clique nos três pontos verticais.
2. Clique em Board > Exportar > Exportar como imagem.
   Uma janela de seleção e o modal Exportar imagem como serão abertos.
3. Ajuste a janela de seleção para que cubra seu protótipo.
4. No modal Exportar imagem como, selecione Vetor – SVG.
5. Clique em Exportar. 

💡 Você pode exportar uma única tela como SVG a partir do menu de contexto. Selecione uma tela no seu protótipo. No menu de contexto, clique nos três pontos verticais e, em seguida, clique em Exportar como imagem. O modal Exportar como imagem abrirá, então selecione Vetor – SVG.

✏️ Para exportações de SVG de protótipos com imagens, se você importar o SVG para outros softwares de edição, como o Figma, as imagens são substituídas por espaços reservados.

Exportar com o Miro MCP Server

Para exportar seu protótipo para um editor de código IA, por exemplo, o Cursor, inclua a URL do board com o ID do board no seu prompt. Certifique-se de fornecer instruções para gerar código com base no protótipo.

Para saber mais sobre como usar o Miro MCP, consulte a visão geral do Miro MCP Server.

Um editor de IA de base de código como o Cursor aceita um URL de board da Miro com o ID do board para gerar código com base no seu protótipo.

Perguntas frequentes