Como Tornar um Fundo Transparente no Figma (Guia 2026)

O Figma foi criado para design de interfaces, não para edição de fotos, então "remover o fundo" significa algo diferente ali do que em uma ferramenta de fotos. Se você só precisa que o fundo do seu frame ou área de trabalho desapareça na exportação, o Figma faz isso nativamente. Mas se você tem uma foto com um fundo carregado - uma foto de produto, um retrato, uma imagem inserida - o Figma não tem uma forma nativa de detectar o assunto e recortá-lo; você precisa de um plugin, muita paciência com a ferramenta Pena, ou um removedor de fundo dedicado antes mesmo de a imagem chegar ao seu arquivo.

Por que fundos transparentes importam em projetos no Figma

PNGs transparentes permitem sobrepor um logo, foto de produto ou ícone sobre qualquer cor, mockup de captura de tela ou gradiente sem uma caixa visível ao redor. Isso importa para kits de UI, apresentações de marketing, capturas de tela para lojas de apps, e qualquer sistema de design onde o mesmo recurso precise aparecer em múltiplos fundos.

Método 1: Exportar um frame com fundo transparente

Passo 1: Selecione seu frame, grupo ou componente no Figma.

Passo 2: No painel à direita, remova ou oculte o preenchimento de fundo do frame (clique na amostra de cor e exclua, ou desative sua visibilidade).

Passo 3: Abra a seção Export na parte inferior do painel direito, escolha PNG e exporte. O PNG suporta transparência alfa, então onde o preenchimento de fundo foi removido será exportado como transparente em vez de branco.

Isso funciona bem para logos, ícones e mockups de UI onde o "fundo" é apenas uma cor de preenchimento adicionada no Figma, não uma cena fotografada.

Método 2: Remover o fundo de uma foto inserida

Se a necessidade de transparência é sobre uma foto - uma foto de produto, um retrato, a captura de um objeto físico - as configurações de exportação do Figma não ajudam, porque o fundo não é um preenchimento do Figma, é parte dos pixels da própria imagem. Dentro do Figma, suas opções reais são um plugin da comunidade que chama uma API externa, ou mascarar manualmente o assunto com a ferramenta Pena, o que é lento e raramente produz bordas limpas ao redor de cabelo, pelos ou detalhes finos.

O caminho mais rápido: remova antes de importar

O fluxo de trabalho mais simples para a maioria dos designers é remover o fundo da foto primeiro e depois arrastar o PNG transparente resultante direto para o Figma. Envie a imagem para o nobackground, deixe a IA no dispositivo recortar o assunto em segundos, baixe o PNG e posicione-o na sua tela - sem permissões de plugin, sem conta, e sem que nenhuma imagem saia do seu navegador no processo.

Dicas para exportações transparentes limpas

• Exporte em escala 2x ou 3x para qualquer coisa usada em uma tela de alta densidade, reduzindo a escala depois se necessário - isso evita bordas suaves e borradas ao redor do recorte.
• Visualize PNGs transparentes sobre um padrão quadriculado ou fundo escuro antes de entregá-los, já que um halo cinza claro na borda é fácil de não notar sobre uma tela branca lisa.
• Se for colocar o mesmo recorte em vários mockups, mantenha o PNG transparente original como um recurso compartilhado na sua biblioteca do Figma em vez de exportá-lo novamente de cada frame.

Perguntas sobre transparência no Figma

O Figma tem um removedor de fundo integrado? Não. O Figma pode exportar frames ou formas com preenchimento transparente, mas não consegue detectar e recortar automaticamente um assunto de uma foto sem um plugin ou ferramenta externa.

Um PNG transparente do nobackground funciona direto no Figma? Sim. Basta arrastar e soltar o PNG baixado na sua tela como qualquer outro recurso de imagem; a transparência é preservada.

Por que sua exportação do Figma ainda tem fundo branco

Esse é o problema de transparência mais comum no Figma, e quase sempre se resume a uma de quatro causas. Primeira, o frame ainda tem um preenchimento: em alguns arquivos mais antigos, esconder o preenchimento com o ícone de olho o mantém na exportação, então exclua o preenchimento em vez de apenas desativá-lo. Segunda, você exportou JPG em vez de PNG; o JPG não tem canal alfa e vai achatar a transparência para branco todas as vezes. Terceira, existe um segundo frame ou um retângulo branco atrás do seu conteúdo que você esqueceu, o que é fácil de não perceber dentro de um Auto Layout muito aninhado. Quarta, a própria imagem tem fundo branco gravado nos pixels, e nesse caso nada no painel de exportação do Figma vai ajudar, porque o Figma está exportando fielmente exatamente o que está ali.

