Trabalhar com componentes

Saiba como trabalhar com componentes em sistemas de design no Adobe XD.

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.

Componentes

Novo no XD?

Obter o XD

Aprenda o básico do aplicativo

Já utiliza o XD?

Atualizar seu aplicativo

Confira as Novidades

Experimente

Kit de interface de amostra

.xd; 80 MB

Antes de continuar

Familiarize-se com estes conceitos no XD:

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:

Inspetor de propriedades
No Inspetor de propriedades

Clique no ícone + na seção Componente do Inspetor de propriedades.

Painel Ativos
No painel Ativos

Clique no botão + na seção Componentes do painel Ativos.

Menu de contexto
No menu de contexto

Clique com o botão direito em um objeto e selecione Criar componente (CMD/CTRL+K).

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. 

Criar componentes
Componente principal

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ção de instância
Substituição de instância

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. 

Componente principal
Componente principal

Instância
Instância

Instância com substituições
Instância com substituições

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:

Menu de contexto
No menu de contexto na tela de desenho

Clique com o botão direito em uma instância na tela e selecione Editar componente principal.

Painel Ativos
No painel Ativos

Clique com o botão direito em um componente no painel Ativos e selecione Editar componente principal.

Inspetor de propriedades
No Inspetor de propriedades

Selecione o ícone de edição de lápis ao lado de Estado padrão na seção Componente.

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

Substituição em instância de componente
Substituição em uma instância de componente

Tipos de substituições

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

Substituições de estrutura e layout
Tipos de substituições: Texto, Bitmap, Tamanho, Aparência e Layout

  • Texto: você pode editar o conteúdo de texto em uma instância de componente. Por exemplo, ao alterar o rótulo de um componente de botão. 
  • Bitmap: você pode substituir o conteúdo de bitmap em uma instância de componente. Por exemplo, ao substituir uma imagem de um componente de foto de perfil.
  • Tamanho: você pode redimensionar uma instância ao aplicar preenchimento e ajuste responsivo. Por exemplo, ao modificar o tamanho dos campos de texto de um formulário.
  • Aparência: você pode modificar as propriedades de aparência, como cor de preenchimento, borda e desfoque. Por exemplo, ao modificar a cor de fundo para notificações.
  • Layout e estrutura: você pode adicionar, excluir e mover objetos dentro de uma instância de componente. Por exemplo, ao modificar menus suspensos com novas opções de menu.

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

Substituição de aparência
Substituição 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.

Substituições de estrutura e layout
Substituições de estrutura e layout

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: NovoHover, 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.

No modo de Design, clique no botão + ao lado do Estado padrão do componente principal no Inspetor de propriedades e selecione Novo estado.

Por padrão, o novo estado não inclui nenhuma interatividade. Para obter mais informações sobre como vincular uma interação a componentes, consulte Adicionar interatividade aos componentes.

Novo estado
Novo estado

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.

No modo de Design, clique no botão + ao lado do Estado padrão do componente principal no Inspetor de propriedades e selecione Estado hover.

Por padrão, o Estado hover já inclui interatividade. 

Estado Hover
Estado Hover

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. 

No modo de Design, clique no botão + ao lado do Estado padrão do componente principal no Inspetor de propriedades e selecione Estado de alternância.

Uma vez que o estado de alternância é criado, por padrão, o XD irá programar automaticamente em duas interações de toque bidirecionais entre o Estado padrão e o Estado de alternância, tornando-o totalmente interativo.

Estado de alternância
Estado de alternância

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:

Alternar estados

Alternar estados
Alternar estados

Selecione o componente e ative/desative ou alterne entre vários estados no Inspetor de propriedades.

Renomear estados

Renomear estados
Renomear estados

Clique duas vezes no nome do estado de componente no Inspetor de propriedades e adicione um novo nome. Você pode renomear e excluir estados apenas no componente principal. Não é possível renomear o estado padrão.

Excluir estados

Excluir estados
Excluir estados

Clique com o botão direito no estado de componente e selecione Excluir. Ao excluir um estado de componente do componente principal, as instâncias do componente com esse estado ativo retornam ao estado padrão.

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, HoverTeclas 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.

  1. Alterne para a guia Protótipo.
  2. Selecione o estado de componente do qual deseja criar a interação. 
  3. Clique no ícone > no estado de componente ou em + na seção Interação no Inspetor de propriedades para adicionar uma interação.
  4. Selecione Toque (para eventos de clique), Hover (para ações do mouse), Teclas e Gamepad (casos de uso de navegação e acessibilidade) ou Voz (casos de uso de navegação e acessibilidade) como acionador.
  5. Selecione um tipo de ação (como Animação automática ou Transição).
  6. Escolha um estado como destino.
  7. Alterne para a janela de visualização e teste a interatividade do seu componente.
Criar uma interação ao tocar
Conexão de estados de componente para criar uma interação ao tocar

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

Exibir 

Revelar componentes em Ativos
Revelar componentes no painel Ativos

Você pode ver ou arrastar novas instâncias para a tela no painel Ativos.
Para localizar todas as instâncias, clique com o botão direito do mouse em um componente no painel Ativos e selecione Realçar na tela. 
Para localizar componentes no painel Ativos, clique com o botão direito em uma instância de componente na tela e selecione Revelar componente no painel Ativos

Editar, renomear ou excluir

Menu de contexto no painel Ativos
Menu de contexto no painel Ativos

Clique com o botão direito do mouse em um componente no painel Ativos ou selecione uma instância na tela e use as opções do menu de contexto para editar ou excluir. Para renomear componentes, clique com o botão direito do mouse e selecione Renomear. 

Redefinir para um estado principal

Redefinir para estado principal
Redefinir para estado principal

Clique com o botão direito e selecione Redefinir para estado principal para limpar todas as substituições e vinculá-lo novamente ao componente principal.
Para desanexar uma instância do principal, clique com o botão direito do mouse em uma instância e selecione Desagrupar um componente.
 

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?

Pergunte à comunidade

Você tem alguma dúvida ou sugestão? Participe da comunidade do Adobe XD. Gostaríamos muito de ver suas criações e ouvir o que você tem a dizer!

Logotipo da Adobe

Fazer logon em sua conta