Miro Prototypes

Quem pode fazer: Todos os membros com o 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 Miro. 

Você pode gerar fluxos de uma ou várias telas, refinar seus designs e aplicar estilos, além de visualizar uma simulação interativa do seu protótipo. Construa seu design com vários prompts específicos que geram cada elemento do seu protótipo. Você também pode aprimorar seus prompts para evitar começar tudo de novo.

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

NOTA: A experiência de Prototipagem foi movida para os Assistentes de IA. Agora em beta público, alguns usuários já têm a nova entrada dos Assistentes para protótipos gerados por IA. Se sua experiência não corresponder à documentação, veja Criar um protótipo com Assistentes (Beta). Conteúdos que explicam como refinar e iterar seu resultado ainda são aplicáveis.

Mais informações: Veja perguntas frequentes.

Criar um protótipo com Miro AI

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

Começar do zero

1. Em um canvas da Miro, acima da barra de criação, clique em Sidekicks.
   O painel Sidekick abre.
2. Clique em Biblioteca de Assistentes de IA.
   Acesse Protótipo na Biblioteca de Assistentes de IA 
3. Clique em Formatos > Protótipo.
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 de múltiplas 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 iniciar seu prompt.
8. Conclua seu prompt e depois clique na seta Enviar ou pressione ENTER no seu teclado.
   A IA da Miro gera um protótipo preliminar no canvas.
9. (Opcional) Para parar a geração, clique em Parar no seu protótipo.
10. (Opcional) Para iterar seu protótipo, continue a inserir prompts no painel de Protótipo.
    Cada iteração cria uma versão do seu protótipo preliminar.
11. No seu protótipo de rascunho, escolha uma das seguintes opções:
    • Aplicar ao canvas
      Agora seu protótipo é editável no canvas.
    • Descartar tudo
      Seu rascunho é removido do canvas. Você pode refinar 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 de Assistente de IA para prototipagem. Esta seção descreve como começar a prototipar com o Assistente de IA. Para saber como começar manualmente, veja a biblioteca de prototipagem.

DICA: Crie seu protótipo com Assistentes de IA para habilitar o histórico de chat de IA, que lembra seus prompts, permitindo que você revise opções que já explorou e retome em qualquer board. Para mais informações, veja Os Assistentes de IA evoluem a criação de IA na Miro e Visão geral de Miro Prototypes.

NOTA: A atualização dos Assistentes de IA para Prototypes está atualmente em beta público. Se sua experiência não corresponder à documentação nesta seção, veja Crie um protótipo com Miro AI.

Siga estas etapas:

1. Em um canvas da Miro, acima da barra de Criação, clique em Assistentes de IA.
   O painel Assistentes de IA abrirá.

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

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

   DICA: 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 deseja que o Assistente de IA gere. 
4. Clique na seta para cima ou pressione ENTER no seu teclado.
5. (Opcional) Para parar a geração, no seu protótipo clique em Parar.
6. (Opcional) Para iterar em seu protótipo, continue a fornecer prompts no painel de Protótipo.
   Cada iteração cria uma versão do seu protótipo de rascunho.
7. No seu protótipo rascunho, escolha uma das seguintes opções:
   • Aplicar ao canvas
     Seu protótipo agora é editável no canvas.
   • Descartar tudo
     Seu rascunho é removido do canvas. Você pode refinar seu prompt e repetir as etapas 3–6.

DICA: Comece pequeno e seja específico. Menos telas geradas de uma vez produzem resultados mais precisos em menos tempo. Indique explicitamente os elementos principais que você deseja para cada tela, como botões, seções ou ações.

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

DICA: 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 canvas como prompt

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

Siga estas etapas:

1. Selecione o conteúdo da canvas. Por exemplo, um Doc ou notas adesivas. Você pode, opcionalmente, selecionar vários objetos.
2. Em uma canvas do Miro, acima da barra de criação clique em Sidekicks.
   O painel Sidekicks será aberto.
   Nota: Se você tiver a versão atualizada...
