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

Como exportar ativos de design ou pranchetas?

  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 usando a opção Marcar para exportação.
    • Selecionado: exporta ativos selecionados.
    • Todas as pranchetas: exporta todas as pranchetas do 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 projetados. Se você não tiver certeza sobre a resolução, deixe a configuração como padrão (1x).

  5. Clique em Exportar.

Como 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 assumem que você está criando 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 projetar 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 projetar 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

Como exportar ativos de design para SVG?

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

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

    Estilização: é possível escolher o estilo como Atributos de apresentação ou CSS interno. O estilo padrão do SVG é definido como Atributos de apresentação, já que melhora a compatibilidade com cenários de desenvolvimento comuns, como a exportação de SVGs para o Android Studio.

    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.

Como exportar ativos de design para JPG?

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

Como exportar ativos de design para PDF?

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

Como 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 tiver 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 que se abre, clique em Importar.

    Para substituir telas existentes no Zeplin com o mesmo nome, selecione Substitua telas pelo mesmo nome. 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

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

Não foi possível ver as opções de exportação no XD?

Se você não conseguir ver 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.

Não consegue exportar seu arquivo?

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