Gerenciar ativos e componentes

Para gerenciar de forma centralizada ativos como cores, degradês e estilos de caractere dos objetos usados no projeto, adicione-os ao painel Ativos.

O painel Ativos também exibe automaticamente os componentes criados no XD. Para saber mais sobre componentes, consulte Componentes.

Para abrir o painel Ativos, clique em  na barra de ferramentas ou pressione Cmd + Shift + Y (no Mac) ou Ctrl + Shift + Y (no Windows).

Adicionar e remover ativos

Para adicionar cores e degradês (linear ou radial) ao painel Ativos: selecione um objeto ou um grupo de objetos na prancheta e clique no ícone + ao lado de Cores no painel Ativos. Para saber mais informações, consulte Adicionar e usar cores como ativos.

Para adicionar estilos de caractere ao painel Ativos: selecione um texto ou uma caixa de texto na prancheta e clique no ícone + ao lado de Estilos de caractere no painel Ativos. Para saber mais informações, consulte Adicionar e usar estilos de caracteres como ativos.

Para excluir um ativo do painel Ativos: selecione o ativo no painel Ativos, clique com o botão direito (no Windows) ou clique com Ctrl pressionado (no Mac) e selecione Excluir no menu de contexto.

Você também pode selecionar uma prancheta ou um grupo de pranchetas e clicar no ícone + para adicionar todas as cores e estilos de caractere das pranchetas ao painel Ativos. 

Adicionar e usar cores como ativos

1. Selecione o objeto relevante na tela e aplique a cor desejada no Inspetor de propriedades.
2. Para adicionar a cor como um ativo, selecione o objeto acima e clique no ícone + ao lado de Cores no painel Ativos.
3. Para aplicar a cor a um objeto, selecione-o na tela e siga uma das etapas abaixo:
   • Para aplicar um preenchimento de cor, clique na cor no painel Ativos ou clique com o botão direito do mouse na cor e selecione Aplicar como preenchimento.
   • Para aplicar um traçado de cor (borda), clique com o botão direito do mouse em uma cor no painel Ativos e selecione Aplicar como borda. 
4. Para editar cores de forma centralizada, clique nelas com o botão direito do mouse no painel Ativos e elas serão aplicadas em todo o documento.

Adicionar e usar estilos de caracteres como ativos

1. Selecione o texto na tela e aplique os estilos no Inspetor de propriedades.
2. Para adicionar estilos como ativos, selecione o texto estilizado e clique no ícone + ao lado de Estilos de caractere no painel Ativos. Se selecionar um texto com vários estilos, clique no ícone + para criar vários estilos de caractere. 
3. Para aplicar estilos de caractere a um texto, selecione o texto na tela e clique em Estilos de caractere no painel Ativos.
4. Selecione e clique com botão direito nos estilos de caractere para editá-los e aplicá-los em todo o documento.

Categorizar ativos

Você pode adicionar rótulos aos ativos adicionados ao painel Ativos. No painel Ativos, alterne para a exibição em lista e clique no rótulo para renomeá-lo. Por exemplo, você pode personalizar o nome de uma cor do valor hexadecimal para o bloco da cor de fundo.

Quando você renomeia um componente, a alteração é aplicada a todas as instâncias do componente no painel Camadas para melhor identificação.

O XD também permite adicionar emoticons aos rótulos.

Reordenar ativos no painel Ativos

Você pode reordenar ativos no painel Ativos. Você pode mover os ativos usados com frequência para a parte superior da lista ou organizá-los como grupos.

Como faço para resolver problemas de fontes ausentes?

Quando um documento do XD contém fontes que não estão presentes no seu computador, o XD as exibe na seção Fontes ausentes do painel Ativos, permite que você as destaque na tela, verifica os designs em que elas foram usadas e as substitui em todo o design. Caso as fontes ausentes estejam disponíveis na biblioteca do Adobe Fonts, o XD as ativará automaticamente para garantir uma experiência de usuário sem interrupções.

Como trabalhar com o Adobe Fonts

Para garantir que a sua experiência com o Adobe Fonts seja a mais simples possível, o XD ativa automaticamente as fontes ausentes disponíveis na biblioteca do Adobe Fonts no seu computador sem a sua intervenção.

