Saiba como usar componentes nos documentos para aprimorar a produtividade nos fluxos de trabalho.

Geralmente, os designers precisam criar elementos mestre, como barras de navegação ou botões, que são repetidos em outros designs. No entanto, quando uma instância de um elemento precisa ser personalizada de acordo com um contexto ou layout, isso pode ser um desafio. Em situações como essa, você acaba criando várias versões do mesmo elemento base, dificultando muito a manutenção do seu design.

Os componentes (antigos símbolos) são elementos de design muito flexíveis que ajudam a criar e manter elementos repetidos, como um botão, enquanto criam variações das instâncias desse botão para diferentes contextos e layouts. Além disso, você pode:

  • Modificar o elemento mestre e propagá-lo a todas as instâncias
  • Redimensionar uma instância de forma independente
  • Trocar um componente aninhado como uma substituição
  • Vincular e editar componentes em documentos
  • Substituições:
    • Propriedades do conteúdo (texto e preenchimentos de imagem)
    • Propriedades de aparência (preenchimento, borda, efeitos, estilo de texto entre outros)
    • Layout de objetos em uma determinada instância (tamanho, posição, hierarquia de camadas, restrições)
    • Estrutura de uma instância (adição e remoção de elementos)

Para saber mais sobre componentes no XD, assista a este vídeo.


Criar um componente mestre

Um componente mestre é a primeira instância de um componente que você cria. Você pode manipular ou editar o componente mestre na tela e ele é realçado com o << ícone>>> de um losango verde no canto superior esquerdo do contexto de edição.

Para criar um componente mestre:

Selecione um objeto ou grupo de objetos e use qualquer uma das seguintes opções para criar um componente mestre:

No aplicativo do XD, selecione Objeto > Criar componente.

Ou 

  • Use o atalho CMD + K.

    Ou

  • Clique com o botão direito do mouse no objeto e selecione Criar componente.

    Ou

  • Clique com o botão direito no componente selecionado no painel Ativos e selecione Editar componente mestre.
Criar um componente
Criar um componente

Criar uma instância de componente

Você pode copiar um componente mestre para criar uma instância. Quando instâncias são criadas, elas:

  • São uma cópia exata do componente mestre;
  • Têm as mesmas propriedades do original;
  • Estão vinculadas ao componente mestre; e
  • São indicadas por um contorno verde com alças de transformação.

Para criar várias instâncias do componente, pressione e arraste o componente principal na tela enquanto mantém pressionada a tecla Alt.

Você pode substituir as propriedades da instância sem interromper sua conexão com o componente mestre. Se alterar uma propriedade em uma instância, o XD marcará essa propriedade como uma substituição. Substituições são alterações exclusivas que serão aplicadas somente àquela instância e não ao componente mestre.

Criar uma instância de componente
Criar uma instância de componente

Observação:

Para alterações globais que afetarão todas as instâncias de um componente, altere a instância mestre.

Se desejar reverter as alterações ou substituições feitas em uma instância, clique com o botão direito na instância e selecione Redefinir para o componente mestre.

Exibir e gerar um componente mestre

Se um componente mestre não estiver disponível na tela de design:

  • Clique com o botão direito na instância do componente e selecione a opção Revelar os componentes nos ativos para ser direcionado para o componente mestre no painel Ativos

Ou

  • Clique com o botão direito na instância de componente e selecione Editar componente mestre.

Se o componente mestre existir em algum lugar na tela de design, o XD direcionará você até o local. Caso contrário, o XD cria um componente mestre e o coloca na tela de design. (semelhante a duplicar uma prancheta).

Atualizar e redefinir alterações no componente principal de uma instância

Para atualizar um mestre em uma instância, edite a instância e selecione a opção Atualizar componente mestre no menu contextual. Todas as outras instâncias do componente são atualizadas com as propriedades do novo mestre, exceto quando há substituições conflitantes.

Para redefinir uma instância de volta ao mestre, selecione Redefinir para componente mestre.

Redefinir para componente mestre
Redefinir para componente mestre

Substituir uma instância de componente

As substituições de componentes permitem que você crie componentes mestre com instâncias que podem substituir qualquer uma das propriedades do componente mestre, como tamanho, cor de preenchimento, texto, preenchimento de imagem, conteúdo, etc. As alterações feitas no componente mestre são replicadas para todas as instâncias, a menos que a propriedade modificada tenha sido substituída em uma instância. Ao editar uma instância individual, toda vez que uma propriedade é alterada, seu conteúdo se torna uma substituição aplicável somente àquela instância. Outras instâncias e o componente mestre não são afetados. A qualquer momento, uma instância com substituições pode ser ressincronizada com o componente mestre. Você também pode substituir o estilo e a aparência em uma instância.

