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

# Transferir desenhos do Flowstep como ficheiros de imagem JPG ou PNG

> O Flowstep permite exportar desenhos como JPG ou PNG. Saiba qual o formato mais adequado para o seu caso de uso e como transferir os seus ecrãs em alguns 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 partilhar ou entregar um desenho, o Flowstep permite exportá-lo como uma imagem estática — JPG ou PNG. Ambos os formatos são amplamente suportados em ferramentas de design, software de apresentação e browsers, pelo que pode levar os seus desenhos gerados por IA para qualquer lugar.

## Como exportar o seu desenho

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

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

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

  <Step title="Transferir o ficheiro">
    Confirme a sua seleção e transfira a imagem exportada para o 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 é o formato que deve utilizar?

| | JPG | PNG |
| - | - | - |
| **Melhor para** | Partilhar pré-visualizações, apresentações, revisões com stakeholders | Desenhos com fundos transparentes, entregas de alta fidelidade |
| **Tamanho do ficheiro** | Menor — mais rápido de partilhar por email ou mensagem | Maior — mantém todo o detalhe da imagem |
| **Transparência** | Não suportada | Suportada |
| **Qualidade** | Ligeiramente comprimida | Sem perda — sem redução de qualidade |

<Tip>
  Se estiver a colar o seu desenho numa apresentação ou a enviar uma pré-visualização rápida para um cliente, JPG é normalmente a escolha certa. Se necessita de bordas nítidas ou de um fundo transparente — por exemplo, para sobrepor o desenho em outra imagem — utilize PNG.
</Tip>

## Código de exportação

Para além de imagens, o botão **Code** exporta o seu desenho como código React + Tailwind — copie um fragmento ou transfira o pacote completo como ZIP. Pode exportar um único ecrã, vários ecrãs selecionados ou um ficheiro inteiro de uma só vez. Quando exporta mais do que um ecrã, cada um torna-se o seu próprio ficheiro de componente e qualquer navegação que tenha configurado entre ecrãs é integrada no código gerado, pelo que a aplicação exportada é clicável de ponta a ponta. Os pacotes são independentes: as imagens utilizadas no desenho (incluindo as que anexou no painel de chat) estão incluídas numa pasta `public/assets/` com o código a referenciá-las por caminho local, pelo que a exportação funciona como está.

Os ficheiros transferidos — quer sejam imagens quer pacotes de código — são nomeados de acordo com o ecrã a que pertencem (recuando para o nome do ficheiro se o ecrã não tiver nome), o que torna as exportações fáceis de identificar quando está a trabalhar com muitos ecrãs.

## Enviar desenhos para o seu agente de programação

Em vez de transferir um ficheiro, pode entregar um desenho diretamente a um assistente de codificação de IA. Clique em **Send to your coding agent** na barra de ferramentas — ou abra o diálogo de exportação e escolha a mesma opção — para copiar um prompt pronto a colar para o seu agente:

> O seu agente lê estes ecrãs via MCP e constrói-os no seu repositório. Cole este prompt no Claude, Cursor ou no seu agente preferido.

O prompt diz ao seu agente para buscar os ecrãs através do servidor MCP do Flowstep e reconstruí-los na sua base de código. Pode entregar um único ecrã, vários ecrãs selecionados ou um ficheiro inteiro de uma só vez — o prompt adapta-se ao que selecionou.

Isto utiliza o servidor MCP do Flowstep, pelo que tem de conectar um cliente MCP primeiro. Veja a [descrição geral do servidor MCP](/pt/mcp/overview) para os clientes suportados e o [Guia de Iniciação](/pt/mcp/quickstart) para conectar um.

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.