Edite e itere os designs do Flowstep via chat ou canvas

Os designs do Flowstep são totalmente editáveis após a geração. Você não está limitado ao que a IA produz inicialmente — pode ajustar os visuais diretamente no editor, usar o chat para descrever alterações em linguagem natural, ou pedir ao Flowstep para gerar variações e novos ecrãs. Use o método que melhor se adequa à alteração que pretende fazer.

​

Duas formas de editar

​

Edite apenas parte de um ecrã

Não precisa de editar ecrãs inteiros. Selecione um sub-elemento — um cartão, um botão, um rótulo de texto — e o seu prompt de chat aplica-se apenas a ele, deixando o resto do ecrã intacto.

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

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

​

Copie e cole elementos

Copie uma seleção e cole-a onde precisar — no mesmo ficheiro, noutro ficheiro ou noutro separador do browser, já que as cópias vão para a área de transferência do seu sistema.

• Copiar com Cmd+C (Mac) / Ctrl+C (Windows), cortar com Cmd+X / Ctrl+X, e colar com Cmd+V / Ctrl+V.
• Duplicar uma seleção no mesmo local com Cmd+D / Ctrl+D.
• Os elementos colados ficam ligeiramente deslocados em relação aos originais, para não os taparem.

Estes atalhos aplicam-se aos elementos selecionados; enquanto estiver a editar texto, funcionam como o copiar e colar de texto normal.

​

Dê nome aos ecrãs na tela

Cada ecrã mostra o seu nome numa etiqueta acima dele na tela. Um ecrã que ainda não tenha nome aparece como Screen.

• Clique duplo na etiqueta para mudar o nome do ecrã e, depois, pressione Enter para guardar — clicar fora também guarda. Os nomes podem ter até 100 caracteres.
• Clique uma vez na etiqueta para selecionar o ecrã e, depois, arraste-o para o mover na tela.

​

Ajuste a opacidade, o modo de mistura e os cantos

Selecione um elemento para ajustar o seu aspeto no painel de propriedades:

• Opacity (opacidade) — defina o grau de transparência do elemento, de 0 a 100%. O mesmo painel inclui um modo de mistura (Normal, Multiply, Screen, Overlay e outros) que controla a forma como o elemento se mistura com o que está por trá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) o seu próprio raio. Cada valor pode ser um Token do seu tema ou um valor Custom.

​

Amplie até ao pixel

Amplie a tela até 25 600% para verificar o espaçamento e o alinhamento com precisão. Acima de 200%, aparecem linhas de grelha alinhadas ao pixel, que se tornam mais visíveis à medida que amplia, para que possa alinhar os elementos com exatidão.

​

Restaure uma versão anterior

Cada geração de IA no histórico de chat mantém o seu resultado original. Se um ecrã foi editado ou eliminado desde que foi gerado, a sua mensagem de chat mostra um botão Restore — Restore original para reverter edições, ou Restore / Restore all para trazer de volta ecrãs eliminados. Use-o para voltar a um estado conhecido após uma edição correr na direção errada. Passe o rato sobre qualquer mensagem no painel de chat para ver quando foi enviada. As mensagens recentes mostram a hora; as mais antigas mostram há quanto tempo foram enviadas (por exemplo, “há 1 dia”), com a data e hora completas numa dica de ferramenta.

​

Ações de um clique

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

• Try again from scratch — peça ao Flowstep para produzir uma versão nova do ecrã atual com um layout ou direção visual diferente.
• Show the next screen — peça ao Flowstep para gerar o que vem logicamente a seguir no fluxo de utilizador.
• Make it pretty — ajuste o espaçamento, alinhamento e cores no design. O layout mantém-se igual.

Estas opções permitem-lhe iterar rapidamente sem ter de escrever um prompt cada vez.

​

Iterando para refinar

O design raramente sai perfeito na primeira tentativa. Use a edição baseada em chat para cada ronda de feedback — descreva o que está a funcionar e o que não está, e o Flowstep ajusta a partir daí. Não há limite para quantas vezes pode iterar num ecrã.