> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Editar e iterar designs do Flowstep via chat ou canvas

> Refine qualquer ecrã gerado pelo Flowstep através de edição visual manual ou prompts baseados em chat — itere quantas vezes for necessário até o design estar correto.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Os designs do Flowstep são completamente editáveis após a geração. Não fica preso ao que a IA produz inicialmente — pode ajustar os visuais diretamente no editor, usar chat para descrever alterações em linguagem natural, ou pedir ao Flowstep para gerar variações e novos ecrãs. Use qualquer método que se adeque à alteração que deseja fazer.

## Duas formas de editar

<Tabs>
  <Tab title="Edição visual manual">
    Faça alterações diretamente no canvas selecionando e modificando elementos. Este método funciona melhor para ajustes precisos — mover um componente, alterar uma cor, atualizar um rótulo ou ajustar o espaçamento.

    <Steps>
      <Step title="Selecione o elemento que deseja alterar">
        Clique em qualquer componente ou camada no seu design para o selecionar.
      </Step>

      <Step title="Faça as suas alterações">
        Use os controlos do editor para ajustar propriedades como cor, tamanho, posição ou conteúdo de texto.
      </Step>

      <Step title="Revise o resultado">
        As suas alterações aplicam-se imediatamente no canvas. Continue a editar ou passe para o próximo ecrã.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Edição baseada em chat">
    Descreva a alteração que deseja em linguagem natural e o Flowstep atualiza o design para si. Este método é mais rápido para alterações amplas ou estruturais — ajustar o layout, repensar uma secção ou aplicar uma direção de estilo.

    <Steps>
      <Step title="Abra o painel de chat">
        Selecione o ecrã que deseja editar e depois abra a entrada de chat.
      </Step>

      <Step title="Descreva a sua alteração">
        Escreva o que pretende que o Flowstep atualize. Seja específico sobre o que deve mudar e porquê, se ajudar.
      </Step>

      <Step title="Revise o design atualizado">
        O Flowstep aplica a alteração e mostra-lhe o resultado. Se não estiver exatamente certo, envie uma mensagem de acompanhamento para refinar ainda mais.
      </Step>
    </Steps>

    As edições e regenerações atualizam o ecrã selecionado **no local** em vez de adicionar um novo ecrã — enquanto o Flowstep transmite a alteração, o elemento em que está a trabalhar é destacado com uma borda tracejada verde. Gerar sem um ecrã selecionado adiciona um novo ecrã em vez disso.
  </Tab>
</Tabs>

## Editar apenas parte de um ecrã

Não tem de editar ecrãs completos. 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** (seleção direta) com **Shift+V** (ou o menu pendente no botão da barra de ferramentas Selecionar) para selecionar o elemento mais profundo sob o seu clique. Pressione **V** para seleção normal, ou segure **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** (imagem) aparece no painel de propriedades: pré-visualize a imagem, substitua-a arrastando um novo ficheiro de imagem para a pré-visualização ou clicando em **Pick image** (selecionar imagem), ou guarde-a com **Download image** (transferir imagem).

## Restaurar 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** (restaurar) — **Restore original** (restaurar original) para reverter edições, ou **Restore** / **Restore all** (restaurar / restaurar tudo) para trazer de volta ecrãs eliminados. Use-o para voltar a um estado conhecido como bom após uma edição seguir a direção errada.

## Ações de um clique

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

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

* **Try again from scratch** (tentar novamente do zero) — 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** (mostrar o próximo ecrã) — peça ao Flowstep para gerar o que logicamente vem a seguir no fluxo do utilizador.
* **Make it pretty** (embelezar) — ajuste o espaçamento, alinhamento e cores em todo o design. O layout permanece igual.

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

## Iterar para refinar

O design raramente sai perfeitamente 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ã.

<Tip>
  Ao iterar via chat, referencie elementos específicos pelo nome ou localização para obter resultados mais precisos. Por exemplo: "Mova o botão de apelo à ação para o fundo do ecrã e deixe-o com toda a largura" é mais eficaz do que "corrige o botão."
</Tip>