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 da Miro. 

Você pode gerar fluxos de tela única e múltipla, refinar seus designs e aplicar estilos, além de pré-visualizar uma simulação interativa do seu protótipo. Construa seu design em múltiplos prompts específicos que geram cada elemento do seu protótipo. Você também pode refinar seus prompts para evitar começar do zero.

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

NOTA: A experiência do Prototypes foi movida para os Assistentes de IA. Agora em beta público, alguns usuários já possuem a interface atualizada de Assistentes de IA para protótipos gerados por IA. Se perceber que sua experiência não corresponde à documentação, consulte Criar protótipo com Assistentes de IA (Beta). O conteúdo que explica como refinar e iterar seus resultados ainda é aplicável.

Mais informações: Veja perguntas frequentes.

Criar protótipo com Miro AI

Esta seção descreve como começar a prototipar com o Miro AI. Para saber como começar manualmente, veja 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 será aberto.
2. Clique em Biblioteca de Assistentes.
   Acesse Protótipo na Biblioteca de Assistentes 
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. No caixa de resposta, você pode, opcionalmente, usar as tags de sugestão para começar seu prompt.
8. Finalize seu prompt e clique na seta de Enviar, ou pressione ENTER no seu teclado.
   A IA da Miro gera um protótipo rascunho no canvas.
9. (Opcional) Para interromper a geração, no seu protótipo clique em Parar.
10. (Opcional) Para iterar no seu protótipo, continue a fazer prompts no painel de Protótipo.
    Cada iteração cria uma versão do seu protótipo rascunho.
11. No seu protótipo preliminar, escolha uma das seguintes opções:
    • Aplicar na canvas
      Seu protótipo agora é editável na canvas.
    • Descartar tudo
      Seu rascunho é removido da canvas. Você pode refinar seu prompt e repetir as etapas 7–9.

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

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

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

NOTA: A atualização dos Assistentes para Prototypes 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 Assistentes de IA.
   O painel de Assistentes de IA será aberto.

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 Assistente de IA.

   DICA: Alternativamente, você pode abrir o painel Assistente de IA e começar a utilizar o prompt imediatamente. Certifique-se de declarar explicitamente que você quer criar um protótipo, por exemplo, "Crie 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 você quer 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 escrever prompts no painel de Protótipo.
   Cada iteração cria uma versão do seu protótipo preliminar.
7. 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
     Seu rascunho é removido do canvas. Você pode refinar seu prompt e repetir as etapas 3–6.

DICA: Comece pequeno e seja específico. Gerar menos telas de uma vez produz resultados mais precisos em menos tempo. Declare explicitamente os elementos-chave que você deseja para cada tela, como botões, seções ou ações.

DICA: Aplique vários rascunhos de protótipos no 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 gerar, simplifique seu prompt ou reduza o número de telas.

DICA: Você pode incluir um URL no seu prompt e instruir o Assistente de IA a aplicar estilos do site vinculado.

Use o canvas como prompt

Selecione conteúdo no canvas para usar no 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 vários objetos.
2. Em um canvas da Miro, acima da Barra de criação clique em Sidekicks.
   O painel do Sidekick será aberto.
   NOTA: Se você tiver a versão atualizada...
3. Clique em Biblioteca de Assistentes de IA
   Acesse o 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 tela única ou multi-tela.
   A caixa de resposta mostra o número de objetos que você selecionou no passo 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.

DICA: Você pode orientar o Miro AI para usar objetos específicos no canvas, selecionando-os no próprio 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 deseja que o Miro AI utilize.

Iterar 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 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. 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 desejadas.
5. Clique na seta para cima ou pressione Enter no seu teclado.
   Miro gera uma nova versão do seu protótipo.

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

DICA: Use o contexto do canvas. Selecione Documentos, diagramas, notas adesivas ou outro conteúdo do board para orientar 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 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 alterações que deseja 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. 

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 no 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 estas etapas:

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

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

2. Na caixa de prompt, descreva as mudanças 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 seu teclado.
   Assistente de IA gera o seu protótipo refinado.
