Exportar ativos de design

Saiba como exportar ativos prontos para produção do Adobe XD para os formatos PNG, SVG, JPG e PDF.

Você pode exportar ativos como imagens em bitmap, ícones e padrões de plano de fundo, texto e pranchetas do XD para 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 Mac, também pode importar seus designs em integrações de terceiros como ZeplinAvocodeSympliKite CompositorProtopie.

Exportar ativos e pranchetas

Mac

Selecione um objeto ou uma prancheta, navegue até Arquivo > Exportar ou pressione Cmd + E.    

Windows

Selecione um objeto ou uma prancheta e navegue até Arquivo > Exportar.  

  • 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 menu 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 no iOS e em aplicativos Android.

Em geral, os ativos mais comuns são imagens em bitmap, ícones e padrões de plano de fundo que podem ser exportados para os seguintes formatos:

Arquivo PDF único: você pode selecionar várias pranchetas ou ativos e exportá-los como um único arquivo PDF. 

Arquivos PDF individuais: 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.

Ao exportar ativos como JPG, é possível definir o nível de qualidade do JPG exportado de acordo com suas necessidades. Escolha qualquer uma das opções de porcentagem na lista suspensa Qualidade e, em relação a Exportar para, selecione Design ou Web.

JPGs não são convertidos em PDFs; imagens rasterizadas são importadas como imagens e, portanto, parecem que são convertidas em PDFs.

Ao exportar objetos ou pranchetas como SVG, você pode definir o estilo visual como Atributos de apresentação ou CSS interno

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

Você pode salvá-los como 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.

Ao selecionar PNG, você pode optar por exportar os ativos nas seguintes plataformas:

  • Design: opção padrão em que seu ativo é exportado para PNG com resolução de 1x.
  • Web: os ativos são exportados com as resoluções de 1x e 2x.
  • iOS: os ativos são exportados com as resoluções de 1x, 2x e 3x.
    Como os tamanhos de prancheta padrão de vários dispositivos iOS esperam que você crie em 1x, se você usou os padrões, deixe sua exportação em 1x. No entanto, você também pode optar por criar em 2x, dobrando a largura e a altura da prancheta.

  • 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 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

  1. Selecione uma prancheta ou camada no arquivo XD e clique em Arquivo > Exportar > Zeplin.

    Se você tiver vários aplicativos integrados ao XD, o atalho de teclado (⌥⌘E) inicia a última integração usada.

    Exportação de ativos para Zeplin
    Exportação de ativos para Zeplin

  2. Clique em Importar. Para substituir telas existentes no Zeplin com o mesmo nome, selecione Substituir telas com o mesmo nome. O Zeplin a adiciona como uma nova versão da mesma tela, sem perder suas anotações.

    Se você está enfrentando problemas ao trabalhar com o Zeplin no XD, consulte este artigo para obter soluções.

Saiba mais

Assista a este tutorial para saber mais sobre como exportar ativos do XD.

Duração: 2 minutos.

Solução de problemas

Você está enfrentando problemas para exportar ativos? Leia este artigo para solucionar problemas relacionados a exportação.

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

Deseja que sua ferramenta de design favorita tenha mais fluxos de trabalho de exportação? Vote ou adicione sua solicitação na UserVoice do XD.

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Logotipo da Adobe

Fazer logon em sua conta