Guia do Usuário Cancelar

Exportar e baixar ativos de especificações de design

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 da especificação de design publicada. Os ativos vetoriais estão disponíveis nos formatos SVG, PNG, PDF e JPG, enquanto ativos bitmap podem ser exportados nos formatos PNG, PDF e JPG.

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. 
  • Use o atalho de teclado  no macOS e  no Windows.
  • Abra o painel Camadas e clique no ícone de Marcar para 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.

Opção Marcar 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.

    Marcar camadas para exportação
    Marcar para exportação

  2. Clique em Compartilhar para alternar para o modo de compartilhamento. Selecione Desenvolvimento.

    share-designs

  3. No modo de Design, selecione os ativos que você deseja exportar. No Inspetor de propriedades, marque a caixa de seleção Marcar para exportação. Os ativos para exportação aparecem no modo de compartilhamento.

  4. No modo de compartilhamento, marque a caixa de seleção Ativos para download para marcar os ativos para exportação e clique em Criar link.

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

Baixar ativos de especificações de design

Se você for um desenvolvedor, pode baixar os ativos do link das especificações de design publicadas compartilhadas com você. Você pode baixar todos os ativos para download em uma prancheta ao mesmo tempo na exibição de detalhes da tela. Você também pode baixar ativos individualmente na exibição de detalhes da camada.

Exibição de detalhes da tela

Ao clicar fora de uma prancheta, você estará na exibição de detalhes da tela. 

Na exibição de detalhes da tela, é possível ver todos os ativos para download categorizados como imagens, vídeo e animações na seção Ativos do Inspetor de propriedades.

Exibição de detalhes da tela
Exibição de detalhes da tela de uma prancheta com ativos selecionados para download

Para baixar ativos, faça o seguinte na seção Ativos:

1. Clique para selecionar os ativos que deseja baixar em conjunto:

  • Para selecionar vários, você pode usar o botão Shift.
  • Para selecionar todos os ativos de uma categoria de ativos, clique em um ativo e use Cmd+ou Ctrl+A.

É exibida a seção Ativos selecionados que mostra o número de ativos selecionados, categorizados como imagens, vídeo e áudio.

2. Clique em Baixar.

Os ativos são baixados como arquivos .zip na pasta Downloads do seu computador. Ao baixar imagens, você pode alterar o formato das imagens vetoriais para SVG, PDF, PNG e JPG, e o formato das imagens bitmap para PNG, PDF e JPG.

Observações importantes

  • Se você passar o mouse sobre os recursos de vídeo e áudio na seção Ativos, verá a extensão do arquivo.
  • Em uma prancheta, se houver várias cópias de um vídeo, você verá apenas uma instância desse vídeo na seção Ativos. Ao passar o mouse sobre um vídeo na seção Ativos, você verá todas as instâncias desse vídeo destacadas na prancheta.
  • Em uma prancheta, se vários vídeos tiverem a mesma imagem de capa, você verá cada instância dessa imagem de capa na seção Ativos.
  • Quando você baixa ativos de diferentes categorias em conjunto, a pasta .zip baixada terá subpastas para essas categorias.
  • Você pode baixar arquivos de vídeo apenas no mesmo formato que os designers importaram para o documento de design do XD. Para saber mais sobre os formatos de vídeo compatíveis, consulte Trabalhar com vídeos.
  • Na exibição de detalhes da tela, somente o último estado inspecionado ou o estado ativo de determinado componente ficará disponível para download na seção Ativos. Para baixar os ativos de todos os estados, selecione a camada do componente na prancheta e alterne para a exibição de detalhes da camada.

Exibição de detalhes da camada

Ao selecionar uma camada de uma prancheta, você alterna para a exibição de detalhes da camada. Na exibição de detalhes da camada, você pode baixar ativos apenas da camada selecionada.

Exibição de detalhes da camada
A camada selecionada tem um vídeo, sua imagem de pôster e um arquivo de áudio vinculado disponível para download

Para baixar um ativo na camada selecionada, clique em Baixar ao lado do ativo na seção Ativos do Inspetor de propriedades.

Download de vídeo

Ao selecionar uma camada de vídeo em uma prancheta:

  • Você pode baixar o vídeo e a imagem do pôster.
  • Se o vídeo estiver conectado a uma reprodução de áudio, você também pode baixar esse arquivo de áudio.

Download de Lottie

Ao selecionar uma camada Lottie em uma prancheta:

  • Você pode baixar a animação Lottie como um arquivo JSON.
  • Se o Lottie estiver conectado a uma reprodução de áudio, você pode baixar esse arquivo de áudio.

Download de componente

Para baixar ativos para um componente, selecione-o na tela. Depois, no Inspetor de propriedades, alterne para cada estado para baixar o ativo para cada um.

No aplicativo do XD, se o designer marcar várias instâncias de um componente para exportação, somente a última instância no painel Camadas será exportada.

Experiência de download para o XD 44 e versões posteriores

Para links publicados usando o XD 44 e versões posteriores:

Ao clicar em Baixar, você obtém uma caixa de diálogo mostrando o progresso. Assim que o download for concluído, você pode retomar a inspeção de pranchetas ou navegar de uma prancheta para outra.

Caixa de diálogo mostrando o progresso do download
Caixa de diálogo mostrando o andamento do download em links publicados por meio do XD 44 e versões posteriores.

Se você receber um erro ao baixar ativos, peça ao designer para republicar o link e compartilhá-lo novamente.

Erro ao baixar ativos
Erro ao baixar ativos

Receba ajuda com mais rapidez e facilidade

Novo usuário?