4. (Opcional) Continue a fornecer prompts para o Assistente de IA e itere em 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 de protótipos.

Aplicar estilos de protótipo a partir de uma URL

Para aplicar um estilo de uma URL existente ao seu protótipo:

1. Crie um Protótipo.
2. Selecione sua(s) tela(s) de protótipo.
   O menu de contexto aparece.
3. No menu de contexto, clique em Editar com IA para abrir o painel do Assistente de IA.
4. Na caixa de prompt, diga ao Assistente de IA para aplicar o estilo da URL incluída (certifique-se de incluir a URL completa).
5. O Assistente de IA aplicará o estilo visual da URL em uma versão atualizada do seu Protótipo no board.

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

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

1. Crie um protótipo.
2. Selecione suas telas de protótipo.
   O menu de contexto aparece.
3. Clique no ícone Miro IA 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 você gostaria de importar o estilo.
6. Os estilos são aplicados ao seu protótipo.

DICA: Aplique estilos no início ou no fim. Para garantir que todos os elementos do seu protótipo sigam um tema, aplique-o logo 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 de uma interface de usuário de concorrente em um protótipo editável.

1. Adicione a captura de tela ao seu board na Miro.
2. Clique na imagem para abrir o menu de contexto.
3. Clique no botão Converter para e depois 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, use um prompt no 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 as capturas e copie como imagem. Em seguida, 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.

DICA: 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 talvez descarte. 

AVISO: Ao clicar em Adicionar ao 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 visualização é carregada.

DICA: Para obter uma pré-visualização de Protótipo totalmente interativa, 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 no seu Protótipo Miro:

1. Clique em um elemento (como um botão) em 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 à tela vinculada.

Ocultar linhas de conexão

Para protótipos com muitas conexões, para simplificar a visualização do seu protótipo, você pode ocultar as linhas de conexão.

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

No modo foco, na parte superior esquerda, clique no botão Ocultar | Mostrar conectores.

Oculte ou mostre conectores no modo foco.

Repita os mesmos passos para mostrar os conectores.

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

Modo foco

O 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 o seu Miro Prototype. No menu de contexto, clique em Modo foco.

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

Copiar para o Figma

Forneça seu protótipo para os designers no Figma sem precisar reconstruí-lo 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 Formatação aparece.
2. No menu de contexto, clique nos três pontos verticais para abrir o menu Mais.
3. Clique em Copiar para Figma.
   Miro copia 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 é 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 sua tela de protótipo para a sua área de transferência.
4. No Figma, cole seu protótipo. Você pode usar os atalhos (Windows) Ctrl + V ou (MacOS) Command + V .
   Sua tela de protótipo é colada no Figma.

Compartilhar um link para o 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 de Compartilhar protótipo é aberto.
3. Clique em Copiar link.
4. (Opcional) Clique em Pré-visualizar no navegador para ver como qualquer pessoa com seu link visualiza seu protótipo.
5. Compartilhe seu link.

NOTA: Para que usuários externos acessem, seu board deve ser público. Usuários externos podem acessar o protótipo apenas no modo foco, e nenhum outro conteúdo na canvas. Eles podem interagir com hotspots e o 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 pré-visualização: No canto superior direito, clique em Compartilhar protótipo.

Exportar seu protótipo

Você pode exportar seu protótipo como SVG. Você também pode usar o Servidor de Protocolo de Contexto de Modelos (MCP) da Miro para exportar para um editor de código IA; 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 sã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. 

DICA: Você pode exportar uma única tela como SVG no menu de contexto. Selecione uma tela em seu protótipo. No menu de contexto, clique nos três pontos verticais, depois clique em Exportar como imagem. A janela modal Exportar como imagem será aberta; em seguida, selecione Vetorial – SVG.

OBSERVAÇÃO: Para exportações de protótipos em SVG com imagens, se você importar o SVG para outro software para edição, como o Figma, as imagens serão substituídas por marcadores de posição.

Exportar com o Servidor MCP da Miro

Para exportar seu protótipo para um editor de código base de IA, por exemplo, o Cursor, inclua o 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 como usar o 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