Formatos e configurações de exportação

O Figma Design é compatível com uma variedade de formatos e configurações de exportação. Use este artigo para determinar qual formato melhor se encaixa às suas necessidades. Quando for exportar seus designs, confira como Exportar a partir do Figma para obter instruções sobre como aplicar essas configurações.

Formatos de exportação

PNG (Portable Network Graphics)

PNG é um formato de elemento gráfico de varredura compatível com compactação sem perdas, transparência e contraste de cor. A compactação sem perdas mantém a qualidade original da imagem e a legibilidade do texto durante a exportação. Lembre-se de que exportar como PNG resultará em um arquivo mais pesado do que exportar como JPG.

Os PNGs são mais usados para imagens que envolvem transparência e gráficos que contêm imagens e texto, como logotipos, quadros ou ilustrações.

As seguintes configurações de exportação estão disponíveis para PNG:

• Ignorar camadas de sobreposição
• Incluir caixa delimitadora (somente para camadas de textos)

JPG (Joint Photographic Group)

JPG (ou JPEG) é um formato de arquivo de imagem de varredura com compactação com perdas. A compactação com perdas reduz o tamanho do arquivo ao remover permanentemente os dados do arquivo, o que resulta em arquivos menores, mas também na redução da qualidade da imagem.

Na maioria dos casos, a qualidade do JPG é satisfatória para uso na Web e diminuirá o tempo de carregamento por causa do tamanho reduzido. Os JPGs também podem ser usados para design de impressão e fotografia.

Lembre-se de que JPGs não são compatíveis com transparência e compactação, podendo impactar a legibilidade dos textos. Se a sua imagem possui texto ou transparência, exporte como PNG ou SVG.

As seguintes configurações de exportação estão disponíveis para JPG:

• Ignorar camadas de sobreposição
• Incluir caixa delimitadora (somente para camadas de textos)

SVG (Scalable Vector Graphics)

SVG é um elemento gráfico vetorial com base em XML. São formas baseadas em valores numéricos e coordenadas que você pode renderizar em qualquer tela. Como os SVGs não dependem de pixels, eles podem escalonar para qualquer tamanho sem impactar a qualidade da imagem. Também são compatíveis com transparência.

É possível representar SVGs em scripts ou códigos, o que faz deles uma escolha popular para designs digitais. Use SVGs para logotipos, ícones ou ilustrações que planeje incluir em seus designs responsivos.

As seguintes configurações de exportação estão disponíveis para SVG:

• Ignorar camadas de sobreposição
• Incluir caixa delimitadora (somente para camadas de textos)
• Incluir atributo “ID”
• Contornar texto
• Simplificar traço

PDF (Portable Document Format)

Os PDFs permitem que você compartilhe layouts complexos e interativos. Eles incluem texto, fontes, gráfico vetorial e imagens em um layout fixo. Também permitem que você renderize e manipule elementos individuais de um design em qualquer sistema, o que faz deles um formato versátil, já que é independente de software, hardware ou sistema operacional.

O Xcode, linguagem de desenvolvimento para dispositivos móveis da Apple, é compatível com PDF. Isso o torna uma ferramenta valiosa na construção de aplicativos para iOS. Use PDFs no Figma para exportar conjuntos de slides ou compartilhar ativos para desenvolvimento iOS. Também é possível o uso para mockups de design de impressão. O Figma exporta conteúdo para arquivos PDF versão 1.7.

O Figma exporta texto como glifos, o que significa que não será possível editar quaisquer textos no PDF final. Você ainda pode selecionar e copiar texto ao visualizar o PDF no navegador ou outro software compatível.

Configurações de exportação

As configurações de exportação permitem que você controle ainda mais como o Figma exporta seus designs.

Escala

Escolha as opções de escala padrão ou insira um tamanho personalizado no campo. Para personalizar o tamanho, insira um número em uma das seguintes opções:

• Adicione x depois do valor para usá-lo como multiplicador
• Adicione w depois do valor para definir uma largura fixa
• Adicione h depois do valor para definir uma altura fixa

Se estiver exportando conteúdo para telas com alta densidade (como tela retina), considere exportar em uma escala maior para aumentar a resolução do ativo.

