Saiba como usar componentes em sistemas de design.

Geralmente, os designers precisam criar elementos base, como barras de navegação ou botões, que se repetem em outros designs. No entanto, esses elementos base precisam ser personalizados de acordo com o contexto ou o layout em que são usados. 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 cujas instâncias podem ser alteradas para criar variações para diferentes contextos e layouts. Por exemplo, o uso de botões em contextos diferentes.

Você pode criar um componente mestre para definir um elemento reutilizável, como um botão, e alterar as propriedades dele para personalizar as instâncias desse elemento. As alterações feitas em uma instância individual são específicas desse elemento, mas as alterações feitas no componente mestre são propagadas para todas as instâncias cujas propriedades não foram personalizadas. 

Componentes mestres e instâncias

Quando você cria um componente pela primeira vez no XD, ele vira um componente mestre. Você pode manipular e editar um componente mestre na tela como faria com qualquer outro elemento. Componentes mestres são identificáveis por um diamante verde no canto superior esquerdo.

Componente mestre indicado por um ícone de diamante verde
Componente mestre indicado por um ícone de diamante verde

Para criar um componente mestre, selecione um objeto ou um grupo de objetos e use uma das seguintes opções:

  1. Clique com o botão direito do mouse e selecione Criar componente (CMD + K).

  2. Clique no botão + na seção de componentes do painel Ativos.

  3. No aplicativo do XD, selecione Objeto Criar componente.

Trabalhar com instâncias de componentes

As cópias criadas de um componente mestre são chamadas de instâncias. Quando criadas, as instâncias:

  • São uma cópia exata do componente mestre
  • Têm as mesmas propriedades que o original e
  • Estão vinculadas ao componente mestre. 
Instância de componente
Instância de componente

Você pode substituir as propriedades de uma instância sem desvinculá-la do componente mestre. Veja como funciona:

  • Quando você altera o componente mestre, as alterações são aplicadas a todas as instâncias.
  • Porém, se você alterar a propriedade de uma instância, o XD marcará essa propriedade como uma substituição. Substituições são alterações únicas que se aplicam somente à instância em questão, não ao componente mestre.

Editar um componente mestre

Você pode usar estas opções para editar um componente mestre:

  1. Clique com o botão direito do mouse em uma instância na tela e selecione Editar componente mestre. 

    Editar um componente mestre na tela
    Editar um componente mestre na tela
  2. Clique em um componente no painel Ativos e selecione Editar componente mestre.

    Editar componente mestre
    Editar um componente mestre no painel Ativos

Se você excluir um componente mestre na tela, o XD gerará um componente mestre ao lado dos objetos que você estiver editando. 

Editar componente mestre
Editar componente mestre

Substituir propriedades

Os componentes mestres oferecem a consistência necessária para manter um sistema de design. Todas as alterações feitas no componente mestre são propagadas automaticamente para as instâncias.

Alterações em um componente mestre propagadas para as instâncias
Alterações em um componente mestre propagadas para as instâncias

A eficácia de um sistema de design depende de sua flexibilidade. Você pode começar usando apenas o elemento original, mas precisará personalizá-lo de acordo com o contexto em que ele será usado. É aí que entram as instâncias. Quando você edita a instância de um componente, ela não afeta o componente mestre. Todas as propriedades alteradas são consideradas substituições.

Substituição de instância
Substituição de instância

As propriedades substituídas são sempre preservadas, mesmo que você edite essas mesmas propriedades no componente mestre. 

Preservar propriedades substituídas
Preservar propriedades substituídas

As propriedades não substituídas nas instâncias, como o raio do canto desses botões, continuam sincronizadas com as propriedades do componente mestre. 

As propriedades do raio de canto dos botões continuam sincronizadas com o componente mestre
As propriedades do raio de canto dos botões continuam sincronizadas com o componente mestre

Se você não gostar dos resultados das substituições, pode redefini-las para as propriedades do componente mestre clicando com o botão direito do mouse em uma instância e selecionando Redefinir para componente mestre. Essa opção remove todas as substituições em uma instância e redefine a instância para o componente mestre. 

Redefinir para componente mestre
Redefinir para componente mestre

Substituições de estilo e aparência

Alterar os elementos originais de acordo com o contexto é muito importante ao criar elementos reutilizáveis. Por isso, você pode substituir todas as propriedades de estilo e aparência de uma instância. As substituições permitem diversas variações sem perder o vínculo com o elemento base. 

Substituições de estilo e aparência
Substituições de estilo e aparência

Observação:

No momento, não é possível propagar as propriedades de rotação e opacidade do componente mestre para as instâncias.

Substituições de redimensionamento e layout

O XD 12.0 lançou um recurso chamado redimensionamento responsivo, que permite redimensionar grupos de objetos mantendo a posição e a escalabilidade deles. Tudo o que você precisa fazer é redimensionar o grupo na tela de design, e o XD manterá o espaçamento relativo entre os objetos. É inevitável acabar tendo elementos reutilizáveis semelhantes, mas de tamanhos diferentes. Os componentes também são redimensionáveis e vêm com os poderosos recursos de redimensionamento responsivo integrados. 

