Componentes são elementos de design muito flexíveis que ajudam a criar e manter elementos repetidos e instâncias variadas para diferentes contextos e layouts, como o uso de botões em contextos diversos.

Continue lendo para saber como usar componentes para manter várias versões de um elemento original com facilidade.

Familiarize-se com estes conceitos no XD:

• Sistemas de design no XD
• Ajuste responsivo e restrições

Criar um componente

Para criar um componente, selecione Objeto > Criar componente. Você também pode selecionar um objeto ou grupo de objetos e usar uma destas opções:

Quando você cria um componente pela primeira vez no XD, ele vira um componente principal, indicado por um diamante preenchido em verde no canto superior esquerdo. Você pode editar um componente como faria com qualquer outro elemento. 

Observações importantes

• O XD não tem uma visualização dedicada para editar componentes principais. Eles são editados na tela
• Se você excluir um componente principal na tela, poderá selecionar uma instância e acessar a opção Editar componente principal no menu de contexto. O XD criará um componente principal na tela.
• Se você quiser desvincular uma única instância do componente, use a opção Desagrupar componente no menu de contexto. Porém, se quiser desvincular todas as instâncias na tela, use a opção de excluir no painel Ativos.
• Para garantir que você está editando o componente principal, confira se há um diamante preenchido em verde no canto superior esquerdo da caixa delimitadora.

Práticas recomendadas

Veja algumas práticas recomendadas ao trabalhar com componentes:

• Deseja criar um grande sistema de design de componentes? Organize os componentes principais relacionados em pranchetas separadas. Por exemplo, botões em uma prancheta e barras de navegação em outra.
• Ao criar seu sistema de design, crie os componentes da forma mais completa possível para garantir o máximo de reutilização e flexibilidade. Por exemplo, ao criar um componente de caixa de diálogo, defina os botões da caixa de diálogo como instâncias aninhadas dentro do componente de caixa de diálogo.

Trabalhar com instâncias de componente

As cópias de um componente principal são chamadas de instâncias. As instâncias de componente são indicadas por um diamante verde sem preenchimento no canto superior esquerdo. Quando você altera o componente principal, as alterações são aplicadas a todas as instâncias.

Substituições são alterações únicas que se aplicam somente à instância em questão, não ao componente principal. Se você alterar uma propriedade em uma instância, o XD marcará essa propriedade como uma substituição. Você pode substituir as propriedades de uma instância sem desvinculá-la do componente principal. 

Práticas recomendadas

Veja algumas práticas recomendadas ao trabalhar com instâncias de componente:

• Deseja experimentar utilizando a variação de um componente? Selecione Desagrupar componente no menu de contexto para desvincular a instância do principal.
• Está tentando localizar:
  • Todas as instâncias de um componente na tela? Clique com o botão direito no componente no painel Ativos e selecione Realçar na tela.
  • O componente principal enquanto trabalha em uma instância? Clique com o botão direito na instância e selecione Editar componente principal.

Editar um componente principal

Ao editar um componente principal, todas as instâncias são atualizadas, a não ser que elas contenham substituições da propriedade sendo editada. 

Para editar um componente principal, selecione uma instância ou componente na tela e use uma destas opções:

Observações importantes

• Não é possível propagar as propriedades de rotação e opacidade do componente principal para as instâncias.
• Para garantir que você está editando o componente principal, confira se há um diamante preenchido em verde no canto superior esquerdo da caixa delimitadora.
  

Práticas recomendadas

Veja as práticas recomendadas ao editar componentes principais:

• Se você excluir um componente principal na tela, clique com o botão direito em uma instância e selecione Editar componente principal. O XD gerará um componente principal na tela. 

Substituir uma instância de componente

Os componentes principais oferecem a consistência necessária para manter um sistema de design. Todas as alterações feitas no componente principal são propagadas automaticamente para as instâncias. Porém, 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.

Substituições são alterações únicas que se aplicam somente à instância em questão, não ao componente principal. Se você alterar uma propriedade em uma instância, o XD marcará essa propriedade como uma substituição. As propriedades substituídas são sempre preservadas, mesmo que você edite essas mesmas propriedades no componente principal. 

Para remover substituições e redefinir o componente principal, clique com o botão direito em uma instância e selecione Redefinir para estado principal. 

Tipos de substituições

Veja alguns tipos de substituição e seus cenários de uso:

Substituições de tamanho

