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.
Última atualização em
17 de fev de 2022
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.
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ê quiser atribuir duas ações em um único acionador como Tocar, defina o primeiro botão Ação + no Inspetor de propriedades como Sobrepor 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.
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 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.
Saiba mais
Para saber mais sobre sobreposições no XD, assista a este vídeo.
Tempo de visualização: 10 minutos
Você também pode consultar a comunidade do XD para encontrar mais tutoriais e arquivos de amostra.
Mais itens semelhantes
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.
