Trabalhar com ativos do documento no Adobe XD

Procurando informações sobre como gerenciar ativos do documento no XD? Você está no lugar certo.

A exibição Ativos do documento no painel Bibliotecas  é o local central para criar, gerenciar e compartilhar cores, estilos de caractere, componentes e ativos de áudio usados em seus projetos de design.

Ativos de documento

Por que usar ativos de documento?

Conheça Richard, um lead de design responsável por padronizar a criação e o uso de ativos de design em sistemas em nuvem. Ele está fazendo um treinamento para gerenciar cores, estilos de caractere, componentes ou ativos de áudio nos sistemas de design.

 

  • Ele está procurando informações sobre como criar e gerenciar ativos no XD.

 

  • Ele precisa de ajuda para criar um sistema de gerenciamento de ativos no XD.

Continue lendo para saber como podemos apresentá-lo ao painel Ativos do documento no XD e ajudá-lo a começar.

Já utiliza o XD?

Atualizar seu aplicativo

Confira as Novidades

Experimente

Obter o arquivo de exemplo

.xdc; 604 KB

Antes de continuar

Familiarize-se com estes conceitos no XD:

Adicionar ativos do documento

Para começar a organizar seus estilos e componentes de design no painel Ativos do documento, clique em Bibliotecas  na barra de ferramentas ou pressione Cmd + Shift + Y (no Mac) ou Ctrl + Shift + Y (no Windows) e clique em Ativos do documento .
Após abrir o painel Ativos do documento, siga estas etapas para adicionar cores, estilos de caractere, componentes ou áudio que você deseja reutilizar em todo o documento ou publicar mais tarde como parte da sua biblioteca. 

Adicionar cores

Adicionar cores

  • Clique no ícone + para adicionar Cores e gradientes. O XD extrai as camadas de texto de cores de preenchimento e borda, estilos de cor e subintervalo associados aos objetos selecionados.

Adicionar estilos de caractere

Adicionar o caractere dos ativos

  • Clique no ícone + para adicionar Estilos de caractere. O XD extrai todos os estilos associados à camada de texto, incluindo qualquer estilo de subintervalo.

Adicionar componentes

Adicionar componentes dos ativos

  • Clique no ícone + para converter uma seleção em um componente. Quando você cria um componente na tela, o XD o adiciona automaticamente aos Ativos do documento.

Adicionar áudio

Adicionar o áudio dos ativos

  • Os arquivos de áudio adicionados a um protótipo no Inspetor de propriedades no modo de Protótipo são exibidos automaticamente em Ativos do documento.

Observações importantes

  • Não é possível adicionar cores de sombras aos Ativos do documento.
  • Não é possível agrupar estilos de caractere com propriedades comuns. 
  • Você pode excluir arquivos de áudio apenas no painel Ativos do documento.

  • Você pode adicionar arquivos de áudio no Inspetor de propriedades no modo de Protótipo.
  • Não é possível renomear ou reordenar arquivos de áudio.
  • Os arquivos de áudio não são vinculados durante a vinculação com um documento na nuvem. 

Práticas recomendadas

  • Use a exibição em lista em Ativos do documento.
    para renomear e classificar os ativos conforme a maneira como deseja organizá-los. A exibição em grade  é otimizada para reutilizar ativos por causa das representações de miniaturas e de ativos maiores.
  • Para uma verificação de comprovação, selecione todas as pranchetas do documento para extrair todas as cores e estilos de caractere usados no documento.

Aplicar e reutilizar ativos do documento

Agora que você pode exibir os ativos adicionados em Ativos do documento, selecione um objeto ou um grupo de objetos na prancheta e clique no estilo de caractere ou na cor para aplicá-lo à seleção.

Para usar um ou vários componentes no design, selecione-os no painel Ativos do documento e arraste-os para a tela. Instâncias desses componentes serão criados na tela.

Siga estas etapas para reutilizar cores, estilos de caractere ou componentes: 

Reutilizar cor

Reutilizar cor

  1. Selecione um objeto ou uma camada de texto e clique na amostra de cor para aplicá-la como cor de preenchimento ou
  2. Selecione um objeto várias vezes e aplique uma cor ou degradê à seleção ou
  3. Clique com o botão direito do mouse em uma amostra de cor em Ativos do documento e selecione Aplicar cor de borda para aplicá-la como uma cor de borda ou copie o valor hexadecimal para reutilização.

Reutilizar estilos de caractere

Reutilizar estilos de caractere

  1. Selecione uma camada ou parte do texto e clique no estilo de caractere para aplicá-lo.
  2. Selecione um objeto várias vezes e aplique um estilo de caractere em uma seleção.

Reutilizar componentes

Reutilizar componentes

  1. Arraste e solte o componente do painel Ativos do documento para a tela.
  2. Selecione um objeto várias vezes e arraste vários componentes na tela.
  3. Ao arrastar um componente, você pode passar o mouse sobre outra instância de componente para trocá-lo. 

Práticas recomendadas

  • Para ter um uso consistente, depois de salvar as cores e estilos de caractere, aplique cores e estilos de caractere do painel Ativos do documento aos objetos selecionados.

Editar ativos do documento

Depois de adicionar e reutilizar os ativos, você pode editá-los em Ativos do documento para fazer alterações globais em seu documento. Isso fornece uma maneira simplificada de modificar os estilos de caractere e cor no documento. 

Siga estas etapas para editar os ativos do documento:

