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. 

Você pode gerar fluxos de tela única e múltiplas, refinar seus designs e aplicar estilos, e 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 informações gerais sobre o Miro Prototypes, veja a visão geral do Miro Prototypes. 

✏️ A experiência de Protótipos foi movida para o Assistente de IA. Agora em beta público, alguns usuários já têm o input atualizado do Assistente de IA para protótipos gerados por IA. Se você perceber que sua experiência não condiz com a documentação, veja Crie um protótipo com Assistente de IA (Beta). O conteúdo que explica como refinar e iterar sua saída ainda é aplicável.

Mais informações: Veja perguntas frequentes.

Crie um protótipo com Miro AI

Esta seção descreve como iniciar a prototipagem 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 será aberto.
2. Clique em Biblioteca de Assistentes.
   Acessar Protoype na Biblioteca de Assistentes 
3. Clique em Formatos > Protótipo.
4. Especifique se você 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 várias telas.
7. Siga as instruções na tela para escrever seu prompt ou carregar uma captura de tela. Na caixa de resposta, você pode opcionalmente usar as tags de sugestão para começar seu prompt.
8. Conclua seu prompt e, em seguida, clique na seta Enviar ou pressione ENTER no seu teclado.
   O Miro AI gera um protótipo inicial no 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 fazer prompt no painel de Protótipo.
    Cada iteração cria uma versão do seu protótipo inicial.
11. No seu protótipo de rascunho, escolha uma das seguintes opções:
    • Aplicar no canvas
      Seu protótipo agora é 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 o input atualizado do Assistente de IA para prototipagem. Esta seção descreve como iniciar a prototipagem com o Assistente de IA. Para aprender como começar manualmente, consulte a biblioteca de protótipos.

✏️ 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, veja 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 ajudar você a criar seu protótipo.
   Inicie seu protótipo no painel Assistente de IA.

   💡 Alternativamente, você pode abrir o painel Assistente de IA e começar a usar 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 deseja que o Assistente de IA gere. 
4. Clique na seta para cima ou pressione ENTER no seu teclado.
5. (Opcional) Para interromper a geração, no seu protótipo, clique em Parar.
6. (Opcional) Para iterar no seu protótipo, continue a inserir prompts no painel de Protótipo.
   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 é 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. Declare explicitamente os elementos-chave que você deseja para cada tela, como botões, seções ou ações.

💡 Aplique vários protótipos de rascunho 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 conteúdo no canvas para usar em seu prompt. Por exemplo, você tem um briefing de design em um Doc 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 da canvas. Por exemplo, um Doc ou notas adesivas. Opcionalmente, você pode selecionar vários objetos.
2. Na canvas do 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 Biblioteca de Assistente de IA
   Acesse o Protótipo na biblioteca de Assistente 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 selecionados na etapa 1.
7. Siga as instruções na tela para gerar seu protótipo.
   A Miro gera seu protótipo a partir de suas especificações e conteúdo selecionado no canvas.

💡 Você pode instruir a Miro AI a usar objetos específicos no canvas selecionando-os. Por exemplo, em 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 a Miro AI use.

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 Miro AI. Não aplique ao canvas.
   O próximo passo no painel de Protótipo é O que você gostaria de fazer em seguida?
2. Escolha Editar protótipo. 
3. Para um fluxo de várias telas, escolha a tela que você 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.

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

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

Itere 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á presente na canvas, como contexto para iterar seu rascunho.

1. Crie um protótipo com a Miro AI. Não aplique ao canvas.
   O próximo passo no painel de Protótipo é O que você gostaria de fazer em seguida?
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 seu teclado.
   A Miro gera uma nova versão do seu protótipo. 

💡 Você pode usar telas de protótipos existentes já no board como contexto visual. Crie e aplique um protótipo no 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ê deseja 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 do Assistente de IA abre.
   Editar com IA permite refinar um protótipo existente.

   ✏️ 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 a partir do protótipo alvo.

2. Na caixa de prompt, descreva as mudanças que você 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.
   O Assistente de IA gera seu protótipo refinado.
4. (Opcional) Continue enviando prompts para o 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 esboçado, clique em Adicionar ao canvas.

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

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

Se você quiser 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 sua(s) tela(s) do 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 em seu protótipo sigam um tema, aplique seu tema cedo no design do protótipo ou como uma etapa final.

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

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

1. Adicione a captura de tela ao seu board do Miro.
2. Clique na imagem para abrir o menu de contexto.
3. Selecione o ícone do Miro AI > Converter imagem em protótipo.
4. Escolha o tipo de dispositivo (Celular, Tablet, Desktop).
5. A IA irá reconstruí-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, utilize 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 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ões está acima do rascunho do protótipo.

Clique nas setas para alternar entre as versões. Quando você 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 usar copiar e colar no canvas. Isso garante que você possa salvar uma tela de uma versão que talvez descarte. 

⚠️ Quando você clica em Adicionar ao canvas, todas as outras versões não podem 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 Pré-visualizar.
   A pré-visualização é carregada.

💡 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 o protótipo interativo

Para adicionar ou alterar conexões entre objetos em seu Protótipo Miro:

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 simplificar a visualização do seu protótipo com muitos conectores, você pode ocultar os conectores.

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

Em 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 atalhos para ocultar ou mostrar conectores. No seu teclado, pressione Shift + E. No modo Canvas, para usar os atalhos, certifique-se de selecionar seu protótipo.

Modo foco

Miro Prototypes inclui o modo foco. Entre no modo foco para trabalhar no seu protótipo sem visualização de nenhum outro conteúdo do board, 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 proporciona uma experiência Miro Prototypes sem distrações.

Copiar para o Figma

Forneça seu protótipo para os designers no Figma sem 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 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. No seu protótipo, clique para selecionar uma tela do 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 o Figma.
   A Miro copia a tela do seu protótipo para a área de transferência.
4. No Figma, cole seu protótipo. Você pode usar as teclas de atalho (Windows) Ctrl + V ou (MacOS) Command + V .
   Sua tela do protótipo é colada no Figma.

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 código de IA; os 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 se abrem.
3. Ajuste a janela de seleção para que ela cubra o 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 será aberto, então selecione Vetor – SVG.

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

Exportar com o Servidor MCP da Miro

Para exportar seu protótipo para um editor de código baseado em IA, como 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 o uso do Miro MCP, veja a visão geral do Servidor MCP da Miro.

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

Perguntas frequentes