3. Clique em Assistentes de IA
   Acessar Protótipo na biblioteca de Assistentes de IA 
4. Clique em Formatos > Protótipo.
5. Selecione Um prompt de texto.
6. Especifique o tipo de dispositivo, depois especifique uma ou várias 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 do canvas.

DICA: Você pode instruir o Miro AI a usar objetos específicos do canvas selecionando-os no canvas. 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 você deseja que o Miro AI utilize.

Itere seu protótipo

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

1. Crie um protótipo com 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. Escolha Editar protótipo.
3. Para um fluxo de várias telas, escolha a tela que deseja iterar.
4. Na caixa de resposta, descreva as alterações desejadas.
5. Clique na seta para cima ou pressione Enter no seu teclado.
   A Miro gera uma nova versão do seu protótipo.

NOTA: As edições podem ser feitas apenas uma tela por vez.

DICA: Use o contexto da 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 à canvas, você pode usar uma captura de tela, ou outro protótipo já na canvas, como contexto para iterar sua proposta.

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 com várias telas, escolha a tela que deseja iterar.
4. Selecione uma captura de tela no board.
5. Na caixa de resposta, descreva as mudanças que deseja com base na captura de tela selecionada.
6. Clique na seta para cima ou pressione Enter no teclado.
   O Miro gera uma nova versão do seu protótipo. 

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

Editar com IA

Para qualquer protótipo já aplicado ao canvas, você pode continuar iterando com Editar com IA. Use Editar com IA para refinar em vez de reconstruir, por exemplo, se você quiser criar uma versão em modo escuro de um protótipo existente.

Siga estes passos:

1. Para qualquer protótipo aplicado ao canvas, no menu de contexto clique em Editar com IA.
   O painel Assistente de IA será aberto.
   Editar com IA permite refinar um protótipo existente.

   NOTA: Você pode usar Editar com IA e Assistente de IA com um protótipo de cada vez. Para alternar, feche o Assistente de IA e reabra Editar com IA a partir do protótipo alvo.

2. Na caixa de prompt, descreva as alterações que deseja fazer. Por exemplo, "Converter para tema escuro".
3. Para executar seu prompt, clique no botão de seta para cima ou pressione ENTER no teclado.
   O Assistente de IA gera seu protótipo refinado.
4. (Opcional) Continue entrando com prompts no Assistente de IA e iterando seu protótipo. Você pode selecionar uma versão antes de aplicar seu protótipo ao canvas.
5. Acima do protótipo elaborado, clique em Adicionar ao canvas.

NOTA: Para Miro Prototypes, todas as funcionalidades de prototipagem aprimoradas por IA estão disponíveis apenas com o complemento Prototypes.

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

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

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

DICA: Aplique estilos primeiro ou por último. Para garantir que todos os elementos do seu protótipo sigam um tema, aplique o seu tema logo no início do design do protótipo ou como um passo final.

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

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

1. Adicione a captura de tela ao seu board no Miro.
2. Clique na imagem para abrir o menu de contexto.
3. Clique no botão Converter para e, em seguida, clique em Protótipo.
4. No submenu, escolha o tipo de dispositivo (Celular, Tablet, Desktop, Personalizado).
5. A IA irá reconstruí-lo 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.

DICA: Converta uma captura de tela em um mockup editável. Em seguida, peça ao Miro AI para continuar a edição. 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 do protótipo

Cada refinamento cria uma versão do protótipo. À medida que você refina seu protótipo, o seletor de versão fica 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 à canvas.

DICA: Antes de clicar em Adicionar à canvas, você pode selecionar uma tela de qualquer versão e copiar-colar para a canvas. Isso garante que você possa salvar uma tela de uma versão que pode descartar. 

AVISO: Ao clicar em Adicionar à canvas, todas as outras versões não poderão ser recuperadas.

Visualizar um protótipo

No menu de contexto do protótipo, clique em Visualizar. A pré-visualização será carregada.