Editar cores

Editar cor

  • Clique com o botão direito do mouse em uma amostra de cor e selecione Editar para modificar o valor da cor no documento. 
  • Todos os objetos na tela que usam essa cor são atualizados em tempo real. Essa é uma ótima maneira de visualizar uma alteração de cor em escala e fazer edições.

Editar estilos de caractere

Editar caractere

  • Clique com o botão direito do mouse em um estilo de caractere e selecione Editar para modificar esse estilo no documento. 
  • Todas as camadas de texto na tela que usam esse estilo são atualizadas em tempo real.

Editar componentes

Editar componente

  • Clique com o botão direito no componente na tela ou no painel Ativos do documento e selecione Editar componente principal para destacar o componente principal na tela ou recriá-lo caso tenha sido excluído.
  • As alterações feitas ao componente principal são propagadas a outras instâncias de componente.

 

Observações importantes 

  • Ao editar uma cor ou estilo de caractere usado em vários objetos (>100), as alterações podem levar um tempo para serem propagadas do painel para todos os objetos na tela.

Práticas recomendadas

  • Para determinar o impacto da edição em seu design, use a opção Realçar na tela antes de editar os ativos em Ativos do documento.
  • Para editar cores nos estilos de caractere, altere o valor da cor e o valor global da cor para preservar os estilos de caractere.
  • Se você atualizar uma cor vinculada ou um estilo de caractere vinculado, apenas os objetos com cores vinculadas ou estilos de caractere aplicados serão atualizados.

Gerenciar e organizar ativos de documentos

Para exibir e reordenar ativos, alterne entre as exibições em grade e  em lista em Ativos do documento.

  • Exibição em grade: otimizada para exibir miniaturas, é possível identificar visualmente os ativos.
  • Exibição em lista: otimizada para a organização, é possível exibir os nomes de todos os ativos e reordená-los.

Você pode adicionar, reutilizar e editar ativos nas duas exibições e usar Pesquisar para pesquisar ativos ou filtrar o painel para uma categoria específica. 

Depois de adicionar e reutilizar ativos em Ativos do documento, você também pode organizar e gerenciar ativos. 

Excluir, realçar e renomear ativos

excluir e realçar

  • Clique com o botão direito do mouse e selecione Excluir para excluir uma cor, estilo de caractere, componente ou áudio em Ativos do documento. Quando você exclui um componente do painel, as instâncias são desagrupadas como objetos regulares na tela.
  • Clique com o botão direito do mouse e selecione Realçar na tela para encontrar todos os objetos que usam cores ou estilos de caractere específicos ou instâncias de um componente específico. Selecione qualquer instância de objeto ou componente na tela e utilize o menu de contexto para revelar essa cor, estilo de caractere ou componente no painel Ativos do documento.
  • Clique com o botão direito do mouse para renomear ou alterne para a exibição em lista  e renomeie todos os seus ativos.

Passar o mouse sobre ativos

Passar o mouse sobre ativos

Passe o mouse sobre as miniaturas de ativos para revelar as seguintes informações: 

  • Cores: exibe o valor hexadecimal ou o nome da cor personalizada. 
  • Degradês: exibe os limites do valor de degradê. Para estilos de caractere, propriedades de texto adicionais, como altura da linha, não são exibidas na miniatura. 
  • Componentes: exibe o número de instâncias desse componente na tela.

Exibir ativos

Exibir ativos

Na exibição em lista , exiba os nomes de todos os ativos em cada categoria.

Reordenar ativos

Reordenar ativos

Na exibição em lista , arraste para reordenar ativos em cada categoria.

Observações importantes

  • Ao trabalhar com a exibição em lista , não é possível ver uma visualização grande do componente.
  • Reordene os ativos para agrupá-los em várias categorias. 

Práticas recomendadas

  • Os filtros em Ativos do documento permitem filtrar e exibir apenas uma categoria ou fonte específica de ativos.
  • Não sabe como uma alteração impactará seu design? Use a opção Realçar na tela para exibir instâncias do ativo em todo o documento.
  • Para identificar componentes não utilizados, selecione todos os objetos na tela, clique com o botão direito e selecione Revelar componente em Ativos e arraste os componentes realçados para o topo da lista.
  • Quando você passa o mouse sobre:
    • Degradê, a dica de ferramenta exibe o valor inicial e final do degradê. Um “-” entre os valores indica um degradê com 2 limites e um “...” entre os valores indica um degradê com vários limites de cores.
    • Componente, a dica de ferramenta exibe o número de instâncias desse componente na tela.
  • Ao renomear ativos na exibição em lista, use TAB para renomear o próximo ativo na exibição em lista e SHIFT+TAB para ir na direção inversa.

Compartilhar e publicar ativos

Agora que você criou todas as cores, estilos de caractere e componentes reutilizáveis nos Ativos do documento, saiba como usar as Bibliotecas da Creative Cloud para publicar e compartilhar os ativos do seu sistema de design com o restante da equipe.

Saiba mais

Para saber mais sobre como trabalhar com ativos, assista a este vídeo:

O que vem por aí?

Agora você já sabe como trabalhar com ativos e bibliotecas no XD. Continue em frente e saiba como usar Bibliotecas para compartilhar ativos, componentes e sistemas de design ou migrar documentos na nuvem do XD existentes para as Bibliotecas.

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!

Logotipo da Adobe

Fazer logon em sua conta