Guia do Usuário Cancelar

Trabalhar com componentes aninhados no Adobe XD

Pesquisar
XD

XD

Abrir aplicativo
  1. Guia do usuário do Adobe XD
  2. Introdução
    1. Novidades no Adobe XD
    2. Perguntas frequentes
    3. Criar designs e protótipos e compartilhar com o Adobe XD
    4. Gerenciamento de cores
    5. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    6. Noções básicas sobre a área de trabalho
    7. Alterar o idioma do aplicativo no Adobe XD
    8. Acessar kits de design de interface
    9. Acessibilidade no Adobe XD
    10. Atalhos de teclado
    11. Dicas e truques
  3. Design
    1. Pranchetas, guias e camadas
      1. Introdução às pranchetas
      2. Usar guias e grades
      3. Criar pranchetas com rolagem
      4. Trabalhar com camadas
      5. Criar grupos de rolagem
    2. Formas, objetos e caminho
      1. Selecionar, redimensionar e girar objetos
      2. Mover, alinhar, distribuir e organizar objetos
      3. Agrupar, bloquear, duplicar, copiar e virar objetos
      4. Definir traçado, preenchimento e sombra projetada para objetos
      5. Criar elementos de repetição
      6. Criar designs de perspectiva com transformações em 3D
      7. Editar objetos usando operações boolianas
    3. Texto e fontes
      1. Trabalhar com ferramentas de desenho e texto
      2. Fontes no Adobe XD
    4. Componentes e estados
      1. Trabalhar com componentes
      2. Trabalhar com componentes aninhados
      3. Adicionar vários estados aos componentes
    5. Mascaramento e efeitos
      1. Criar uma máscara com formas
      2. Trabalhar com efeitos de desfoque
      3. Criar e modificar degradês
      4. Aplicar efeitos de mesclagem
    6. Layout
      1. Redimensionamento responsivo e restrições
      2. Definir preenchimento fixo para componentes e grupos
      3. Criar designs dinâmicos com pilhas
    7. Vídeos e animações Lottie
      1. Trabalhar com vídeos
      2. Criar protótipos usando vídeos
      3. Trabalhar com animações Lottie
  4. Protótipo
    1. Criar protótipos interativos
    2. Animar protótipos
    3. Propriedades de objeto compatíveis com a Animação automática
    4. Criar protótipos com teclados e controles
    5. Criar protótipos usando reprodução e comandos de voz
    6. Criar transições temporizadas
    7. Adicionar sobreposições
    8. Criar protótipos de voz
    9. Criar links de âncora
    10. Criar hiperlinks
    11. Visualizar designs e protótipos
  5. Compartilhar, exportar e analisar
    1. Compartilhar pranchetas selecionadas
    2. Compartilhar designs e protótipos
    3. Definir permissões de acesso para links
    4. Trabalhar com protótipos
    5. Revisar protótipos
    6. Trabalhar com especificações de design
    7. Compartilhar especificações de design
    8. Inspecionar especificações de design
    9. Navegar em especificações de design
    10. Revisar e comentar especificações de design
    11. Exportar ativos de design
    12. Exportar e baixar ativos de especificações de design
    13. Compartilhamento em grupo para corporações
    14. Fazer backup ou transferir ativos do XD
  6. Sistemas de design
    1. Sistemas de design com as Bibliotecas da Creative Cloud
    2. Trabalhar com ativos de documento no Adobe XD
    3. Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
    4. Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
    5. Trabalhar com tokens de design 
    6. Usar ativos das Bibliotecas da Creative Cloud
  7. Documentos na nuvem
    1. Documentos na nuvem no Adobe XD
    2. Colaborar e coeditar designs
    3. Coeditar documentos compartilhados com você
  8. Integrações e plug-ins
    1. Trabalhar com ativos externos
    2. Trabalhar com ativos de design do Photoshop
    3. Copiar e colar ativos do Photoshop
    4. Importar ou abrir designs do Photoshop
    5. Trabalhar com ativos do Illustrator no Adobe XD
    6. Abrir ou importar designs do Illustrator
    7. Copiar vetores do Illustrator para o XD
    8. Plug-ins para o Adobe XD
    9. Criar e gerenciar plug-ins
    10. Integração do JIRA com o XD
    11. Plug-in do Slack para XD
    12. Plug-in do Zoom para XD
    13. Publicar o design do XD no Behance
  9. XD para iOS e Android
    1. Visualizar em dispositivos móveis
    2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
  10. Solução de problemas
    1. Problemas conhecidos e corrigidos
      1. Problemas conhecidos
      2. Problemas corrigidos
    2. Instalação e atualizações
      1. O XD aparece como não compatível no Windows
      2. Código de erro 191
      3. Código de erro 183
      4. Problemas ao instalar plug-ins XD
      5.  Solicitação para instalar e reinstalar o XD no Windows 10
      6. Problemas com a migração de preferências
    3. Inicialização e falha
      1.  O XD trava ao ser iniciado no Windows 10
      2.  O XD fecha ao fazer logoff da Creative Cloud
      3. Problema com o status da assinatura no Windows
      4. Aviso de aplicativo bloqueado ao iniciar o XD no Windows
      5. Geração de dump de falha no Windows
      6. Coleta e compartilhamento de registros de falhas
    4. Documentos na nuvem e bibliotecas da Creative Cloud
      1. Problemas com os documentos na nuvem do XD
      2. Problemas com componentes vinculados
      3. Problemas com bibliotecas e links
    5. Prototipagem, publicação e revisão
      1. Não é possível gravar interações de protótipo no macOS Catalina
      2. Problemas com fluxos de trabalho de publicação
      3. Links publicados não são exibidos nos navegadores
      4. Protótipos não são renderizados corretamente nos navegadores
      5. Painel de comentários aparecendo repentinamente em links compartilhados
      6. Não é possível publicar bibliotecas
    6. Importação, exportação e trabalho em outros aplicativos
      1. Exportação e importação no XD
      2. Arquivos do Photoshop no XD
      3. Arquivos do Illustrator no XD
      4. Exportar do XD para o After Effects
      5. Arquivos do Sketch no XD
      6. Aplicativos de terceiros não visíveis na exportação

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.

Não. Ao abrir um documento existente com componentes aninhados na versão mais recente do XD, ele migra automaticamente esses componentes para o novo modelo para agilizar seu trabalho.

Quando o documento é aberto no XD, esses componentes específicos não correspondem às versões no painel Ativos. Para migrar sem perda de dados, os componentes principais são convertidos em instâncias na tela. Se quiser trazer seu componente principal de volta à tela, clique com o botão direito na instância externa e selecione Editar componente principal. Se quiser deixar o componente principal igual à instância na tela, você pode transferir todas as substituições necessárias da instância para o componente principal. 

Para receber atualizações, abra os documentos vinculados na versão mais recente do XD. Todos os documentos vinculados futuramente precisarão ser abertos na versão mais recente do XD para garantir o comportamento correto. 

A partir do XD 34, não é mais possível aninhar um componente principal dentro de outro. Ao fazer algo que antes criava um componente principal aninhado, agora o componente interno é alterado para uma instância. 

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?

Links rápidos

Veja todos os seus planos Gerenciar seus planos
Ver links rápidos
Ocultar links rápidos

Avisos legais | Política de privacidade online