DICA: Para obter uma pré-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 alterar conexões entre objetos em 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 Pré-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 canvas, selecione seu protótipo. No menu de contexto, clique nos três pontos. Depois, selecione Ocultar conectores.

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

Oculte ou mostre conectores no modo foco.

Repita os mesmos passos para mostrar os conectores.

DICA: Use atalhos para ocultar ou mostrar os conectores. No teclado, pressione Shift + E. No modo Canvas, para usar atalhos, certifique-se de selecionar seu protótipo.

Modo foco

Miro Prototypes inclui o modo foco. Entre no modo foco para trabalhar em seu protótipo sem qualquer outro conteúdo do board à vista, permitindo que você trabalhe sem distrações.

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

O modo foco facilita uma experiência Miro Prototypes sem distrações.

Copiar para o Figma

Forneça seu protótipo para designers no Figma sem precisar reconstruir manualmente. Você pode copiar seu protótipo ou telas individuais.

Copiar um protótipo para o Figma

1. Clique no quadro do protótipo.
   O menu de contexto de formato aparece.
2. No menu de contexto, clique nos três pontos verticais para abrir o menu Mais.
3. Clique em Copiar para Figma.
   A Miro copia o seu protótipo para a área de transferência.
   Copie seu protótipo para o Figma. 
4. No Figma, cole seu protótipo. Você pode usar as teclas de atalho (Windows) Ctrl + V ou (MacOS) Command + V .
   Seu protótipo será colado no Figma.

Copiar uma tela de protótipo para o Figma

1. Clique para selecionar uma tela de protótipo.
   O menu de contexto do widget aparece.
2. No menu de contexto, clique nos três pontos verticais para abrir o menu Mais.
3. Clique em Copiar para Figma.
   A Miro copia a tela do seu protótipo para a área de transferência.
4. No Figma, cole o seu protótipo. Você pode usar as teclas de atalho (Windows) Ctrl + V ou (MacOS) Command + V .
   A tela do seu protótipo é colada no Figma.

Compartilhar um link do seu protótipo (Beta)

Você pode copiar um link exclusivo para compartilhar com membros do time ou stakeholders externos sem uma conta Miro. 

1. No menu de contexto do protótipo, clique nos três pontos verticais para abrir o menu Mais.
2. Clique em Compartilhar e exportar > Compartilhar protótipo.
   O modal Compartilhar protótipo abrirá.
3. Clique em Copiar link.
4. (Opcional) Clique em Visualizar no navegador para ver como qualquer pessoa com seu link verá seu protótipo.
5. Compartilhe seu link.

NOTA: Para que usuários externos acessem, o seu board deve estar público. Usuários externos só podem acessar o protótipo no modo foco, e nenhum outro conteúdo no canvas. Eles podem interagir com hotspots e fluxo do protótipo. Se as permissões do board permitirem, usuários externos também podem comentar.

DICA: Você também pode copiar um link compartilhável no modo foco: No canto superior direito, clique nos três pontos verticais. Em seguida, clique em Compartilhar protótipo. E no modo de visualização: No canto superior direito, clique em Compartilhar protótipo.

Exporte seu protótipo

Você pode exportar seu protótipo como SVG. Você também pode usar o Model Context Protocol (MCP) Server da Miro para exportar para um editor de IA de base de código; os times podem usar a exportação para gerar código funcional e acelerar o desenvolvimento.

Exportar para SVG

1. No menu de contexto do protótipo, clique nos três pontos verticais.
2. Clique em Compartilhar e 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 de modo que cubra seu protótipo.
4. No modal Exportar imagem como, selecione Vetorial – SVG.
5. Clique em Exportar. 

DICA: 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 depois em Exportar como imagem. A janela modal Exportar como imagem se abre, então selecione Vetor – SVG.

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

Exportar com o Servidor MCP da Miro

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

Para saber mais sobre o uso do Miro MCP, veja 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 ID do board para gerar código com base no seu protótipo.

Perguntas frequentes