Guia do Usuário Cancelar

Trabalhar com ativos do documento no Adobe XD

  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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

O painel Ativos do documento é 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, clique em Bibliotecas  na barra de ferramentas ou pressione Cmd + Shift + Y (no Mac) ou Ctrl + Shift + Y (no Windows) para abrir o painel Ativos do documento .
Após abrir o painel Ativos do documento, siga estas etapas para adicionar cores, estilos de caractere, componentes, áudio ou vídeo que você deseja reutilizar em todo o documento ou publicar mais tarde como parte da sua biblioteca. 

Adicionar cores

  • Selecione um objeto na tela e clique no ícone de + ao lado de Cores no painel Ativos do documento. O XD extrai as cores de preenchimento e borda associadas ao objeto selecionado.

Adicionar estilos de caractere

  • Selecione o texto na tela e clique no ícone de + ao lado de Estilos de caractere no painel Ativos do documento. O XD extrai todos os estilos associados à camada de texto, incluindo qualquer estilo de subintervalo.

Adicionar componentes

  • Selecione um objeto na tela e clique no ícone de + ao lado de Componentes no painel Ativos do documento para convertê-lo em um componente. 
  • Quando você cria um componente na tela, o XD o adiciona automaticamente a Componentes no painel Ativos do documento.

Adicionar áudio

Adicionar ativos de áudio

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

Adicione o vídeo

Adicione o vídeo

  • Selecione um vídeo na tela e clique no ícone de + ao lado de Vídeos no painel Ativos do documento.
  • Quando você converte um vídeo em um componente, o vídeo é adicionado a Componentes e Vídeos no painel 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. 

Dicas e truques

  • Use a exibição em lista  no painel Ativos de documento para renomear e classificar os ativos para atender às suas necessidades organizacionais. 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

Siga um destes procedimentos:
  1. Selecione um objeto ou uma camada de texto e clique na amostra de cor para aplicá-la como cor de preenchimento.
  2. Selecione objetos várias vezes e aplique uma cor ou degradê à seleção.
  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

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

Reutilizar componentes

Reutilizar componentes

Siga um destes procedimentos:
  1. Arraste o componente do painel Ativos do documento para a tela.
  2. Selecione objetos 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. 

Dicas e truques

  • 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. Esse recurso fornece uma maneira simplificada de modificar os estilos de caractere e cor no documento. 

Antes de continuar, certifique-se de que está editando o ativo correto:

  • Clique com o botão direito no ativo em Ativos de documento e selecione Realçar na tela para encontrar todos os objetos que usam cores ou estilos de caractere ou localizar as instâncias de um componente.
  • Selecione qualquer objeto na tela, clique com o botão direito e escolha Revelar componentes em Ativos para localizar essa cor, estilo de caractere ou componente em Ativos de documento.
Realçar na tela
Clique com o botão direito no ativo em Ativos de documento e selecione Realçar na tela

Revelar componentes em Ativos
Selecione qualquer objeto na tela, clique com o botão direito e escolha Revelar componentes em Ativos

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 usando essa atualização de cor 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 no 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.

dicas e truques

  • 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

Depois de adicionar ativos, você pode gerenciá-los e organizá-los no painel Ativos do documento das seguintes maneiras:

  • Exibir e classificar ativos
  • Pesquisar e filtrar ativos
  • Passar o mouse sobre ativos
  • Reordenar, renomear e excluir ativos

Para saber como agrupar ativos, consulte Organizar ativos em grupos e subgrupos.

Exibir e classificar ativos

Exibir e classificar ativos

  • 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.
  • Classificar por nome: ordena alfabeticamente as categorias de ativos e todos os ativos dentro delas.

Você pode adicionar, reutilizar e editar ativos em ambas as exibições. 

Pesquisar e filtrar ativos

Pesquisar e filtrar ativos

Use Pesquisar para pesquisar ativos.

Use Filtrar por tipo para filtrar os ativos do documento por Cores, Estilos de caractere ou Componentes. Para obter mais informações, consulte Pesquisar e filtrar 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ê.
  • Estilos de caractere: exibe propriedades como espaçamento de linha.
  • Componentes: exibe o número de instâncias desse componente na tela.

Reordenar, renomear e excluir ativos

  • Na exibição em lista , arraste para reordenar ativos em cada categoria.
  • Clique com o botão direito para renomear ou alterne para a exibição em lista  e renomeie todos os seus ativos. Você também pode renomear um componente principal no painel Camadas clicando duas vezes no caminho do componente.
  • 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.

 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. 

dicas e truques

  • 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 dois 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 , use TAB para renomear o próximo ativo na exibição em lista e SHIFT+TAB para ir na direção inversa.

Organizar ativos em grupos e subgrupos

Organize seus ativos de documentos facilmente criando o número desejado de grupos e subgrupos no painel Ativos do documento, na exibição de árvore ou exibição de caminho:

  • Exibição de árvore: é possível ver grupos e subgrupos organizados em uma hierarquia. Clique no ícone de alternância Árvore/Caminho no canto superior direito do painel Ativos do documento para alternar para a exibição de árvore. 
  • Exibição de caminho: é possível ver uma lista de caminhos de grupo e, em cada caminho, um grupo e seus subgrupos aninhados separados por barras oblíquas (/). A exibição de caminho nivela a estrutura de aninhamento do grupo, facilitando a verificação de todos os ativos dentro dos subgrupos. Clique no ícone de alternância Árvore/Caminho no canto superior direito do painel Ativos do documento para alternar para a exibição de caminho.

Tanto na exibição de árvore quanto na exibição de caminho, você pode organizar os ativos das seguintes maneiras:

