Saiba como exportar e baixar ativos de especificações de design.

Exportar ativos de especificações de design

Se você marcar camadas para exportação e incluir ativos quando publicar a especificação de design, poderá baixá-los no link de especificações de design publicado. Os ativos vetoriais estão disponíveis em SVG, PNG e PDF, e os ativos de bitmap em PNG e PDF.

Para saber como exportar ativos para especificações de design e como baixá-los, assista a este vídeo.


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: 

  • Selecione qualquer camada da prancheta e clique na caixa de seleção Marcar para exportação no menu pop-up. 
  • Clique com o botão direito do mouse na camada da tela e escolha Marcar para exportação no menu pop-up. 
  • Useo atalho de teclado nomacOSe o atalho de teclado  noWindows.
  • Abra o painel Camadas e cliqueno ícone  de marcarpara exportação ao lado do nome da camada. 

Para exportar vários ativos, selecione várias camadas em uma prancheta e clique em Marcar para exportação.

Quando você importa ou abre um documento do Illustrator ou do Photoshop com imagens, o XD automaticamente marca todas as imagens bitmap para exportação. 

Marcar ativos para exportação
Marcar ativos para exportação

Publicar especificações de design com ativos

Ao incluir ativos durante a publicação de especificações de design e compartilhar o link publicado com os desenvolvedores, você dá a eles um local centralizado para baixar os ativos.

  1. Marque camadas para exportação no XD.

  2. Clique no botão Compartilhar na parte superior direita da tela e selecione Compartilhar para desenvolvimento. Na especificação de design, considera-se que os designs têm uma resolução de 1x.

    Compartilhar para desenvolvimento
    Compartilhar para desenvolvimento
  3. No menu suspenso Exportar para, selecione a plataforma para a qual deseja exportar o design. Selecione a opção Incluir ativos para download e clique em Criar link.

    Incluir ativos no protótipo
    Incluir ativos no protótipo

    Dependendo da plataforma para a qual você cria o design, cada uma possui um conjunto separado de configurações de resolução:

    • 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.
    • Android: os ativos 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%)
  4. Para abrir as especificações de design publicadas em um navegador, clique no ícone Abrir no navegador e selecione uma prancheta para exibir os ativos. O navegador exibe os ativos selecionados juntamente com outros detalhes da prancheta. 

    Ao passar o mouse sobre os ativos, a seleção contextual destaca o ativo selecionado em azul.

    Ativos na Web
    Ativos na Web

Baixar ativos de especificações de design

Quando você compartilha as especificações de design com os desenvolvedores, eles podem baixar os ativos contidos nelas. Os desenvolvedores podem baixar ativos individualmente ou todos ao mesmo tempo.

Use Cmd + A ou Ctrl + A para selecionar todos os ativos de uma só vez ou use a tecla Shift para selecionar vários. Os ativos são baixados como arquivos .zip na pasta de downloads do seu computador. Você pode alterar o formato dos ativos vetoriais para SVG, PDF e PNG e o formato dos ativos de bitmap para PNG e PDF.

Baixar ativos
Baixar ativos

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