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

# Mova designs entre Flowstep e Figma

> Copie qualquer frame do Flowstep para Figma com copiar e colar, ou importe frames do Figma para o Flowstep como telas editáveis. Trabalhe em ambas as ferramentas sem alternar.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.04.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=0e31f66d221bc267a060704be409d9f2" alt="Screenshot 2026 05 06 At 14 19 04" width="1838" height="1266" data-path="images/Screenshot-2026-05-06-at-14.19.04.png" />
</Frame>

Flowstep foi construído para se encaixar no fluxo de design que você já usa — não para substituir. Você pode gerar um design no Flowstep e imediatamente trazê-lo para Figma usando um copiar-e-colar simples, ou fazer o inverso e importar um frame do Figma para o Flowstep. Isso significa que você consegue a velocidade da geração de design assistida por IA combinada com os recursos de precisão e colaboração que você confia no Figma.

<Note>
  Flowstep e Figma são ferramentas complementares, não concorrentes. Flowstep ajuda você a gerar rapidamente e explorar ideias de design de UI; Figma é onde você refina, colabora e constrói trabalho pronto para produção. Usar ambas juntas te dá o melhor dos dois mundos.
</Note>

## Como copiar um design do Flowstep para Figma

<Steps>
  <Step title="Selecione uma ou mais telas no Flowstep">
    Clique em uma tela para selecioná-la — ou selecione várias telas para copiá-las todas de uma vez. Certifique-se de que a seleção está destacada na tela.
  </Step>

  <Step title="Copie a seleção">
    Pressione \*\*Cmd+\*\*⇧+**C** no Mac ou \*\*Ctrl+\*\*⇧+**C** no Windows. Flowstep mostra "Preparing your design — stay on this tab and keep the screen selected" enquanto trabalha; a cópia completa em um momento.
  </Step>

  <Step title="Cole em seu arquivo Figma">
    Alterne para Figma e abra o arquivo onde você quer colocar o design. Pressione **Cmd+V** no Mac ou **Ctrl+V** no Windows para colar. As telas do Flowstep aparecem em sua tela do Figma, prontas para editar.
  </Step>
</Steps>

<Note>
  Copiar para Figma usa a área de transferência do seu navegador, então o navegador deve permitir acesso à área de transferência do Flowstep — se você vir um erro de permissão, permita acesso à área de transferência nas configurações do seu navegador e tente novamente. Alternar abas durante a cópia interrompe a transferência; mantenha a aba do Flowstep focada até que a cópia termine.
</Note>

<Tip>
  Cole o frame em uma página dedicada "AI imports" no Figma para manter seus arquivos de trabalho organizados. De lá, você pode mover elementos para seu sistema de design principal ou biblioteca de componentes no seu próprio ritmo.
</Tip>

## Importe um design do Figma

Você também pode fazer o inverso e trazer um frame do Figma para o Flowstep como telas editáveis. Importação está disponível para todos — conecte sua conta Figma uma vez, depois importe de um link de frame.

<Steps>
  <Step title="Conecte Figma">
    Conecte sua conta Figma ao Flowstep a partir de suas configurações. Flowstep usa a autorização do Figma para ler os arquivos que você tem acesso.
  </Step>

  <Step title="Copie um link de frame no Figma">
    No Figma, clique com o botão direito no frame que você quer e escolha **Copy link to selection**. Você também pode copiar um link para uma página inteira para importar todos os seus frames de nível superior de uma vez.
  </Step>

  <Step title="Importe para o Flowstep">
    Use a opção de importação Figma na barra de ferramentas do Flowstep e cole o link. Flowstep converte o frame em elementos editáveis em sua tela. Reimportar o mesmo frame o atualiza no lugar.
  </Step>
</Steps>

### O que é importado

Flowstep recria um frame do Figma como elementos nativos e editáveis — não uma imagem plana. Uma importação traz:

* Frames e suas camadas aninhadas
* Texto, incluindo estilos por caractere como peso, cor e negrito
* Cores das suas variáveis Figma
* Preenchimentos de imagem e ícones SVG e formas
* Sombras de queda e internas, e borrões de camada e fundo
* Traços tracejados e pontilhados

<Note>
  A organização do arquivo deve ter Figma conectado. Se um frame não for importado, Flowstep mostra uma mensagem acionável que diz o que fazer a seguir — por exemplo, reconecte Figma se sua autorização expirou, aguarde e tente novamente se Figma estiver limitando taxa ou respondendo lentamente, ou, para um template Community, duplique-o para seu time primeiro e cole o novo link.
</Note>