Fluxos (caminho do usuário entre as telas)

Um fluxo mostra o caminho do usuário entre as telas: "clica aqui → abre esta tela → clica ali → abre o modal…". Cada seta sai do elemento clicado, marcado com uma caixa laranja, e tem um número de passo e um texto. Serve para explicar ao dev, apresentar e documentar.

Abrir

Clique no ícone de Fluxos no topo (dois quadrados ligados por uma seta, ao lado do 🎨). Os fluxos têm uma tela própria, com a lista de fluxos à esquerda, o quadro no meio e o painel de edição à direita.

Criar um fluxo

1. Clique em Novo fluxo.
2. Dê um nome (ex.: "Do login ao cadastro de cliente").
3. Escolha:
   • Montar automaticamente (recomendado): o app lê as ações das páginas, criadas com o ⚡ Criar ação ou pelo Claude. Cada botão vira uma seta até a tela que ele abre, inclusive modais, que entram com o print do modal aberto. As telas são organizadas sozinhas, da esquerda para a direita, por etapa.
   • Começar vazio: você inclui as telas e liga à mão.
4. Clique em Criar.

Se as páginas ainda não têm ações, o fluxo vem só com as telas. Ligue com Ligar telas ou crie as ações antes.

Mexer no quadro

• Arrastar uma tela ou nota: clique e arraste.
• Mover o quadro: arraste o fundo (ou use a roda do mouse).
• Zoom: Ctrl + roda do mouse, ou os botões − / +. Clique na porcentagem para ver tudo.
• Organizar: reorganiza tudo automaticamente.
• Desfazer: Ctrl+Z ou o botão ↶. Delete apaga o que está selecionado. Esc cancela ou fecha.

O fluxo é salvo sozinho a cada mudança.

Telas, passos, setas e notas

O ponteiro do mouse muda conforme a ação:

• + Tela: inclui uma página do projeto ou uma anotação.
• Ligar telas: clique na tela de origem e depois na de destino. O passo é criado; escreva o texto no painel e clique em Marcar onde clicar para desenhar a caixa em cima do botão.
• Caixa "onde clicar" (laranja, com o número do passo):
  • arraste para mover;
  • puxe o quadradinho do canto para mudar o tamanho (aparece quando o passo está selecionado);
  • clique no número para trocar: abre a lista 1, 2, 3… e, ao escolher, os dois passos trocam de número (nunca fica repetido). Também dá para trocar pelos números no painel da direita.
• Clique numa seta ou no rótulo para editar o texto do passo, a cor, redesenhar a caixa ou remover.
• Renumerar passos: sem nada selecionado, renumera pela posição das telas.
• Seta: desenha uma seta livre (não ligada a telas). Clique e arraste do começo até a ponta. Depois escolha a cor, a espessura e, se quiser, um texto. Arraste a seta para mover e as bolinhas das pontas para ajustar.
• Nota: clique em Nota e depois no lugar do quadro onde ela deve ficar. Escreva no painel, escolha a cor e puxe o canto para mudar o tamanho.
• Clique numa tela para renomear, abrir a página, ligar a outra tela ou tirar do fluxo.

Selecionar, redimensionar e alinhar (como nos editores de imagem)

• Clique num item para selecionar: aparece uma moldura azul fina com alças (quadradinhos).
  • Telas: alças nos 4 cantos. Elas aumentam ou diminuem mantendo a proporção do print.
  • Notas e caixas "onde clicar": 8 alças. Os cantos mudam largura e altura; as bordas esticam um lado só.
• Enquanto você redimensiona, aparece a medida (largura × altura).
• Ao arrastar telas e notas, aparecem linhas rosa de alinhamento: o item "gruda" quando as bordas ou os centros se alinham com outro. Segure Shift para mover sem grudar.
• Setas do teclado movem o item selecionado 1 px; com Shift, 10 px.
• Passar o mouse sobre um item mostra um contorno azul, indicando que ele pode ser clicado.
• As setas ficam sempre por cima das telas e notas.

Exportar e documento do dev

• Exportar imagem: salva o fluxo inteiro como PNG, na pasta do fluxo.
• No documento do dev (ligado por padrão): o fluxo entra no documento para o dev, com a imagem e a lista dos passos ("1. Clientes → Clicar em Novo cliente → Detalhes").

Os fluxos ficam na pasta fluxos/ do projeto.