> ## 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 tela gerada pelo Flowstep através de edição visual manual ou prompts baseados em chat — itere quantas vezes for necessário até que o design esteja 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 totalmente editáveis após a geração. Você não está limitado ao que a IA produz inicialmente — você pode ajustar visuais diretamente no editor, usar chat para descrever mudanças em linguagem natural, ou pedir ao Flowstep para gerar variações e novas telas. Use o método que melhor se adeque à mudança que você deseja fazer.

## Duas formas de editar

<Tabs>
  <Tab title="Edição visual manual">
    Faça mudanças diretamente na canvas ao selecionar e modificar elementos. Este método funciona melhor para ajustes precisos — mover um componente, alterar uma cor, atualizar um rótulo ou ajustar espaçamento.

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

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

      <Step title="Revise o resultado">
        Suas alterações são aplicadas imediatamente na canvas. Continue editando ou passe para a próxima tela.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Edição por chat">
    Descreva a mudança que você deseja em linguagem natural e o Flowstep atualiza o design para você. Este método é mais rápido para mudanças amplas ou estruturais — ajustar o layout, repensar uma seção ou aplicar uma direção de estilo.

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

      <Step title="Descreva sua mudança">
        Digite o que você quer que o Flowstep atualize. Seja específico sobre o que deve mudar e por quê, se for útil.
      </Step>

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

    Edições e regenerações atualizam a tela selecionada **in place** em vez de adicionar uma nova tela — enquanto o Flowstep transmite a mudança, o elemento em que está trabalhando é destacado com uma borda tracejada verde. Gerar sem uma tela selecionada adiciona uma nova tela.
  </Tab>
</Tabs>

## 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 intacto.

* Alterne para o modo **Direct selection** com **Shift+V** (ou o menu suspenso no botão da barra de ferramentas Selecionar) 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 múltiplas 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**.

## 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 excluída 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 excluídas. Use-o para voltar a um estado conhecido como bom após uma edição ir na 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, 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 por 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.

<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 chamada para ação para o final da tela e deixe com largura total" é mais eficaz do que "corrija o botão."
</Tip>