Uma forma rápida de diagnosticar isso é mudar temporariamente a cor da tela da página para um magenta bem forte. Tudo que for realmente transparente vai mostrar magenta; tudo que for branco continua branco e se revela na hora.

Preenchimentos de imagem versus imagens posicionadas

O Figma trata uma foto como preenchimento de uma forma, e não como um objeto separado, o que surpreende quem vem do Photoshop. Essa distinção importa aqui: como a foto é um preenchimento, você não consegue apagar parte dela, e a ferramenta Caneta não corta dentro dela. O que você pode fazer é desenhar uma forma vetorial e usá-la como máscara, o que recorta o preenchimento naquela forma. Isso funciona bem para recortes geométricos, como um card de produto com cantos arredondados, e mal para contornos orgânicos, como uma pessoa, porque você acaba desenhando à mão cada curva da silhueta.

Se o seu sujeito tem cabelo, pelo, bordas esfumadas ou qualquer região semitransparente, uma máscara vetorial é estruturalmente a ferramenta errada. Um caminho vetorial é um limite duro; cabelo precisa de alfa parcial, ou seja, pixels com 40% de opacidade. É por isso que a resposta prática é trazer para dentro uma imagem que já tenha canal alfa, em vez de tentar criar um dentro do Figma.

Como manter recortes nítidos em componentes e variantes

Quando um PNG transparente passa a fazer parte de um componente, alguns hábitos economizam muito retrabalho. Coloque a imagem dentro do próprio frame com o preenchimento definido como transparente, para que o componente possa ser redimensionado sem que o preenchimento da imagem seja recortado de forma inesperada. Prefira Fit em vez de Fill para recortes, porque o Fill recorta até o frame e vai cortar sem cerimônia o topo de uma cabeça quando alguém redimensionar uma instância. Se o mesmo recorte aparece em vários tamanhos ao longo de um design system, publique-o uma vez como componente e use instâncias, em vez de colar o PNG várias vezes; assim, uma única reexportação atualiza todas as telas de uma vez.

Configurações de exportação que quebram a transparência sem avisar

Além da armadilha do JPG, três configurações causam problemas evitáveis. Exportar em 1x para um mockup retina produz bordas sem nitidez que parecem um recorte ruim quando na verdade é só uma exportação em escala insuficiente, então use 2x ou 3x para qualquer coisa que vá ser vista em uma tela de alta densidade. Aplicar um desfoque de fundo ou de camada a um frame força o Figma a rasterizar uma área maior e pode introduzir um limite retangular tênue no PNG exportado. E uma sombra projetada aplicada no nível do frame em vez do objeto vai ser renderizada como a sombra do retângulo, não da silhueta do recorte, o que entrega na hora que o material foi montado e não fotografado.

PNG, SVG e WebP para entrega

Para um recorte fotográfico, PNG é a exportação correta em quase todos os casos: é o único formato raster amplamente suportado que preserva alfa por pixel sem dúvidas de compatibilidade. SVG só faz sentido se a arte for realmente vetorial, como um logo desenhado com formas; exportar uma foto como SVG apenas embute os dados raster dentro de um invólucro SVG e deixa o arquivo maior sem nenhum ganho. O WebP gera arquivos bem menores com a transparência intacta e é uma boa escolha para materiais de produção na web, mas entregue PNG para os colegas e deixe a conversão para WebP como uma etapa de build, já que algumas ferramentas de design e de impressão ainda lidam com WebP de forma inconsistente.

Peso de arquivo e bibliotecas compartilhadas

PNGs transparentes são maiores que o JPG equivalente porque o canal alfa adiciona dados e a compressão PNG é sem perdas. Em um arquivo grande do Figma com dezenas de recortes em resolução total, isso aparece como lentidão no carregamento do arquivo para todo o time. A correção prática é guardar um master de alta resolução de cada recorte fora do arquivo de trabalho e colocar no Figma uma versão de tamanho razoável, algo em torno de duas vezes o maior tamanho de exibição de que você precisa. Você mantém a qualidade onde ela importa e para de pagar por ela a cada abertura de arquivo.