Guia do Usuário Cancelar

Adicionar vários estados aos componentes

  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. Requisitos de sistema
      1. Requisitos de hardware e software
      2. Adobe XD, Big Sur e Apple Silicon | macOS 11
    5. Noções básicas sobre a área de trabalho
    6. Alterar o idioma do aplicativo no Adobe XD
    7. Acessar kits de design de interface
    8. Acessibilidade no Adobe XD
    9. Atalhos de teclado
    10. Dicas e truques
    11. Opções de assinatura do Adobe XD
    12. Alterações no plano inicial do XD
  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
  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 adicionar vários estados aos componentes do seu sistema de design para desenvolver conteúdo interativo facilmente.

Os componentes que alteram a aparência com base nas interações do usuário são imprescindíveis para a criação de protótipos de alta fidelidade.

Você pode criar um componente, adicionar variações (estados) a ele e conectá-lo para imitar o comportamento do usuário no mundo real (sem precisar copiar seus componentes várias vezes). 

Ter componentes com estados também facilita o gerenciamento de seus ativos e a criação de sistemas de design interativos. 

Exemplos comuns de componentes com estados são botões, caixas de seleção e botões de ativar/desligar animados. Esses componentes precisam mudar quando os usuários interagem com eles, tocando ou passando o mouse sobre eles.

Adicionar estados do componente

Depois de criar um componente, o Inspetor de propriedades terá uma nova seção que lista o componente com um Estado padrão. É possível adicionar três tipos de estados para seus componentes: Novo estadoestado Hover ou estado de alternância. Leia para saber como adicionar um estado.

Novo estado

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

Clique no botão + próximo ao Estado padrão do componente principal no Inspetor de propriedades e selecione Novo estado.

Novo estado não possui nenhuma interatividade inserida no estado. É necessário conectar a interação no modo de Protótipo. Para obter mais informações, consulte Adicionar interatividade aos componentes.

Estado Hover

Use o estado Hover se você deseja que seu componente seja alterado e exibido em um estado diferente quando um usuário passar o mouse sobre o componente. 

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.

Ao usar o estado Hover, você não precisa ir para o modo de Protótipo para conectar a interação. Isso é feito automaticamente para você.

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.

Adição de estados a um componente
Adição de estados a um componente

 Você pode adicionar estados apenas a um componente principal. As instâncias de componentes sempre herdam seus estados do componente principal.

Visualizar componentes em diferentes estados

Depois de criar os estados do seu componente, você pode editar as propriedades desse componente e ver como ele é exibido para o usuário que interage com ele. 

  1. Selecione o componente.
  2. Vá para o Inspetor de propriedades e alterne entre vários estados.
Alternar estados usando o Inspetor de propriedades
Alternar estados usando o Inspetor de propriedades

Adicionar interatividade aos componentes

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.

Adicionar interatividade
Conexão de estados de componente para criar uma interação ao tocar

  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.

 Os estados estão listados acima das pranchetas no menu suspenso, separados por uma divisória.

 

Várias interações para um estado de componente
Várias interações para um estado de componente

Você pode definir várias interações para o mesmo estado de componente. Por exemplo, se você tiver um botão de liga/desliga que tem um estado ligado padrão, um estado desligado e um estado Hover, poderá definir interações separadas no estado padrão. Repita as etapas 4 a 7 para definir a interação com o estado adicional. 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.

Editar estados de componente

Quando você define uma interação em um estado de componente principal, todas as instâncias desse componente herdam automaticamente essas interações. Isso significa que, se você conectar um componente a uma prancheta ou estado específico, todas as instâncias desse componente também conterão essas interações. 

Quando você tem uma instância selecionada na tela e deseja editar estados existentes ou adicionar novos estados ao componente principal, é possível fazê-lo por meio de uma das seguintes opções:

Opção 2

Clique em Editar para alternar a seleção para o componente principal e adicionar ou editar estados.

Clique em Editar para alternar a seleção para o componente mestre de modo a adicionar ou editar estados

Opção 1

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

As instâncias de componente são vinculadas ao componente principal. As alterações em um componente principal são reproduzidas nas instâncias. Para obter mais informações, consulte Gerenciar componentes com uma única fonte.

Renomear, reordenar e excluir estados do componente

Renomeie um estado do componente: clique duas vezes no nome do estado do componente no Inspetor de propriedades e digite um novo nome.