Os componentes também são redimensionáveis e vêm com avançados recursos de ajuste responsivo integrados. Ao redimensionar o componente principal, as instâncias que não foram redimensionadas manualmente como uma substituição serão redimensionadas automaticamente. As instâncias que tiverem sido redimensionadas, por sua vez, continuarão do mesmo tamanho como substituições. 

Como o redimensionamento funciona em um componente principal ou nas instâncias dele?

• Você pode redimensionar uma instância de maneira independente sem afetar o componente principal.
• Você pode redimensionar um componente inteiro e 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 ajuste responsivo, o XD recria o posicionamento dos elementos em uma tela maior ou menor conforme você os redimensiona.

No Inspetor de propriedades, você pode alterar o Ajuste responsivo de Automático para Manual, o que permite editar as restrições e ter mais controle.

Substituições de aparência

Alterar os elementos originais de acordo com o contexto é 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 componente principal. 

Substituições de estrutura e layout

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 principal e de suas instâncias.

Se você adicionar um objeto ao componente principal, 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 principal, 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 principal. 

Observações importantes

• Você pode redefinir todas as substituições, mas não substituições individuais, para as propriedades do componente principal. 
• Se você marcou uma propriedade como uma substituição em uma instância, selecione Redefinir para estado principal para voltar a sincronizá-la com o principal. 

Práticas recomendadas

Veja algumas práticas recomendadas ao trabalhar com substituições em instâncias de componente:

• Para criar uma variação do componente para reutilização, crie um estado no componente principal em vez de uma instância com substituições.
• Ao substituir instâncias, lembre-se de substituir a propriedade que não precisa receber atualizações do componente principal. Por exemplo, em um componente de botão, substituir o texto garante que o rótulo fique diferente, enquanto o tamanho e a cor continuam sincronizados com o principal. 

Adicionar estados a componentes

Com os estados de componente, você pode salvar diferentes variações do componente para reutilizá-lo em vários contextos. Após fazer substituições no componente principal, você pode criar um estado a partir dessas substituições para reutilizá-lo com facilidade.

Por exemplo, você pode criar um componente de botão com diferentes variações, como botão primário e secundário. Utilizando estados, você pode criar variações a partir de substituições no componente principal. 

Ao trabalhar com estados e componentes, lembre-se do seguinte:

• Estados criados no componente principal ficam disponíveis em todas as instâncias desse componente. Assim você pode criar componentes com várias instâncias e alterar os estados com facilidade.
• Você pode renomeá-los e excluí-los no alternador de estados do Inspetor de propriedades.
• Você pode adicionar um acionador com uma ação para alternar de um estado de um componente para outro. Por exemplo, você pode alternar do estado padrão para o estado hover ao passar o mouse sobre um componente de botão. 

Adicionar estados

Depois que você criar um componente, o Inspetor de propriedades mostrará o componente com um Estado padrão. Você poderá adicionar três tipos de estado para seus componentes: Novo, Hover, e Alternância.

Criar um novo estado

Use a opção Novo estado para cenários em que deseja mostrar variações de um componente, como uma versão desativada ou clicada de um componente.

Criar um estado hover

Use a opção Estado hover se quiser que o componente mude e exiba outro estado ao passar o mouse sobre ele na interação com o protótipo.

Criar um estado de ALTERNÂNCIA

Usar o estado de Alternância quando você deseja criar componentes com comportamento de alternância interativa, como alternância, botão de rádio, caixa de verificação e assim por diante. 

Exibir e gerenciar estados

Depois de criar os estados do seu componente, você pode editar as propriedades desse componente e ver como ele é exibido ao interagir com ele. Veja alguns fluxos de trabalho relacionados a estados:

Substituições em estados

Todas as edições feitas no estado padrão do componente principal são propagadas para o estado padrão em todas as instâncias. Da mesma forma, editar um estado específico no componente principal faz com que todas as instâncias recebam essas edições no estado correspondente. Sempre verifique se você está editando o estado no componente principal para que ele seja atualizado em todas as instâncias.

Com estados, é possível substituir propriedades como texto, bitmap, tamanho, layout e aparência. Depois que você substituir a propriedade de um estado em uma instância, essa instância não receberá mais atualizações da propriedade em questão do componente principal.

Se não gostar dos resultados das substituições, redefina-as para as propriedades do componente principal clicando com o botão direito em uma instância e selecionando Redefinir para estado principal. Essa opção remove todas as substituições em uma instância e redefine a instância para o componente principal.

Adicionar interatividade

