Exportar ativos de design

Você pode exportar ativos como imagens em bitmap, ícones e padrões de plano de fundo, texto e pranchetas do XD como PNG, SVG, JPG e PDF. Esses ativos exportados são otimizados para implantação no iOS, no Android ou em aplicativos da Web.

Se você estiver usando o XD no macOS, também pode importar seus designs em integrações de terceiros como Zeplin, Avocode, Sympli, Kite Compositor e Protopie.

Selecionar ativos e pranchetas para exportação

• Lote: você pode exportar ativos em lote selecionados usando a opção Marcar para exportação no Inspetor de propriedades. Para exportar vários objetos como um único ativo, agrupe os objetos antes de exportá-los.
• Selecionado: você pode selecionar e exportar ativos específicos.
• Todas as pranchetas: você pode selecionar as pranchetas para exportação em um projeto de design.
• After Effects: você pode selecionar o ativo para exportação para o After Effects.

Marcar camadas para exportação

As camadas marcadas para exportação são incluídas como ativos na especificação de design. Para marcar ativos para exportação, selecione qualquer camada na tela e use uma das seguintes opções: 

• Clique com o botão direito na camada da tela e escolha Marcar para exportação no suspenso. 
• Abra o painel Camadas e clique no ícone de Marcar para exportação    ao lado do nome da camada. 

Exportar ativos para diferentes formatos de arquivo

Ativos são arquivos de design requeridos pelos desenvolvedores para recriar o que foi projetado, usando HTML/CSS/JS em um site ou em linguagens nativas como Swift ou Java em aplicativos iOS e Android.

Em geral, os ativos mais comuns são imagens bitmap, ícones e padrões de fundo que você pode exportar nestes formatos: PNG, SVG, PDF e JPG. 

Com o XD 57, a Adobe aprimorou a funcionalidade de gerenciamento de cores no XD, permitindo exportar ativos JPG, PNG e PDF com renderizações de cores consistentes. Para isso, mude o perfil de cores do documento para sRGB. Se você tentar exportar um ativo de um documento com um perfil de cores não gerenciado, receberá uma mensagem informando que pode haver uma discrepância de cores para as partes interessadas. Para obter mais informações, consulte Gerenciamento de cores.

Exportar como PNG

Escolha um tamanho de exportação comum ou específico da plataforma ou defina um tamanho de exportação personalizado:

• Tamanho de exportação predefinido ou personalizado: escolha um dos tamanhos de exportação predefinidos: 0,5 x, 1 x, 1,5 x, 2 x, 3 x, 4x. Você também pode inserir tamanhos de exportação personalizados a partir de 0,1 x a 10 x.
• Web: os ativos são exportados com as resoluções de 1x e 2x.
• iOS - Os ativos são exportados em resoluções 1x, 2x e 3x.
  
• Android: os ativos de design são otimizados e exportados para as seguintes densidades de tela no Android:
  • ldpi: baixa densidade (75%)
  • mdpi: densidade média (100%)
  • hdpi: alta densidade (150%)
  • xhdpi: densidade extra-alta (200%)
  • xxhdpi: densidade extra-extra-alta (300%)
  • xxxhdpi: densidade extra-extra-extra-alta (400%)

Exportar como SVG

Ao exportar objetos ou pranchetas como SVG, você pode definir as seguintes opções:

Estilo visual:

• Atributos de apresentação: utiliza atributos XML separados para propriedades de estilo individuais em cada tag SVG. Esse formato é necessário para usar ativos SVG no Android Studio.
• CSS interno: usa um único estilo de tag com classes CSS e compartilha as configurações de estilo entre objetos com os mesmos estilos gerando tamanhos de arquivo menores.

Imagens incorporadas ou vinculadas:

• Incorporar: a imagem bitmap é codificada no arquivo SVG.
• Vincular: a imagem bitmap é armazenada separadamente com uma referência ao arquivo SVG.

Exportar como PDF

É possível exportar ativos como PDF das seguintes maneiras:

• Arquivo PDF único: Você pode selecionar várias pranchetas ou ativos e exportá-los como um único arquivo PDF. 
• Vários arquivos PDF: você pode selecionar várias pranchetas ou ativos e exportá-los como arquivos PDF individuais. Arquivos PDF separados são criados para cada um dos ativos ou pranchetas selecionados.

Exportar como JPG

Ao exportar ativos como JPG, você pode definir as seguintes opções:

Qualidade: escolha 20%, 40%, 60%, 80% ou 100%.

Tamanho de exportação:

• Tamanho de exportação predefinido ou personalizado: escolha um dos tamanhos de exportação predefinidos: 0,5 x, 1 x, 1,5 x, 2 x, 3 x, 4x. Você também pode inserir tamanhos de exportação personalizados a partir de 0,1 x a 10 x.
• Web: os ativos são exportados com as resoluções de 1x e 2x.

JPGs não são convertidos em PDFs. Imagens rasterizadas são importadas como imagens e, portanto, parecem se transformar em PDFs.

Exportar ativos para aplicativos de terceiros

Você também pode importar seus designs do XD em outros aplicativos, como Zeplin, Avocode, Sympli, Kite Compositor e Protopie. 

Aqui está um exemplo de fluxo de trabalho do XD no macOS com Zeplin:

Solução de problemas

Você está enfrentando problemas para exportar ativos? Para corrigir problemas relacionados à exportação, consulte Por que não consigo importar ou exportar arquivos no Adobe XD?

Tem alguma dúvida ou sugestão?