Reordene estados do componente principal: arraste os estados de um componente principal no Inspetor de propriedades para reordená-los.

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

 Você pode renomear e excluir estados apenas no componente principal. Não é possível renomear o estado padrão.

Publicar e compartilhar estados de componente

Você pode publicar componentes e os estados associados a eles em uma Biblioteca da Creative Cloud pelo painel Bibliotecas e distribui-los como parte de um sistema de design. Para obter mais informações, consulte Trabalhar com as Bibliotecas da Creative Cloud no XD.

Gerenciar componentes com uma única fonte

Para simplificar o gerenciamento de estados do componente, você pode adicionar, renomear e excluir apenas estados de um componente principal. As instâncias desse componente herdam automaticamente quaisquer alterações de estado feitas no componente principal. É possível identificar facilmente o componente principal pelo diamante preenchido de verde na tela ou pela seção Componente do Inspetor de propriedades. As instâncias têm um diamante oco verde. 

Herança de estados do componente

Siga estes princípios ao editar estados em componentes principais e instâncias:

  • Você pode substituir propriedades (texto, bitmap, tamanho, aparência ou alterações na estrutura) para estados, assim como você pode substituir uma instância de componente. 
  • Quando você edita o estado em um componente principal, esse estado é atualizado em todas as instâncias.
  • Quando você edita o estado em uma instância, ele é tratado como uma substituição exclusiva e não sincroniza mais essa propriedade com as alterações do estado 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.

Redefinir uma substituição de estado para o componente principal original
Redefinir uma substituição de estado para o componente principal original

Para obter mais informações sobre como as substituições de componente funcionam, consulte Trabalhar com componentes no XD.

Estados de componente vinculados entre documentos

Você pode criar e manter uma única fonte para todos os seus componentes reutilizáveis, juntamente com seus estados e interações definidas. Por exemplo, se você tiver um componente de botão com 5 estados definidos (Principal, Secundário, Hover, Tocar e Desativado), quando você copia e cola esse componente nos documentos, o XD cria um componente vinculado que mantém todos os estados do componente definido juntamente com as interações de estado. 

Se você alterar as propriedades do componente vinculado (estilo, interações etc.) no documento de origem, o XD enviará uma notificação para os documentos que tiverem instâncias do componente vinculado para exibir as atualizações. Assim, você pode visualizar as alterações e aceitá-las ou ignorá-las. 

Os componentes vinculados só permitem interações definidas entre estados, não pranchetas.

Exemplos e arquivos de amostra

Deseja criar um botão de alternância que é ativado e desativado quando um usuário toca nele? 

Criar um botão de alternância animado usando nosso ativo de exemplo
Criar um botão de alternância animado usando nosso ativo de exemplo

  1. Baixe o arquivo de amostra do botão de alternância e abra-o no XD.
  2. Selecione o objeto inteiro (verifique se o círculo está selecionado) e pressione Cmd+K (macOS) ou Ctrl+K (Win).
  3. Adicione um novo estado e denomine-o Desativado.
  4. No estado Desativado, selecione o retângulo arredondado e altere o preenchimento para cinza. Selecione o círculo e mova-o para a esquerda.
  5. No modo de Protótipo, conecte as seguintes interações:
    • Estado padrão: defina o Acionador como Tocar, a Ação como Animação automática e o Destino como Desativado.
    • Estado desativado: defina o Acionador como TocarAção como Animação automática e Destino como Estado padrão.
  6. (Opcional): se você deseja que o botão de alternância brilhe ao passar o mouse sobre ele, selecione o componente, adicione o estado Hover e edite o componente para ter um efeito de brilho.

Saiba mais

Assista a este vídeo e saiba mais sobre como criar interatividade usando componentes com estados. 

Duração: 7 minutos.

O que vem por aí?

Apresentamos o essencial sobre o uso de componentes com estados. Acompanhe esta publicação da comunidade para saber como usar este recurso para criar caixas de seleção. 

Tem alguma dúvida ou sugestão?

Pergunte à comunidade

Se você tiver alguma dúvida ou sugestão para compartilhar, venha participar da comunidade do Adobe XD. Adoraríamos ver suas criações e ouvir o que você tem a dizer.

Logotipo da Adobe

Fazer logon em sua conta