Quem pode fazer isso: Todos os usuários
Quais planos: Todos os planos
Quais plataformas: navegador, desktop, dispositivo móvel
Crie protótipos diretamente no board usando a biblioteca de Protótipos. A biblioteca inclui elementos de UI e ícones que você pode usar para criar protótipos interativos, sozinho ou em conjunto com o recurso Crie com IA Prototype.
A Galeria de protótipos substitui a Galeria de wireframes, que se tornará obsoleta ainda este ano. Até lá, a galeria de wireframes pode ser acessada via a guia Wireframes dentro da galeria de protótipos.
Acesse a galeria de protótipos
- Clique no ícone Mídia, ferramentas e integrações (
).
- Pesquisar por Protótipos.
- Selecione o resultado da pesquisa de Protótipos.
- O painel de Protótipos será aberto com guias para elementos de UI e Ícones.
Desenhar um protótipo
- Selecione uma Tela do painel de elementos da UI e clique em qualquer lugar do board para colocá-la.
- Arraste e solte outros elementos da UI ou ícones na tela.
- Se estiver projetando um protótipo de várias telas, adicione linhas de conexão para adicionar interatividade entre as telas (visualizável em Visualizar):
- Clique em um elemento de interface que deseja conectar a uma tela diferente.
- Clique e arraste o ícone Linha de Conexão do elemento da UI para a tela à qual deseja conectar.
Alterar os status dos elementos de UI
Alguns elementos de UI têm opções para o seu status no protótipo, como marcar ou desmarcar uma caixa de seleção. Para acessar esses status:
- Clique no elemento da UI no qual você deseja alterar as configurações.
O menu de contexto aparece. - No menu de contexto, clique no menu suspenso Status.
- Selecione o status desejado.
Alterar estilos de elementos
Para alterar a cor ou a fonte de um elemento da UI:
- Clique no elemento que você deseja editar.
O menu de contexto aparece. - Dependendo do elemento, você terá a opção de alterar a cor de fundo, fonte, tamanho da fonte e/ou cor da fonte.
Visualizar um protótipo
Para visualizar a prévia interativa do seu protótipo:
- Selecione uma das telas do protótipo.
O menu de contexto aparece. - Clique em Pré-visualizar.
A pré-visualização será carregada. - Você pode clicar em elementos dentro do protótipo para ver suas interações — criadas com linhas de Conector — ou clicar nas setas para navegar entre as telas.