Painel Ativos do documento na exibição de árvore (esquerda) e na exibição de caminho (direita)
Painel Ativos do documento na exibição de árvore (esquerda) e na exibição de caminho (direita)

Crie grupos dentro de cada categoria de ativo (cores, estilos de caractere e assim por diante) de qualquer uma das seguintes maneiras:

  • Selecione vários ativos, clique com o botão direito e escolha Novo grupo da seleção.
  • Clique com o botão direito na categoria de ativos (cores, estilos de caractere, componentes e assim por diante) e escolha Criar subgrupos.
  • Clique com o botão direito em um ativo e escolha Novo grupo do elemento.
  • Clique com o botão direito em um ativo, escolha Mover para, clique no ícone da pasta, clique em Criar e depois em Mover.
  • Selecione vários ativos, clique com o botão direito, escolha Mover itens selecionados para, clique no ícone da pasta, clique em Criar e depois em Mover.
Criar um subgrupo dentro de um grupo
Selecionar vários ativos, clicar com o botão direito e criar um grupo

Depois de criar um grupo, clique com o botão direito para fazer o seguinte:

  • Criar subgrupo: crie vários subgrupos.
  • Mover para: mova ativos para outro grupo dentro da categoria de ativos.
  • Renomear grupo: forneça um nome personalizado.
  • Desagrupar: remova o grupo e mova os ativos dentro dele um nível acima.
  • Excluir: exclua o grupo e os ativos dentro dele.

Depois de criar seus grupos e subgrupos, você pode arrastar os ativos para movê-los para esses grupos. Ou clique com o botão direito nos ativos, selecione Mover para e escolha os grupos para os quais deseja mover os ativos.

Você pode criar vários subgrupos aninhados de uma só vez usando barras oblíquas (/) no caminho do grupo e organizar ativos facilmente editando caminhos. Para saber mais, consulte Organizar ativos usando barras oblíquas.

Organizar ativos editando caminhos

Use barras oblíquas (/) para organizar facilmente grupos e subgrupos em qualquer categoria de ativo. É possível executar as seguintes tarefas usando barras oblíquas:

  • Criar um grupo com subgrupos aninhados
  • Editar caminhos para desagrupar e mover ativos

Criar um grupo com subgrupos aninhados

Crie vários subgrupos aninhados dentro de um grupo de uma vez usando barras oblíquas (/). 

Você pode criar subgrupos aninhados usando barras oblíquas em:

  • Exibição de caminho e exibição de árvore do painel Ativos do documento
  • Painel Camadas (somente componentes principais)

Depois de digitar um nome de grupo, adicione uma barra oblíqua, digite o nome do subgrupo e aninhe quantos níveis forem necessários. Se um subgrupo com o mesmo nome já existir em um nível de aninhamento, os dois subgrupos serão mesclados.

Editar caminhos para desagrupar e mover ativos

Usando a opção para editar caminhos, execute várias funções Desagrupar de uma só vez ou combine as funções Mover para e Desagrupar.

Você pode editar caminhos em:

  • Exibição de caminho do painel Ativos do documento
  • Painel Camadas (somente componentes principais)

Clique duas vezes no caminho para editá-lo. Quando você remove um grupo ou subgrupo de um caminho, todos os ativos dentro dele sobem de nível. Você pode remover qualquer número de níveis de aninhamento de um caminho de uma só vez e mover os ativos em vários níveis. Quando você digita um caminho que já existe, todos os ativos são movidos para esse caminho. 


OBSERVAÇÕES IMPORTANTES

  • Você tem um documento do XD antigo que tem nomes de ativos com barras oblíquas? Ao abrir um documento desse tipo no XD 50 ou posterior, você receberá uma solicitação para fazer o seguinte:

a. Substitua as barras por traços (—) e mantenha a hierarquia do grupo.

b. Converta barras em novos níveis de aninhamento e adicione profundidade à hierarquia do grupo.

  • Quando você abre um documento do Sketch no XD, seus agrupamentos e estrutura de ativos são mantidos.
  • Quando você edita caminhos, nenhum dos ativos é excluído. Para excluir um grupo e todos os seus ativos juntos, clique com o botão direito do mouse no grupo e selecione Excluir.
  • Quando você organiza grupos para componentes principais no painel Camadas, isso é refletido no painel Ativos de documento.
  • Quando você publica uma biblioteca vinculada de seu documento na nuvem do XD, todos os grupos e subgrupos são preservados na biblioteca.
  • Os caminhos de grupo para seus ativos não são exibidos quando você publica especificações de design.

dicas e truques

  • Se você já organizou seus ativos de documento em uma prancheta, clique com o botão direito no nome da prancheta e selecione Revelar componentes em Ativos, Revelar cores nos ativos ou Revelar estilos de caractere nos ativos. Todos os ativos na categoria de ativos que você selecionou são destacados e selecionados em Ativos de documentos. Clique com o botão direito em qualquer um desses ativos e selecione Novo grupo da seleção para criar facilmente um grupo com todos esses ativos.
  • Se seus ativos de documento são nomeados e você deseja agrupá-los rapidamente, use Pesquisar para restringir esses ativos para corresponder aos seus critérios de pesquisa. A partir daí, você pode criar rapidamente um grupo apenas com esses ativos filtrados.

Para obter algumas dicas profissionais sobre como organizar seus ativos de documento, assista a este vídeo:

Compartilhar e publicar ativos

Agora que você criou todas as cores, estilos de caractere e componentes reutilizáveis nos ativos de 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. Adoraríamos ver suas criações e ouvir o que você tem a dizer!

Logotipo da Adobe

Fazer logon em sua conta