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

Você pode compartilhar ativos prontos para produção com os desenvolvedores para uso em sites ou aplicativos para dispositivos móveis. Os ativos de design podem ser exportados do XD para PNG, SVG, JPG e PDF e otimizados para implantação no iOS, Android ou na Web.

Você pode exportar ativos específicos ou texto, pranchetas específicas ou todas as pranchetas do projeto. Se estiver usando o XD no Mac, também poderá exportar ativos para outros aplicativos. Para obter mais informações, consulte Integração de terceiros.

Exportar ativos e pranchetas de design

  1. Para exportar os ativos de design no Mac, selecione Arquivo > Exportar. No Windows, clique no menu hambúrguer e clique em Exportar

    Se você tiver pranchetas selecionadas no painel Camadas, clique com o botão direito do mouse e selecione Exportar.

    As seguintes opções de exportação estão disponíveis:

    • Em lote: exporta ativos marcados com a opção Marcar para exportação.
    • Selecionado: exporta ativos selecionados.
    • Todas as pranchetas: exporta todas as pranchetas do design.

    Para saber como incluir ativos em especificações de design, consulte Exportar ativos de especificações de design

    Opções para exportar ativos e pranchetas

    Observação:

    Para exportar vários objetos como um único ativo, você deve agrupar os objetos antes de exportá-los.

  2. Selecione uma plataforma de destino (Web, iOS ou Android) e o formato de arquivo (PNG, SVG, JPG ou PDF).

    Para obter mais informações sobre as opções de exportação, consulte:

  3. Para salvar os arquivos de saída, especifique o diretório.

  4. Se solicitado, especifique a resolução na qual os ativos foram criados. Se você não tiver certeza sobre a resolução, deixe a configuração como padrão (1x).

  5. Clique em Exportar.

Exportar ativos de design para PNG

  1. Para exportar os ativos de design como PNG no Mac, selecione Arquivo > Exportar. No Windows, clique no menu hambúrguer e clique em Exportar

  2. Clique na lista suspensa ao lado da opção Formato e selecione PNG. O XD exporta todas as resoluções associadas para esse objeto.

  3. Selecione a plataforma para a qual deseja exportar - DesignWebiOS ou Android e clique em Exportar.

Opções de exportação ao exportar como PNG
Opções de exportação ao exportar como PNG

Design

Design é a 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

O iOS tem três tamanhos de exportação. 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.

Use o infográfico a seguir para entender como seus ativos de design são exportados para o iOS ao criá-los em 1x e 2x.

Exportar ativos como PNG para iOS
Exportar ativos como PNG para iOS

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%)

Use o infográfico a seguir para entender como seus ativos de design são exportados para o Android ao criá-los em diferentes resoluções.

Opções de exportação ao exportar como PNG para Android
Opções de exportação ao exportar como PNG para Android

Exportar ativos de design para SVG

  1. Para exportar os ativos de design como SVG no Mac, selecione Arquivo > Exportar. No Windows, clique no menu hambúrguer e clique em Exportar

  2. Clique na lista suspensa ao lado da opção Formato e selecione SVG.

  3. Defina as opções de estilo e salve-as como imagens incorporadas ou vinculadas.

    • Estilo: defina se as informações visuais de estilo serão armazenadas nas marcações SVG como Atributos de apresentação ou CSS interno. A opção padrão de estilo para SVG está definida como Atributos de apresentação, pois ela melhora a compatibilidade com ferramentas de desenvolvedor comuns, como o Android Studio.
      • 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.
      • CC interno: utiliza uma única tag style com classes CSS e compartilha as configurações de estilo entre objetos com o mesmo estilo, resultando em tamanhos de arquivo menores.

    Salvar imagens: você pode salvar como imagens incorporadas ou vinculadas.

    • Incorporar: a imagem bitmap é codificada no arquivo SVG.
    • Link: a imagem bitmap é armazenada separadamente com uma referência ao arquivo SVG. 
    Exportar ativos de design para SVG
    Exportar ativos de design para SVG
  4. Para otimizar seus ativos, selecione Otimizar tamanho do arquivo (Minify) no Mac ou Otimizado (Minify) em relação a Tamanho do arquivo no Windows.

Exportar ativos de design para JPG

  1. Para exportar os ativos de design como JPG no Mac, selecione Arquivo > Exportar. No Windows, clique no menu hambúrguer e clique em Exportar.

  2. Clique na lista suspensa ao lado da opção Formato e selecione JPG.

    Exportar ativos de design para JPG
    Exportar ativos de design para JPG
  3. Ao exportar ativos (como fotos) 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, escolha Design ou Web.

Exportar ativos de design para PDF

  1. Para exportar os ativos de design como PDF no Mac, selecione Arquivo > Exportar. No Windows, clique no menu hambúrguer e clique em Exportar.

  2. Clique na lista suspensa ao lado da opção Formato e selecione PDF. Você pode optar por exportá-los como um único arquivo PDF ou arquivos PDF individuais.

    Exportar ativos de design para PDF
    Exportar ativos de design para PDF
  3. Arquivo PDF único: você pode selecionar várias pranchetas ou ativos e exportá-los como um único arquivo PDF. Várias pranchetas ou ativos são colocados em páginas separadas e um único PDF é criado.

    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.

  4. Em seguida, clique em Exportar.

Trabalhar com integrações de terceiros

Você pode reunir seus designs em outros aplicativos que se integram ao XD: Zeplin, Avocode, Sympli (somente no MAC), Kite Compositor e Protopie. 

A seção abaixo fornece uma visão geral de alto nível do fluxo de trabalho usando o exemplo do XD em execução no Mac com Zeplin.

O procedimento funciona da mesma maneira no XD em execução no Windows.

Observação:

Este procedimento varia um pouco dependendo do aplicativo que você está usando. Para obter mais informações, consulte a documentação do seu aplicativo:

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

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

    Observação:

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

  2. Na caixa de diálogo aberta, clique em Importar.

    Para substituir telas existentes no Zeplin com o mesmo nome, selecione Substitua telas pelo mesmo nome. O Zeplin o adiciona como uma nova versão da mesma tela, sem perder suas anotações.

    A tela Importar no Zeplin
    A tela Importar no Zeplin

    As pranchetas são importadas para o Zeplin.

    As pranchetas no Zeplin
    As pranchetas no Zeplin

Extrair ativos para especificações de design

Marque camadas como ativos para exportação e os envie aos desenvolvedores como um link de especificação de design. Os desenvolvedores podem baixar todos os ativos vetoriais como ativos SVG, PNG, PDF e bitmap como PNG e PDF.

Para obter mais informações, consulte Extrair ativos para especificações de design.

Se não houver aplicativos de terceiros na opção Arquivo > Exportar, consulte Não foi possível ver o aplicativo de terceiros compatível nas opções de exportação.

Se não conseguir enviar seu arquivo, consulte Por que não consigo importar ou exportar arquivos no Adobe XD?

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online