Redimensionamento responsivo em um componente mestre
Redimensionamento responsivo em um componente mestre

Se você redimensionar o componente mestre, as instâncias não alteradas serão redimensionadas automaticamente. As instâncias que já tiverem sido redimensionadas, por sua vez, continuarão do mesmo tamanho como substituições. Você também pode redimensionar uma instância independente sem afetar o componente mestre. 

Redimensionar uma instância independente sem afetar o componente mestre
Redimensionar uma instância independente sem afetar o componente mestre

Além de redimensionar um componente inteiro, você pode alterar o layout dos itens contidos nele. Você pode alterar as instâncias do componente independentemente do tamanho a que elas foram ajustadas. Assim como o redimensionamento responsivo, o XD faz o seu melhor para recriar a posição dos elementos em uma tela maior ou menor conforme eles são redimensionados. Você também pode usar o modo manual para editar manualmente as restrições e ter mais controle.

Editar manualmente restrições responsivas
Editar manualmente restrições responsivas

As propriedades alteradas em uma instância (por exemplo, o tamanho do texto em Joshua Tree) são preservadas como substituições e não recebem atualizações das propriedades equivalentes no componente mestre.

Propriedades alteradas preservadas como substituições
Propriedades alteradas preservadas como substituições

Se você editar o layout de uma instância, as alterações nas propriedades do componente mestre que não forem substituídas na instância serão propagadas para as instâncias.

Alterações no componente mestre propagadas para as instâncias
Alterações no componente mestre propagadas para as instâncias

Adicionar e remover elementos como uma substituição

Além de substituir o tamanho de um componente ou o layout dos elementos contidos nele, você também pode substituir os componentes alterando sua estrutura. Isso significa que você pode adicionar ou remover elementos do componente mestre e de suas instâncias. 

Adicionar um elemento a um componente mestre
Adicionar um elemento a um componente mestre

Se você adicionar um objeto ao componente mestre, ele também será adicionado às suas instâncias. Quando você adiciona um objeto, o XD aplica o algoritmo de redimensionamento responsivo e define automaticamente as restrições do objeto. Isso depende da posição do novo objeto em relação ao espaço em que ele é inserido. Quando um objeto é excluído do componente mestre, ele também é removido de todas as instâncias.

Elementos podem ser adicionados ou removidos de uma instância e, ao serem adicionados, suas restrições são definidas automaticamente. Quando um elemento em uma instância é excluído, ele é removido apenas dessa instância. O elemento continua existindo no componente mestre. 

Trocar um componente aninhado

Muitas vezes, você cria um componente maior contendo componentes aninhados, como modais e barras de navegação, que precisam ser personalizados de acordo com o contexto. Trocar um componente no XD é simples. Basta arrastar um componente do painel Ativos e soltá-lo sobre o componente na tela com o qual você deseja trocá-lo.

Trocar um componente mestre por uma instância substitui o mestre em todas as instâncias
Trocar um componente mestre por uma instância substitui o mestre em todas as instâncias
Trocar uma instância resulta em uma substituição local somente dessa instância
Trocar uma instância resulta em uma substituição local somente dessa instância

Trocar um componente mestre por uma instância substitui o mestre em todas as instâncias. 

Trocar uma instância resulta em uma substituição local somente dessa instância. Você pode trocar um componente inteiro ou um componente aninhado por outro em nível global. 

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 na nuvem do XD. Os ativos vinculados complementam o fluxo de trabalho dos componentes vinculados.

Quando uma instância vinculada é usada em um documento, você pode usar substituições (estilo e aparência, redimensionamento e layout e estrutura) para personalizar as instâncias locais no documento.

Ativos vinculados
Ativos vinculados

Se você alterar e salvar um componente mestre no documento de origem, um símbolo azul  ao lado da instância do componente vinculado no documento usado indicará que uma atualização está disponível. Você pode passar o mouse sobre o símbolo para visualizar as atualizações no painel Ativos e, se visível, na tela de design. 

Clique no símbolo azul para aceitar as atualizações em uma instância individual e 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 ativos vinculados, consulte Trabalhar com ativos vinculados.

Limitações do recurso

Saiba quais são os limites desse recurso ao trabalhar com componentes:

  • Você não pode mover o componente mestre entre documentos.
  • As opções Editar componente mestre e Redefinir para componente mestre não estão disponíveis para a seleção de vários componentes.
  • As substituições são removidas ao selecionar a opção Converter em caminho. Se você continuar editando, as substituições serão removidas nas instâncias do objeto.
  • No momento, a opacidade e a rotação não funcionam como propriedades mestras no componente mestre. Cada instância tem sua própria opacidade e rotação.
  • Se você adicionar um objeto que excede os limites do componente mestre original, o conteúdo será cortado. Como solução alternativa:
    • Crie um componente mestre com o tamanho ideal para as substituições que pretende fazer.
    • Inclua novos objetos como elementos fora da instância do componente.

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