Por padrão, os ativos exportados como imagens a partir do Figma têm um DPI de 72. Para calcular o DPI de uma imagem exportada em escala, multiplique 72 pela escala escolhida. Por exemplo, imagens exportadas em 2x tem um DPI de 144. Imagens exportadas em 3x tem um DPI de 216.

Existem algumas restrições de formatos em relação ao dimensionamento:

• O Figma é compatível somente com exportações para SVGs em 1x. Você ainda pode dimensionar um SVG ajustando os valores no código ou usando variáveis de largura e altura. Por exemplo: <img src="image.svg" width="50px">.
• O Figma é compatível somente com exportações de PDF em 1x. Para exportar ativos em uma escala diferente, será necessário escolher outro formato.

Sufixo

Esta é uma configuração opcional. Qualquer coisa inserida no campo Sufixo será adicionada ao nome do arquivo quando ele for exportado. Use essa configuração para ajudar a organizar os ativos exportados sem precisar modificar o nome da camada. Por exemplo, se estiver exportando uma estrutura identificada como “HomePage” com formato PNG e inserir “draft” nesse campo, o nome do arquivo exportado será “HomePagedraft.png”.

Configurações de exportação específicas para o formato

Alguns formatos são compatíveis com outras configurações de exportação. Clique em na seção Exportação do painel de propriedades para visualizar e ajustar essas configurações.

Esta tabela mostra quais configurações estão disponíveis para cada formato:

Formato	Ignorar camadas de sobreposição	Incluir caixa delimitadora	Incluir atributo “ID”	Contornar texto	Simplificar traço
PNG	✓	✓	✕	✕	✕
JPG	✓	✓	✕	✕	✕
SVG	✓	✓	✓	✓	✓
PDF	✕	✕	✕	✕	✕

Perfil de cor

Por padrão, o Figma exporta ativos usando o perfil de cor do arquivo. Por exemplo, se um arquivo for definido para Display P3, os ativos serão exportados como Display P3.

Contudo, você pode escolher um perfil de cores diferente ao exportar:

1. Clique em Configurações de exportação.
2. Abra o menu suspenso de perfil de cores e escolha um perfil de cores.
   • Mesmo do arquivo (perfil de cor)
   • sRGB
   • Display P3

Saiba mais sobre perfis de cores e gerenciamento de cores →

Ignorar camadas de sobreposição

Essa configuração está habilitada por padrão. Quando habilitada, o Figma apenas inclui as camadas selecionadas na exportação. Quaisquer outros objetos que façam interseção ou se sobreponham ao objeto selecionado não afetarão a exportação. Quando desabilitada, o Figma inclui quaisquer camadas que façam interseção com a camada ou grupo selecionado.

Incluir a caixa delimitadora

Disponível somente para camadas de texto. Quando habilitada, o Figma determina o tamanho da exportação pela caixa delimitadora da camada do texto. Se a caixa delimitadora for maior do que o texto, o Figma incluirá um espaço vazio na exportação. Se for menor, o Figma cortará e descartará as porções de texto que ficarem fora da caixa delimitadora.

Quando desabilitada, o Figma determina o tamanho da exportação com base nas dimensões do próprio texto. O Figma cortará e descartará qualquer espaço entre os caracteres e a caixa delimitadora.

Incluir atributo "ID"

Quando habilitada, o Figma adiciona uma tag "ID" aos metadados do SVG. Isso permite que o JavaScript acesse facilmente o elemento <svg> e que também possa ser usado para apontar para um seletor de ID específico em uma folha de estilo. O Figma baseia o "ID" no nome do objeto no painel Camadas.

Contornar texto

Esta configuração é habilitada por padrão se pelo menos uma camada de texto estiver selecionada. O Figma converte quaisquer camadas de texto em glifos para manter a aparência. O texto não será editável após a exportação se essa configuração estiver habilitada. Se precisar manter a editabilidade, desabilite esta configuração.

Simplificar traço

Esta configuração é habilitada por padrão se o objeto selecionado for uma rede de vetores (não uma forma básica) e incluir um traço interno ou externo. No Figma, é possível aplicar traços internos, centrais ou externos em um objeto. O SVG é compatível somente com traços centrais. Essa configuração garante que outros sistemas renderizem corretamente traços internos e externos.