Edite e itere designs do Flowstep via chat ou canvas

Os designs Flowstep são totalmente editáveis após a geração. Você não fica preso ao que a IA produz inicialmente — pode ajustar visuais diretamente no editor, usar chat para descrever alterações em linguagem natural, ou pedir ao Flowstep para gerar variações e novas telas. Use o método que melhor se adequar à alteração que deseja fazer.

​

Duas maneiras de editar

​

Edite apenas parte de uma tela

Você não precisa editar telas inteiras. Selecione um sub-elemento — um card, um botão, um rótulo de texto — e seu prompt de chat se aplica apenas a ele, deixando o resto da tela intocado.

• Alterne para o modo Direct selection com Shift+V (ou no menu suspenso no botão da barra de ferramentas Select) para selecionar o elemento mais profundo sob seu clique. Pressione V para seleção normal, ou segure Cmd (Mac) / Ctrl (Windows) para usar seleção direta temporariamente. Escape sai da seleção direta.
• Selecione sub-elementos em várias telas com Cmd+Shift — um único prompt pode editar até 6 telas por mensagem.

Quando um elemento de imagem é selecionado (fora do modo wireframe), um painel Image aparece no painel de propriedades: visualize a imagem, troque-a arrastando um novo arquivo de imagem para a visualização ou clicando em Pick image, ou salve-a com Download image.

​

Copie e cole elementos

Copie uma seleção e cole-a onde precisar — no mesmo arquivo, em outro arquivo ou em outra aba do navegador, já que as cópias vão para a área de transferência do seu sistema.

• Copie com Cmd+C (Mac) / Ctrl+C (Windows), recorte com Cmd+X / Ctrl+X e cole com Cmd+V / Ctrl+V.
• Duplique uma seleção no mesmo lugar com Cmd+D / Ctrl+D.
• Os elementos colados ficam ligeiramente deslocados em relação aos originais para não cobri-los.

Esses atalhos atuam sobre os elementos selecionados; enquanto você edita texto, eles voltam a funcionar como copiar e colar texto comum.

​

Nomeie telas no canvas

Cada tela mostra seu nome em um rótulo acima dela no canvas. Uma tela que você ainda não nomeou aparece como Screen.

• Clique duas vezes no rótulo para renomear a tela e, em seguida, pressione Enter para salvar — clicar fora também salva. Os nomes podem ter até 100 caracteres.
• Clique uma vez no rótulo para selecionar a tela e arraste-a para movê-la pelo canvas.

​

Ajuste opacidade, modo de mesclagem e cantos

Selecione um elemento para ajustar sua aparência no painel de propriedades:

• Opacity — defina o quão transparente é o elemento, de 0 a 100%. O mesmo painel tem um modo de mesclagem (Normal, Multiply, Screen, Overlay e outros) que controla como o elemento se mistura com o que está atrás dele.
• Corners (cantos) — arredonde os cantos do elemento. Defina um único Corner radius para os quatro, ou ative Per corner para dar a cada canto (superior esquerdo, superior direito, inferior direito e inferior esquerdo) seu próprio raio. Cada valor pode ser um Token do seu tema ou um valor Custom.

​

Dê zoom até o pixel

Amplie o canvas em até 25.600% para verificar espaçamento e alinhamento com precisão. Acima de 200%, linhas de grade alinhadas ao pixel aparecem e ficam mais visíveis quanto mais você aproxima o zoom, para que você possa alinhar elementos com exatidão.

​

Restaure uma versão anterior

Cada geração de IA no histórico de chat mantém seu resultado original. Se uma tela foi editada ou deletada desde que foi gerada, sua mensagem de chat mostra um botão Restore — Restore original para reverter edições, ou Restore / Restore all para trazer de volta telas deletadas. Use-o para voltar a um estado conhecido e bom após uma edição dar errado. Passe o mouse sobre qualquer mensagem no painel de chat para ver quando foi enviada. Mensagens recentes mostram a hora; as mais antigas mostram há quanto tempo foram enviadas (por exemplo, “1 dia atrás”), com a data e hora completas em uma dica de ferramenta.

​

Ações com um clique

Além de edições diretas, você pode pedir ao Flowstep para explorar alternativas:

• Try again from scratch — peça ao Flowstep para produzir uma versão nova da tela atual com um layout ou direção visual diferente.
• Show the next screen — peça ao Flowstep para gerar o que logicamente vem a seguir no fluxo do usuário.
• Make it pretty — ajuste espaçamento, alinhamento e cores em todo o design. O layout permanece o mesmo.

Essas opções permitem que você itere rapidamente sem ter que escrever um prompt cada vez.

​

Iterando para refinar

O design raramente fica perfeito na primeira tentativa. Use edição baseada em chat para cada rodada de feedback — descreva o que está funcionando e o que não está, e o Flowstep se ajusta a partir daí. Não há limite para quantas vezes você pode iterar em uma tela.