Você pode usar os acionadores Tocar, Hover, Teclas e Controle e Voz para vincular interações entre estados de componente no modo de Protótipo. Vincular interações entre estados de componente é semelhante a vincular interações entre pranchetas. A principal diferença é que, ao vincular as interações entre estados de componente, você escolhe um estado como destino em vez de uma prancheta.

Você pode definir várias interações para o mesmo estado de componente. Por exemplo, se você tiver um botão de alternância que tenha os estados Hover e Toque, poderá definir essas interações repetindo as etapas 4-7 duas vezes para definir os estados Toque e Hover. Depois de criar várias interações, você pode ver a seção Interação exibindo as interações definidas. Alterne entre essas interações e modifique as propriedades da interação para atender aos seus requisitos. 

Se você deseja criar interações hover aninhadas, como menus suspensos ou pop-ups com botões de vários estados, pode também aninhar componentes com estados hover.

Observações importantes

• Ao clicar duas vezes em um componente, o seletor de estado no Inspetor de propriedades não é mais exibido.
• O XD aceita apenas Tocar, Hover, Teclas e Controle e Voz como acionadores entre estados.
• O XD não propaga substituições de um estado para outro em instâncias.

Práticas recomendadas

Estas são algumas das práticas recomendadas ao adicionar estados aos componentes:

• Sempre crie seus estados para que os componentes reutilizem variações diferentes dele.
• Você pode alternar para o modo de Protótipo e editar manualmente as interações entre estados diferentes.
• Ao adicionar interatividade entre estados, se você alterar propriedades como a cor, defina a ação como Transição e a animação como Nenhuma ou Dissolver. Se você estiver animando a posição ou o tamanho entre estados, selecione Animação automática como ação.
• Ao criar um novo estado, você pode começar replicando o estado padrão ou um estado existente. Dependendo do objetivo final, você pode optar por selecionar o estado padrão e clicar em + para duplicá-lo para um novo estado ou selecionar um estado existente e clicar em + para duplicar esse estado. Ao criar um novo estado a partir de um existente, o novo estado também terá as mesmas substituições. Isso significa que as propriedades substituídas não receberão atualizações do estado padrão. Para a maioria dos casos de uso, recomendamos criar novos estados clicando em + para o estado padrão. Começar com o estado padrão garante que ele esteja sincronizado com o componente principal e não contenha substituições.

Gerenciar componentes

Adicionar interatividade aos componentes

É possível adicionar interatividade aos componentes e entre estados. Ao criar uma interação no componente principal, todas as instâncias desse componente recebem essa interação. As mudanças nas interações no componente principal atualizam automaticamente as interações nas instâncias.

Você também pode substituir as interações nas instâncias após as quais não receberá mais atualizações do componente principal. Assim como substituições de design, você pode substituir as propriedades de interação de um componente.

Observações importantes

• Não há como impedir a propagação de interações do componente principal para instâncias.
• Não há como distinguir entre uma interação adicionada a uma instância (como uma substituição) e a interação herdada do componente principal.
• Um conjunto limitado de ações e acionadores têm suporte para estados. 

Práticas recomendadas

Esta é uma prática recomendada ao adicionar interatividade a um componente:

• Ao copiar e colar ou compartilhar componentes entre documentos, o XD não preserva as interações entre o componente e a prancheta, pois não podemos garantir que as pranchetas de destino estejam sempre disponíveis. Contudo, o XD preserva o estado para indicar interações de cada componente. Isso significa que, no caso de um componente que tem um estado Hover e um acionador Tocar para uma prancheta, ao colar isso em outro documento, o XD preserva a interação do estado Hover e descarta o acionador Tocar para a prancheta. 
• Escolha quando quiser adicionar uma interação ao componente principal em relação à instância.
• Se todas as instâncias compartilharem o mesmo destino, a conexão do componente principal será mais eficaz, já que se propaga automaticamente para todas elas. Por exemplo, um botão Início que leva à tela inicial.
• Se todas as instâncias ou algumas delas tiverem destinos diferentes, será mais fácil vincular as instâncias individuais em vez do componente principal. Por exemplo, um botão principal usado no projeto que tem destinos diferentes com base em seu uso e contexto.

Saiba mais

Para saber mais sobre como trabalhar com componentes, assista a este vídeo.

Duração: 9 minutos

O que vem por aí?

Agora você já sabe como trabalhar com componentes no XD. Continue em frente e saiba como usar componentes aninhados no XD.

Tem alguma dúvida ou sugestão?