Se você estiver online, bastará abrir um documento com fontes ausentes disponíveis no Adobe Fonts (ao qual você tem acesso por meio da associação à Creative Cloud) e o XD as ativará automaticamente no seu computador.

As fontes ativadas no Adobe Fonts são destacadas com um ícone de ativação azul e, assim que estiverem prontas para uso, ficarão disponíveis no seu documento sem que você precise fazer nada.

Identificar e substituir fontes ausentes

Se o seu documento tiver fontes ausentes, um ponto de exclamação será exibido ao lado da fonte ausente no painel Ativos. Para substituir a fonte ausente:

1. Clique com o botão direito do mouse na fonte ausente e selecione Substituir fonte para selecionar uma fonte de substituição. O XD exibirá automaticamente uma visualização da fonte de substituição sugerida na tela. Você também pode usar a opção Realçar na tela para destacar a fonte ausente nos seus designs antes de substituí-la.
2. Selecione OK para substituir a fonte na tela e nos estilos de caractere definidos.

O que são componentes e como faço para criá-los, editá-los e excluí-los?

Um componente é um objeto ou grupo de objetos que pode ser reutilizado várias vezes nas pranchetas do seu projeto. Todas as instâncias de um componente usado em seu projeto são vinculadas. Ou seja, qualquer atualização feita em uma instância é refletida instantaneamente em todas as outras instâncias.

Para converter um objeto em um componente, execute uma das seguintes ações:

• Clique com o botão direito do mouse no objeto e selecione Criar componente.
• Selecione o objeto e pressione Cmd + K (no Mac) ou Ctrl + K (no Windows).
• No Mac, selecione o objeto e, em seguida, selecione Objeto > Criar componente.
• Selecione o objeto e clique em + na biblioteca Componentes no painel Ativos.

Todos os componentes criados no projeto são automaticamente exibidos na biblioteca Componentes no painel Ativos.

Editar e excluir componentes

Para fazer alterações na sombra e no desfoque do fundo de um componente, você precisa clicar duas vezes no componente na prancheta, diferentemente de objetos normais. Quando você clica duas vezes em um componente na prancheta, ele é exibido com uma borda mais espessa. Se o componente for um grupo de objetos, quando clicar duas vezes nele, você poderá editar todos os objetos no grupo. 

Para excluir um componente da biblioteca Componentes, clique com o botão direito do mouse no componente e selecione Remover componente.

Reutilizar componentes

Para reutilizar um componente, arraste-o da biblioteca Componentes para a prancheta. Como alternativa, você pode copiar e colar um componente em uma prancheta ou de uma prancheta para outra. Todas as instâncias vinculadas de um componente são indicadas com uma borda verde. Você também pode copiar e colar componentes de um documento do XD para outro. 

Para fazer alterações de estilo em uma instância de componente sem afetar as outras, clique com o botão direito do mouse na instância e selecione Desagrupar componente. Em seguida, faça as alterações. 

Para fazer alterações de texto ou bitmap em uma instância de componente, não é necessário desagrupá-lo. Para obter mais informações, consulte Substituir texto e bitmaps em instâncias de componente.

Substituir texto e bitmaps em instâncias de componente

Você pode fazer alterações de texto e bitmap em instâncias de componente sem afetar o original. A substituição permite que você reutilize o mesmo componente nos documentos do XD com texto ou bitmaps diferentes para cada instância.

A substituição é especialmente útil quando você cria botões ou outros elementos de navegação que compartilham o mesmo design, mas precisam de blocos de texto ou imagens diferentes.

Para substituir texto ou bitmaps em instâncias de componente, selecione o texto e digite um novo texto ou substitua um bitmap por outro bitmap.

A alteração no texto ou bitmap ocorre apenas nessa instância e não afeta o componente original.

Para propagar alterações de texto ou bitmap em uma instância de componente para o restante dos componentes vinculados, clique com o botão direito do mouse no componente na prancheta e selecione Enviar substituições.

Substituir componentes

Você pode substituir todas as instâncias de um componente por outro componente. Arraste um componente do painel Ativos para outro componente. Quando você soltá-lo sobre o componente antigo, o ícone mudará para uma seta indicando que o componente e todas as suas instâncias foram substituídos.

O que são ativos vinculados?

