Guia do Usuário Cancelar

Trabalhar com componentes aninhados no Adobe XD

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

Para criar um sistema de design, é importante criar componentes de maneira detalhada para garantir reutilização e flexibilidade ideais. Ao criar componentes, o XD permite aninhá-los uns nos outros e criar objetos complexos, como menus, layouts com base em cartões e muito mais. 

Continue lendo para saber como criar e usar componentes aninhados para garantir uma experiência de design perfeita.

Componentes
Trabalhar com componentes aninhados no XD

Novo no XD?

Obter o XD

Aprenda o básico do aplicativo

Já utiliza o Adobe XD?

Atualizar seu aplicativo

Confira as Novidades

Antes de continuar

Familiarize-se com estes conceitos:

Terminologia de componente

Vamos primeiro nos familiarizar com alguns termos associados a componentes aninhados:

  • Componente principal: um componente principal é o componente que define e controla todas as propriedades do componente.
  • Instância de componente: uma instância de componente é uma cópia do componente principal e herda as alterações feitas no componente principal.
  • Componente aninhado: um componente aninhado é um componente dentro de outro componente.
  • Componente externo: um componente externo é um componente que possui outro componente dentro dele.

Criar um componente aninhado

Com componentes aninhados, você pode criar sistemas de design mais avançados. Quando um componente principal é atualizado, todas as suas instâncias recebem a atualização, mesmo que a atualização tenha sido feita em um componente aninhado dentro dele.

Para criar componentes aninhados, você pode seguir um destes métodos:

Método A: copie e cole uma instância de componente dentro de um grupo e converta-a em um componente.

  1. Crie um componente principal de botão.
  2. Copie e cole uma instância do componente do botão dentro de um grupo.
  3. Selecione o grupo e converta-o em um componente. 

Método B: copie e cole uma instância de componente dentro de um componente já existente.

Cole uma instância do componente de botão dentro do grupo

  1. Crie um componente principal de botão.
  2. Copie e cole uma instância do componente de botão em outro componente.

Método C: selecione uma parte do componente e converta-a em um componente.

  1. Crie um componente principal de caixa de diálogo.
  2. Faça uma busca detalhada em um botão dentro do componente.
  3. Converta o botão em um componente.

Exemplo

Vamos usar o Método A para criar um componente de caixa de diálogo.

Colar uma instância do botão

Colar a instância

Cole uma instância do componente de botão dentro do grupo.

Converter em um componente

Criar o componente

Selecione o grupo e transforme-o em um componente.

Crie um componente de botão

Criar um componente de botão

Crie um componente de botão para a caixa de diálogo.

Criar um quadro da caixa de diálogo

Quadro da caixa de diálogo

Crie um contêiner de diálogo com texto e outros objetos dentro, como um grupo.

Práticas recomendadas

Veja algumas práticas recomendadas ao criar componentes aninhados:

  • Você pode criar um componente com vários componentes aninhados dentro dele. No entanto, quando componentes têm vários estados com muitos objetos, o desempenho pode ser prejudicado. Nesses casos, para garantir um desempenho ideal, você pode aninhar componentes em até três níveis e limitar o número de estados por nível a um máximo de dez estados por componente.
  • Não aninhe um componente dentro dele mesmo. Isso pode resultar em um componente inválido, já que a referência do componente será o próprio componente.
  • Se você tiver um componente aninhado com vários estados em um componente principal externo, poderá alterar o estado do componente aninhado. A alteração do estado será propagada a todas as instâncias de componente externas.

Sincronização de componentes aninhados

Com a sincronização de componentes aninhados, as alterações feitas aos componentes aninhados dentro de um componente principal são propagadas a todas as instâncias do componente principal. 

Vamos ver como funciona. 

Exemplo 1: um botão dentro de um contêiner que recebe alterações do botão principal.

  1. Crie um botão como o primeiro componente principal.
  2. Aninhe uma instância do botão dentro de um menu de alternância.
  3. Aninhe uma instância do menu de alternância dentro de um contêiner.

Todas as alterações feitas ao componente principal de botão serão propagadas para todos os botões aninhados dentro do menu de ativação e do contêiner.

Cole uma instância do componente de botão dentro do grupo

Agora, crie duas instâncias do botão principal, duas instâncias do menu de ativação principal e uma instância do contêiner principal.

Vamos ver alguns cenários:

Cenário 1:

Cenário 1

Altere a cor do botão aninhado no menu de ativação principal para azul. 

Todos os botões aninhados nas instâncias do menu de ativação e nos contêineres terão a cor alterada para azul.

No entanto, a cor das duas instâncias do botão principal não será alterada.Isso acontece porque as alterações nos componentes aninhados ocorrem no contexto de seus contêiners. A alteração de cor é aplicada somente a instâncias do botão dentro do menu de ativação. 

Cenário 2:

Cenário 2

Altere a cor do botão dentro do contêiner principal para rosa. O botão dentro da instância do contêiner também ficará rosa.

Observe que a cor dos demais botões não é alterada. Isso acontece porque as alterações nos componentes aninhados ocorrem no contexto de seus contêiners. A alteração de cor é aplicada somente a instâncias do botão dentro do menu de ativação dentro do contêiner. 

Cenário 3:

Cenário 3

Altere a cor do botão aninhado na instância do contêiner para verde.

Nenhum dos outros botões terá a cor alterada para verde, pois essa alteração foi feita em uma instância, não um componente principal, como uma substituição. 

Cenário 4:

Cenário 4

Continuando a partir do cenário 3, altere a cor do botão aninhado no contêiner principal para violeta. 

O botão aninhado na instância do contêiner não terá a cor alterada, pois ele já tem uma substituição.

Observações importantes

  • Componentes aninhados não podem ser componentes principais. Portanto, se precisar fazer a alteração no componente principal, clique com o botão direito no componente aninhado e selecione Editar componente principal
  • Se um componente aninhado em uma instância do componente externo for trocada, a opção Redefinir para estado principal no componente aninhado do componente principal não alterará a instância com o componente trocado. 

Práticas recomendadas

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

  • 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 componente principal.

Bibliotecas da Creative Cloud ajudam a distribuir estilos e componentes do seu sistema de design para que eles possam ser reutilizados com consistência em seus documentos. Para criar e distribuir um sistema de design por meio das Bibliotecas da Creative Cloud, selecione os ativos do sistema de design adicionando cores, estilos de caractere e componentes ao painel Ativos de documento e publique-os como uma biblioteca para reutilizá-los em todos os projetos do XD e outros aplicativos da Creative Cloud. Para obter mais informações sobre como usar as Bibliotecas da Creative Cloud, consulte Trabalhar com as Bibliotecas da Creative Cloud no XD.

Perguntas frequentes

Nas versões anteriores do XD, as alterações feitas em um componente aninhado não foram atualizadas nas instâncias do componente externo. Para obter uma experiência aprimorada, abra seus documentos na versão mais recente do XD.

Saiba mais

Para saber mais sobre os componentes aninhados no XD, assista a este vídeo.
Duração: 10 minutos

O que vem por aí?

Agora você já sabe como trabalhar com componentes no XD. Continue em frente e aprenda a compartilhar seus designs com designers ou colaboradores para receber feedback.

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!

Receba ajuda com mais rapidez e facilidade

Novo usuário?