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

# Faça download de designs do Flowstep como arquivos de imagem JPG ou PNG

> O Flowstep suporta exportação de designs como JPG ou PNG. Saiba qual formato é adequado para seu caso de uso e como fazer download de suas telas em poucos cliques.

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.49.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=b9d31a01c99bae3d325fdbfee34529dc" alt="Screenshot 2026 05 06 At 14 19 49" width="1824" height="1388" data-path="images/Screenshot-2026-05-06-at-14.19.49.png" />
</Frame>

Quando estiver pronto para compartilhar ou transferir um design, o Flowstep permite que você o exporte como uma imagem estática — JPG ou PNG. Ambos os formatos são amplamente suportados em ferramentas de design, software de apresentação e navegadores, para que você possa levar seus designs gerados por IA para onde precisar.

## Como exportar seu design

<Steps>
  <Step title="Abra seu design">
    Navegue até o design que deseja exportar dentro do Flowstep.
  </Step>

  <Step title="Abra o menu de exportação">
    Localize a opção de exportação na barra de ferramentas ou painel de design. Selecione-a para abrir as configurações de exportação.
  </Step>

  <Step title="Escolha seu formato">
    Selecione **JPG** ou **PNG** dependendo do seu caso de uso (veja a comparação abaixo).
  </Step>

  <Step title="Faça download do arquivo">
    Confirme sua seleção e faça download da imagem exportada para seu dispositivo.
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/flowstep/UmnbuTkaA7N6vp1N/images/Screenshot-2026-05-06-at-14.19.39.png?fit=max&auto=format&n=UmnbuTkaA7N6vp1N&q=85&s=8f3132e26a9a759315dd87a7a624fe00" alt="Screenshot 2026 05 06 At 14 19 39" width="1828" height="1522" data-path="images/Screenshot-2026-05-06-at-14.19.39.png" />
</Frame>

## JPG vs PNG: qual formato você deve usar?

|                        | JPG                                                                                 | PNG                                                                 |
| ---------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| **Melhor para**        | Compartilhamento de visualizações, apresentações, avaliações de partes interessadas | Designs com fundos transparentes, transferências de alta fidelidade |
| **Tamanho do arquivo** | Menor — mais rápido de compartilhar por email ou mensagens                          | Maior — mantém todos os detalhes da imagem                          |
| **Transparência**      | Não suportado                                                                       | Suportado                                                           |
| **Qualidade**          | Ligeiramente comprimido                                                             | Sem perdas — sem redução de qualidade                               |

<Tip>
  Se estiver colando seu design em um slide deck ou enviando uma visualização rápida para um cliente, JPG é geralmente a escolha correta. Se precisar de bordas nítidas ou de um fundo transparente — por exemplo, para sobrepor o design em outra imagem — use PNG.
</Tip>

## Exportar código

Além de imagens, o botão **Code** exporta uma tela como código React + Tailwind — copie um trecho ou faça download do pacote completo como ZIP. Os pacotes são independentes: as imagens usadas no design (incluindo as que você anexou no painel de chat) são incluídas em uma pasta `public/assets/` com o código referenciando-as por caminho local, para que a exportação funcione como está.

Os arquivos baixados — imagens e pacotes de código — são nomeados de acordo com a tela a que pertencem (recorrendo ao nome do arquivo se a tela não tiver nome), o que mantém as exportações fáceis de identificar quando você está trabalhando com muitas telas.

<Note>
  Se precisar levar seu design para um fluxo de edição de vetores, copie-o diretamente para o Figma. Veja [Copiar designs do Flowstep para o Figma instantaneamente](/pt-BR/figma-integration).
</Note>