Guia do Usuário Cancelar

Adicionar sobreposições

Pesquisar

Última atualização em 25 de fev de 2022

Guia do usuário do Adobe XD
Introdução
Design
1. Pranchetas, guias e camadas
2. Formas, objetos e caminho
3. Texto e fontes
  1. Trabalhar com ferramentas de desenho e texto
  2. Fontes no Adobe XD
4. Componentes e estados
5. Mascaramento e efeitos
6. Layout
7. Vídeos e animações Lottie
Protótipo
Compartilhar, exportar e analisar
Sistemas de design
Documentos na nuvem
Integrações e plug-ins
XD para iOS e Android
1. Visualizar em dispositivos móveis
2. Perguntas frequentes sobre o Adobe XD para dispositivos móveis
Solução de problemas
1. Problemas conhecidos e corrigidos
  1. Problemas conhecidos
  2. Problemas corrigidos
2. Instalação e atualizações
3. Inicialização e falha
4. Documentos na nuvem e bibliotecas da Creative Cloud
5. Prototipagem, publicação e revisão
6. Importação, exportação e trabalho em outros aplicativos

Saiba como adicionar uma sobreposição para simular efeitos de deslizamento interativos.

O Adobe XD permite adicionar elementos sobrepostos a outra prancheta, em vez de duplicá-los em várias pranchetas, para simular efeitos de listas suspensas, teclados deslizantes e muito mais.

Teclado exibido como sobreposição em uma prancheta

No modo de Design, selecione uma prancheta de origem e a outra prancheta com a qual deseja sobrepor a primeira. Você pode reutilizar uma prancheta de sobreposição várias vezes.
No modo de Protótipo, arraste e solte o conector da prancheta de origem na prancheta com o conteúdo de sobreposição. Clique no conector para exibir o painel Interação que aparece no Inspetor de propriedades e configure as seguintes opções:
- Acionador: selecione uma opção.
- Ação: selecione Sobreposição. Se você deseja atribuir duas ações a um único acionador, como Tocar, defina o primeiro botão Ação + no Inspetor de propriedades como Sobreposição e defina o segundo botão Ação + como uma ação não transitória, como Reprodução de áudio ou Reprodução de fala.
- Animação: selecione o tipo de animação. Se você selecionar Deslizar para cima ou Deslizar para baixo, o XD posicionará automaticamente a sobreposição na borda da prancheta de origem.
- Atenuação: selecione uma opção para aplicar efeitos de atenuação.
- Duração: insira a duração de tempo. A duração máxima que pode ser definida para uma transição entre duas pranchetas é de cinco segundos.
Adicionar um teclado como sobreposição na prancheta de origem
Para ajustar a posição de uma sobreposição na prancheta de origem, clique, arraste e solte o botão de posição verde (+).
Para visualizar as sobreposições em navegadores compatíveis, clique em .

Sobreposições aninhadas

O Adobe XD não aceita sobreposições aninhadas, isto é, quando você adiciona uma sobreposição sobre outra sobreposição. Nesses casos, quando você conecta a primeira prancheta de sobreposição à outra prancheta, a transição da primeira sobreposição ocorre antes da transição da segunda.

Exemplos e arquivos de amostra

Deseja criar sobreposições interativas usando efeitos de desfoque do fundo?

Selecione uma prancheta de origem e uma prancheta de sobreposição com fundo desfocado. Para obter mais informações sobre como deixar o fundo desfocado, consulte Trabalhar com efeitos de desfoque no XD.
Mude para o modo de Protótipo para conectar a prancheta de origem à prancheta de sobreposição.
Selecione as seguintes opções no Inspetor de propriedades:
- Acionador: selecione Tocar.
- Ação: selecione Sobreposição.
- Animação: selecione Dissolver.
- Atenuação: selecione Fade Out.
- Duração: insira 0,2s.
Conecte quantas pranchetas de origem desejar à prancheta de sobreposição.
Use a opção Visualizar no desktop para visualizar o efeito.

Para obter um tutorial detalhado e arquivos de amostra para download, consulte Criar uma sobreposição interativa.

Quer saber como usar sobreposições para criar um efeito de lista suspensa deslizável? Assista aos tutoriais no final deste exemplo e siga estas etapas:

Selecione uma prancheta de origem e uma prancheta de sobreposição que tenha uma lista suspensa de itens.
Mude para o modo de Protótipo para conectar a prancheta de origem à prancheta de sobreposição.
Selecione as seguintes opções no Inspetor de propriedades:
- Acionador: selecione Tocar.
- Ação: selecione Sobreposição.
- Animação: selecione Deslizar para a direita.
- Atenuação: selecione o efeito Fade Out.
- Duração: insira 0,3s.
Conecte quantas pranchetas de origem desejar à prancheta de sobreposição.
Use a opção Visualizar no desktop para visualizar o efeito.