Você pode redefinir qualquer instância com substituições correspondentes ao componente mestre a qualquer momento e aplicar substituições a partes específicas de uma instância de componente aninhada.

  • Para redefinir uma substituição feita a uma instância, clique nela e selecione Redefinir para componente mestre.
  • Para redefinir uma substituição feita a uma instância, selecione-a, clique nela com o botão direito do mouse e selecione Reverter para componente mestre.
  • Para replicar as alterações ao mestre de uma instância, clique com o botão direito do mouse na instância e selecione Replicar para o mestre.
Substituir uma instância de componente
Substituir uma instância de componente

Redimensionar um componente

O Redimensionamento de componente permite redimensionar um componente na tela e manter seu tamanho como uma substituição exclusiva. Assim como nos grupos no XD, você pode usar as alças de transformação para redimensionar ou girar os componentes diretamente na tela. O modo de redimensionamento padrão para redimensionar componentes é responsivo e pode ser ativado ou desativado no Inspetor de propriedades. Você pode desativar o redimensionamento responsivo para redimensionar manualmente um componente ou usar a tecla Shift para redimensionar com escala restrita, como outros elementos no aplicativo. Além de redimensionar um componente inteiro, você pode alterar o layout dos itens contidos nele.

Você pode alterar as instâncias dos componentes, independentemente dos tamanhos aos quais elas foram adaptadas. Assim como no redimensionamento responsivo, o XD recria o posicionamento dos elementos em uma tela maior ou menor conforme você os redimensiona.

Componentes redimensionados se comportam como pranchetas e mascaram grupos para que qualquer elemento filho reposicionado fora dos limites do componente original fique oculto. Ao redimensionar o componente mestre, todas as instâncias que ainda não foram redimensionadas serão redimensionadas automaticamente. Assim, as instâncias que já foram redimensionadas terão sua posição preservada como uma substituição. Você também pode redimensionar uma instância de forma independente, sem afetar o componente principal.

Redimensionar um componente mestre
Redimensionar um componente mestre

Trabalhar com componentes aninhados

Há muitos casos nos quais você desenhou um componente maior com componentes aninhados nele, como modais e barras de navegação, que precisam de uma atualização dependendo do contexto.

Para trocar um componente:

  1. Arraste o componente do painel Ativos e posicione-o na parte superior do componente na tela com o qual você deseja trocá-lo.

  2. O ícone “arrastar” é alterado de uma seta individual para uma seta circular.

Trocar um componente aninhado em um componente mestre substitui a ocorrência deste símbolo aninhado em todo o documento. Trocar um componente em uma instância de um componente cria uma substituição local somente nesta instância.

Usar componentes em vários documentos

Os ativos vinculados permitem o uso de 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. Quando uma instância vinculada é usada em um documento, você pode usar as substituições (estilo e aparência, redimensionamento e layout e estrutural) para personalizar as instâncias locais no documento usado.

Ativos vinculados
Ativos vinculados

Se você alterar e salvar o componente mestre no documento de origem, um emblema azul ao lado de cada instância de componente no documento usado indicará isso. Você pode passar o mouse sobre o emblema azul para visualizar as atualizações no painel Ativos e, se visível, na tela de desenho. Clique no emblema azul para aceitar a atualização de um componente individual e clique no botão Atualizar tudo na parte inferior do painel Ativos para atualizar todas as instâncias no documento. Para obter mais informações sobre como usar os ativos vinculados, consulte Trabalhar com ativos vinculados 

Limitações do recurso

  • Não será possível expandir os limites das instâncias se um objeto fora dos limites do mestre original for adicionado. Se fizer isso, o conteúdo será cortado. Como solução alternativa:
  1. Crie o mestre no maior tamanho das substituições que pretende fazer.
  2. Inclua novos objetos como elementos fora da sua instância de componente.
  • Não é possível mover o componente mestre de um documento para outro.
  • As opções Editar mestre e Redefinir para mestre não estão disponíveis com a seleção múltipla.
  • As substituições são removidas se você selecionar Converter em caminho. Se você continuar editando, as substituições serão removidas neste objeto nas instâncias.
  • No momento, não há suporte à opacidade como edição de uma propriedade mestre se você editá-la no mestre. Cada instância tem sua própria opacidade.

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