Com os ativos vinculados, você pode usar ativos (componentes, cores e estilos de caractere) de um ou mais arquivos de design disponíveis nos documentos do XD armazenados na nuvem. Os ativos vinculados complementam o fluxo de trabalho dos componentes vinculados. Ao modificar um ativo vinculado no documento de origem, o XD notifica os documentos com instâncias daquele ativo vinculado sobre todas as atualizações. Assim, você pode visualizar e aceitar as atualizações.  

Como adicionar ativos vinculados ao painel Ativos?

Para adicionar ativos vinculados ao painel Ativos, siga uma das etapas abaixo:

• Clique no ícone + ao lado do painel Ativos caso o painel Ativos esteja preenchido

Ou

• Clique no emblema Vincular ativos  caso o painel Ativos esteja vazio.

A janela Vincular ativos é aberta com duas guias; Documentos na nuvem e Compartilhado com você. Você pode classificar documentos nas guias Documentos na nuvem e Compartilhado com você por Nome, Data de modificação, Data de criação e Tamanho. Selecione para adicionar qualquer documento do XD armazenado na nuvem ao seu projeto de design.

Os ativos do documento na nuvem de origem são adicionados ao painel Ativos abaixo de seu próprio filtro com o mesmo nome do documento na nuvem. Por exemplo, CodeBrown_Tractiv_UI_kit.  

Se você definiu um filtro no painel Ativos, mude para a exibição Todos os ativos para ver os ativos recém-adicionados do documento na nuvem no navegador de ativos. Observe que cores, estilos de caractere e componentes são importados automaticamente do documento vinculado.

Para obter informações sobre como usar ativos vinculados, consulte Trabalhar com ativos vinculados.

O que são componentes vinculados?

Com componentes vinculados, você pode compartilhar componentes em documentos e manter uma única fonte confiável para kits de interface do usuário, guias de estilo e folhas de adesivos. Quando você atualiza um componente vinculado no documento de origem e salva as alterações, o XD o notifica sobre a atualização no documento de destino.

Para obter informações sobre como usar componentes vinculados, consulte Trabalhar com componentes vinculados.

Como faço para pesquisar e filtrar ativos e componentes no painel Ativos?

Filtrar ativos por tipo de ativo

Por padrão, todos os ativos adicionados ao painel Ativos são exibidos nele. Você pode filtrar os ativos por tipo clicando na seta suspensa no campo Pesquisar no painel Ativos. No menu suspenso, selecione o tipo do ativo como Cor, Estilo de caractere ou Componentes. 

Pesquisar ativos

Você pode pesquisar cores, estilos de caractere e componentes no painel Ativos. Para pesquisar cores, digite o código hexadecimal ou rótulo personalizado da cor que você deseja. Da mesma forma, para pesquisar estilos de caractere e componentes, digite a string que corresponde ao nome do ativo. De acordo com seus termos de pesquisa, o XD exibe os resultados relevantes no painel Ativos. 

O XD lembra as cinco consultas de pesquisa mais recentes para cada sessão. Essas consultas aparecem no histórico de pesquisa.

Como faço para encontrar ativos e componentes na tela usando o painel Ativos?

O XD permite que você localize rapidamente ativos na tela. Para localizar um ativo na tela, selecione o ativo no painel Ativos, clique com o botão direito do mouse e selecione Realçar na tela. Sempre que o ativo for inserido na tela, ele é destacado.

Caso o componente não tenha sido usado em nenhum outro lugar do projeto, o XD exibirá a mensagem: “Não foram encontradas cópias deste componente”.

Realçar ativos no painel Ativos para objetos selecionados na tela

O XD também permite que você realce os ativos no painel Ativos usados para um objeto selecionado na tela. Ao selecionar um objeto na tela, você pode consultar rapidamente a cor, o estilo de caractere ou o componente usados no objeto.

Para realçar os ativos no painel Ativos usados em um objeto, selecione o objeto na prancheta, clique com o botão direito do mouse e selecione uma das seguintes opções:

• Revelar cor: realça a cor usada no painel Ativos.
• Revelar estilo de caractere: realça o estilo de caractere usado no elemento.
• Revelar componente: destaca o componente já adicionado ao painel.

O XD realça os ativos usados para o objeto selecionado.