Alterne para a guia Protótipo.
- Guia do usuário do Adobe XD
- Introdução
- Novidades no Adobe XD
- Perguntas frequentes
- Criar designs e protótipos e compartilhar com o Adobe XD
- Gerenciamento de cores
- Requisitos de sistema
- Noções básicas sobre a área de trabalho
- Alterar o idioma do aplicativo no Adobe XD
- Acessar kits de design de interface
- Acessibilidade no Adobe XD
- Atalhos de teclado
- Dicas e truques
- Design
- Pranchetas, guias e camadas
- Formas, objetos e caminho
- Selecionar, redimensionar e girar objetos
- Mover, alinhar, distribuir e organizar objetos
- Agrupar, bloquear, duplicar, copiar e virar objetos
- Definir traçado, preenchimento e sombra projetada para objetos
- Criar elementos de repetição
- Criar designs de perspectiva com transformações em 3D
- Editar objetos usando operações boolianas
- Texto e fontes
- Componentes e estados
- Mascaramento e efeitos
- Layout
- Vídeos e animações Lottie
- Protótipo
- Criar protótipos interativos
- Animar protótipos
- Propriedades de objeto compatíveis com a Animação automática
- Criar protótipos com teclados e controles
- Criar protótipos usando reprodução e comandos de voz
- Criar transições temporizadas
- Adicionar sobreposições
- Criar protótipos de voz
- Criar links de âncora
- Criar hiperlinks
- Visualizar designs e protótipos
- Compartilhar, exportar e analisar
- Compartilhar pranchetas selecionadas
- Compartilhar designs e protótipos
- Definir permissões de acesso para links
- Trabalhar com protótipos
- Revisar protótipos
- Trabalhar com especificações de design
- Compartilhar especificações de design
- Inspecionar especificações de design
- Navegar em especificações de design
- Revisar e comentar especificações de design
- Exportar ativos de design
- Exportar e baixar ativos de especificações de design
- Compartilhamento em grupo para corporações
- Fazer backup ou transferir ativos do XD
- Sistemas de design
- Sistemas de design com as Bibliotecas da Creative Cloud
- Trabalhar com ativos de documento no Adobe XD
- Trabalhar com as Bibliotecas da Creative Cloud no Adobe XD
- Migrar de ativos vinculados para as Bibliotecas da Creative Cloud
- Trabalhar com tokens de design
- Usar ativos das Bibliotecas da Creative Cloud
- Documentos na nuvem
- Integrações e plug-ins
- Trabalhar com ativos externos
- Trabalhar com ativos de design do Photoshop
- Copiar e colar ativos do Photoshop
- Importar ou abrir designs do Photoshop
- Trabalhar com ativos do Illustrator no Adobe XD
- Abrir ou importar designs do Illustrator
- Copiar vetores do Illustrator para o XD
- Plug-ins para o Adobe XD
- Criar e gerenciar plug-ins
- Integração do JIRA com o XD
- Plug-in do Slack para XD
- Plug-in do Zoom para XD
- Publicar o design do XD no Behance
- XD para iOS e Android
- Solução de problemas
- Problemas conhecidos e corrigidos
- Instalação e atualizações
- Inicialização e falha
- Documentos na nuvem e bibliotecas da Creative Cloud
- Prototipagem, publicação e revisão
- Não é possível gravar interações de protótipo no macOS Catalina
- Problemas com fluxos de trabalho de publicação
- Links publicados não são exibidos nos navegadores
- Protótipos não são renderizados corretamente nos navegadores
- Painel de comentários aparecendo repentinamente em links compartilhados
- Não é possível publicar bibliotecas
- Importação, exportação e trabalho em outros aplicativos
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.
Familiarize-se com esses conceitos antes de prosseguir no XD:
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:
Clique no ícone + na seção Componente do Inspetor de propriedades.
Clique no botão + na seção Componentes do painel Ativos.
Clique com o botão direito em um objeto e selecione Criar componente (Ctrl/Cmd+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.
É possível ver o nome do componente selecionado no Inspetor de propriedades. Para renomear um componente, clique duas vezes no nome no Inspetor de propriedades.
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.
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.
- A instância do componente anterior após a edição do componente principal? Clique com o botão direito no componente e selecione Voltar para a instância anterior.
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:
Clique com o botão direito em uma instância na tela e selecione Editar componente principal (Shift + Ctrl/Cmd + K).
Clique com o botão direito em um componente no painel Ativos e selecione Editar componente principal.
Selecione o ícone de edição de lápis ao lado de Estado padrão na seção Componente.
Quando terminar de editar o componente principal e quiser retornar à instância anterior, clique com o botão direito no componente e selecione Voltar para a instância anterior.
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 da 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:
- 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
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.
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.
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.
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.
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
Selecione o componente e ative/desative ou alterne entre vários estados no Inspetor de propriedades.
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
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, 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.
-
-
Selecione o estado de componente do qual deseja criar a interação.
-
Clique no ícone > no estado de componente ou em + na seção Interação no Inspetor de propriedades para adicionar uma interação.
-
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.
-
Selecione um tipo de ação (como Animação automática ou Transição).
-
Escolha um estado como destino.
-
Alterne para a janela de visualização e teste a interatividade do seu componente.
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
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
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
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?
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!