Publicado em 8 de outubro de 2026
- Use a opção ‘Export’ nas propriedades do objeto, não o atalho de tela, para garantir escala vetorial correta.
- Sempre nomeie os arquivos com prefixos de contexto (ex: btn_primary) antes de exportar para evitar bagunça no Dev Mode.
- Para ícones complexos, prefira SVG com ‘Outline stroke’ ativado para manter a edição possível no código.
- Organize tudo em uma Page chamada ‘Assets for Export’ dentro do arquivo para separar o design vivo da produção final.
- Verifique a transparência fundo branco vs transparente ao enviar PNGs para desenvolvedores que usam dark mode.
Se você já perdeu tempo corrigindo um botão desalinhado ou reenviando um ícone pixelado porque o desenvolvedor pediu “mas eu preciso dele em vetor”, saiba que o problema raramente está no design em si. Ele está quase sempre na etapa final: a hora de exportar assets no figma. Muita gente trata essa fase como um detalhe técnico chato, mas ela é o que separa um projeto entregue rápido de um projeto cheio de idas e vindas.
A verdade incômoda é que o Figma é incrivelmente flexível, e isso pode ser uma armadilha. Se você exporta do jeito errado, perde a definição dos traços, ignora sombras importantes ou envia arquivos gigantes que travam o carregamento do site. Neste tutorial, vamos destrinchar exatamente como configurar suas exportações para que elas cheguem perfeitas no outro lado — seja para um desenvolvedor Front-end, para uso em redes sociais ou para impressão.
O Conceito Errado Sobre Exportação
Antes de abrir o software, entenda um erro comum: muitas pessoas acham que “exportar” é só tirar uma foto da tela. Não é. No Figma, exportar significa renderizar um elemento específico usando as regras de visualização daquela ferramenta. Isso implica respeitar camadas, máscaras, efeitos (blurs, sombras) e, crucialmente, a escala de resolução escolhida.
Quando você faz o download manual de tudo, cria inconsistências. Quando usa a função nativa de exportação, o Figma calcula matematicamente como aquele grupo de vetores deve se comportar em diferentes densidades de tela (1x, 2x, 3x). Para quem está começando, vale conferir nosso artigo sobre como configurar e usar o Figma em 2026, pois muitos erros de exportação nascem de configurações básicas mal feitas lá no início do fluxo.
Passo 1: Prepare Sua Página de Assets
O primeiro segredo para um processo limpo não é técnico, é organizacional. Crie uma página dedicada chamada “_EXPORTAS” ou “Dev Handoff”.
Dentro dela, duplique todos os elementos que precisam ser entregues: logotipos, ícones individuais, ilustrações, botões isolados e banners. Não deixe nada escondido atrás de outros frames nessa página. O motivo? Se você tenta exportar algo que está sobreposto ou mascarado de forma complexa, o resultado final costuma cortar partes indesejadas. Isolar o asset garante que ele será exportado sozinho, com fundo transparente (se necessário) e nas dimensões exatas.
Passo 2: Selecione o Elemento Correto
Clique no item que deseja extrair. Preste atenção na hierarquia de seleção no painel esquerdo (Layers).
- Frame: Use quando quiser exportar uma seção inteira da interface (ex: um card de produto completo).
- Group: Útil para conjuntos de vetores que devem ficar juntos, mas sem um fundo fixo.
- Component Instance: A melhor escolha para botões e ícones padronizados. Ao selecionar a instância, você exporta o estado atual daquele componente.
- Vetor Individual: Apenas se for um logo simplificado ou um caminho único.
Repare bem nesse detalhe: nunca selecione múltiplas camadas soltas (Shift + Click em coisas aleatórias) e tente exportar. O Figma vai criar um bounding box (caixa delimitadora) estranho que pode incluir espaços vazios desnecessários, gerando imagens com margens invisíveis que quebram o layout no código.
Passo 3: Configure o Painel de Exportação
Com o elemento selecionado, olhe para o painel direito (Properties). Role até o final, abaixo de “Stroke”, “Fill” e “Effects”, onde diz Export.
- Clique no sinal de + ao lado de “Export”.
- Na caixa que aparecerá, defina o formato inicial. Em 2026, o padrão ainda é uma tríade essencial:
- PNG: Para fotos e imagens com fundos complexos ou transparência básica.
- SVG: O rei para ícones, logos e formas geométricas simples. É leve e escalável infinitamente.
- PDF: Usado apenas se você precisa entregar documentos vetoriais para impressão ou revisão gráfica offline.
Em seguida, ajuste a Escala. Para web moderna, use “@1x” para telas padrão, mas marque também “@2x” e “@3x” para dispositivos Retina (celulares de última geração). O Figma permite adicionar múltiplas escalas na mesma configuração de exportação clicando no menu dropdown onde aparece “PNG” -> “Scale”.
Passo 4: Limpeza de Nomenclatura
Este é o passo que economiza mais horas depois. Antes de clicar em qualquer botão, renomeie o asset corretamente.
Não use nomes automáticos como “Rectangle 45” ou “Frame 12”. Use convenções que desenvolvedores entendem:
icon_home.svg
btn_submit_primary.png
banner_summer_sale.jpg
tile_bg_pattern.pngSe o seu time usa React, Vue ou Angular, pergunte qual a regra de nomenclatura eles preferem (camelCase, snake_case ou kebab-case). Geralmente, para arquivos de imagem estáticos, kebab-case (tudo minúsculo com hífen) funciona bem para URLs. Ao exportar pelo painel “Export”, certifique-se de que o campo de texto acima do botão “Export [Nome]” reflita esse nome limpo. Isso evita que você tenha que renomear dezenas de arquivos manualmente no Finder ou Windows Explorer depois.
Passo 5: Tratamento de Efeitos e Sombras
Aqui mora o perigo visual. Se o seu elemento tem sombras (Drop Shadow), Blur ou Glow, a exportação padrão pode cortá-las se a caixa de limite não estiver configurada para “Clip Content”.
No momento de escolher o formato, note que:
- SVG não suporta sombras nativamente de forma eficiente: Ele converte sombras em filtros pesados que podem deixar o arquivo lento. Para ícones com sombra, prefira PNG @3x ou peça ao dev para criar a sombra via CSS (
box-shadow), mantendo o SVG limpo. - Transparência: Certifique-se de que o fundo está realmente transparente. Às vezes, existe um retângulo branco oculto atrás do logo. Dica profissional: crie um frame pequeno (8px x 8px) quadriculado cinza e branco e coloque-o atrás do seu asset na aba de exportação. Se aparecer cinza ou branco sólido, sua transparência falhou.
Passo 6: Executando a Exportação em Lote
Raramente você vai querer exportar um por um. Na barra superior direita do canvas, você verá uma lista de itens marcados para exportação.
- Clique no botão “Export” principal.
- Uma janela modal abrirá listando todos os assets configurados.
- Você pode revisar cada formato ali mesmo antes de confirmar.
- Clique em “Export [X] Items”.
O Figma baixa automaticamente os arquivos, geralmente em uma pasta ZIP organizada ou individualmente, dependendo das suas configurações de navegador e extensões instaladas. Essa abordagem em lote mantém a consistência de estilo entre todos os ativos entregues.
Passo 7: Verificação Final no Dev Mode
Em 2026, o Dev Mode é a ponte oficial. Após baixar seus assets, suba-os para o repositório do time ou anexe-os na conversa do ticket (Jira/Trello/Asana).
Mas faça um teste rápido: abra um dos SVGs baixados em um editor de código ou navegador. Ele abre instantaneamente? As cores estão certas? Se abrir muito lento, provavelmente havia caminhos vetoriais excessivos ou sombras embutidas. Volte ao Passo 4 e simplifique.
Formatos Recomendados por Tipo de Asset
| Tipo de Elemento | Formato Ideal | Escala Sugerida | Observação Crítica |
|---|---|---|---|
| Ícones UI Simples | SVG | N/A (Vetor) | Ativar “Outline Stroke” se tiver bordas grossas. |
| Logotipos | SVG / PNG | @1x / @2x | Envie ambos: SVG para web, PNG para docs/PPT. |
| Fotos / Avatares | JPG / WebP | @1x | WebP economiza ~30% de tamanho vs JPG. |
| Banners Promocionais | PNG / JPG | @2x | Cuidado com texto pequeno; pode borrar. |
| Ilustrações Complexas | SVG | N/A | Se pesado, converta para PNG de alta qualidade. |
Erros Comuns Que Devem Evitar
Baseado em anos acompanhando fluxos de handoff, três situações se repetem:
- Esquecer de converter contornos: Textos exportados como SVG às vezes dependem da fonte instalada na máquina do usuário final. Sempre clique no texto > Right Click > Convert to Outline antes de salvar como SVG final, caso contrário, o nome muda para outro tipo de letra no navegador do cliente.
- Exportar grupos inteiros: Um grupo com 10 ícones virará uma imagem gigante com 9 espaços vazios. Explode o grupo (Ctrl+Cmd+G) e configure a exportação individualmente para cada filho.
- Ignorar o “Figma to Code”: Plugins como SvgOz ou Figma to HTML ajudam a otimizar o SVG antes da exportação final. Vale testar se seu time usa essas ferramentas.
Na minha visão, o designer sênior se diferencia do júnior não pela criatividade bruta, mas pela previsibilidade técnica. Entregar um asset que não precisa de explicação é a maior prova de maturidade num projeto. Por isso, siga rigorosamente esses passos.
Integração com Outras Ferramentas
Embora o foco seja o Figma, lembre-se que esses assets seguirão viagem. Se você usa Canva para redes sociais secundárias, baixe nossos guias comparativos. Nossa análise sobre Adobe Express vs Canva Pro mostra como manter identidade visual consistente mesmo fora do ecossistema de design puro.
Da mesma forma, entender o panorama geral ajuda. Recomendamos consultar nosso Guia Completo de Ferramentas de Criação de Conteúdo 2026 para ver como o export do Figma encaixa no pipeline editorial total, desde a criação até a publicação.
Próximo Passo Imediato
Agora que você domina a teoria e os cliques, abra seu último projeto ativo. Pegue os 5 principais componentes visuais deles e refaça a exportação seguindo estritamente os passos 1 ao 4. Compare o tamanho dos novos arquivos com os antigos e veja quantos quilobytes você economizou.
Se notar ganho de eficiência ou peso reduzido, salve esta checklist nos favoritos do seu browser ou imprima e cole perto do monitor. A consistência vence o talento avulso na hora de escalar projetos criativos.
Perguntas frequentes
Qual a diferença entre exportar como PNG e SVG?
PNG é uma imagem rasterizada (pixels), ideal para fotos e complexidade de cor. SVG é vetorial (código), ideal para ícones e logos, pois pode ser redimensionado sem perda de qualidade e editado no código.
Como resolver o problema de sombras cortadas ao exportar?
Certifique-se de que o Frame ou Group selecionado engloba toda a área da sombra, não apenas o objeto central. Você pode ajustar manualmente a caixa de limite do frame para garantir que o efeito caia dentro da área de corte.
Preciso instalar plugins para exportar assets no Figma?
Não, o recurso de exportação nativo é suficiente para 90% dos casos. Plugins como ‘Avocode’ ou ‘Zeplin’ são úteis para automatizar o handoff, mas não são obrigatórios para baixar os arquivos básicos.
Posso exportar assets de um protótipo interativo?
Sim, mas recomenda-se isolar os elementos finais numa página específica (‘Assets’) antes de exportar, pois protótipos têm muitas transições e estados que podem gerar arquivos redundantes ou confusos.
