Criar protótipos interativos

Alterne para o modo de Protótipo.

Clique na prancheta que deseja definir como tela inicial. Um ícone cinza é exibido no canto superior esquerdo.

Clique no ícone inicial. Ele muda para azul indicando que a prancheta ou tela agora está definida como tela inicial.

Para definir uma prancheta diferente como tela inicial, clique no ícone inicial associado à prancheta.

Alterne para o modo de Protótipo.

Clique no objeto que deseja vincular.

Uma alça de conexão com uma seta é exibida no objeto. Ao passar o ponteiro do mouse sobre a alça, o cursor muda para um conector.

Clique e arraste o mouse para ver o conector. Solte o mouse na tela ou prancheta de destino.

Quando você conecta o primeiro elemento, a prancheta do elemento é definida como a prancheta inicial. 

No painel Interação exibido no Inspetor de propriedades, você pode especificar o seguinte:

• Transição e duração: se deseja manter a posição da rolagem ao fazer a transição para outra prancheta, selecione Manter posição de rolagem. Essa opção é útil ao criar protótipos de barras de navegação ou rodapés fixos. Se o usuário rolar na prancheta original, a próxima prancheta reconhecerá a posição de rolagem da pranchetaoriginal. Ao clicar em uma prancheta ou em qualquer elemento na prancheta, você pode controlar a posição de rolagem para manter o local original de uma tela para a próxima. O controle impede a rolagem repetida para frente e para trás no arquivo de projeto. Por exemplo, se um usuário rolar para baixo até y = 1000 na prancheta A, a transição para a prancheta B será padronizada para y = 1000. Se a prancheta original não tiver rolagem definida, a opção Manter posição de rolagem ficará inativa.
• Sobreposição: se você deseja simular os estados ou as transições como menus suspensos e teclados deslizantes, selecione Sobreposição.

Pressione Esc ou clique fora do pop-up para descartá-lo.

Repita as etapas acima para vincular todos os elementos interativos em seu projeto.

DICA:

No modo de Protótipo, para agilizar o processo de criação de interações:

• Você pode copiar e colar objetos em pranchetas. O objeto é copiado e colado junto com sua interação.
• Você também pode copiar e colar uma interação sozinha. Copie um objeto, clique com o botão direito do mouse em outro objeto e selecione Colar interação. Somente a interação é colada.

• Para apontar o elemento para uma tela diferente, clique na alça novamente e arraste-a para a tela desejada.

• Para exibir as conexões de/para uma prancheta específica, selecione o título da prancheta.

• Para excluir uma interação, remova a alça de destino do conector de uma prancheta de destino e arraste-a para a área de rascunho.

O Adobe XD permite o uso de atalhos de teclado e botões de controle para simular aplicativos de desktop nativos e criar protótipos de experiências de jogo ou de design ainda melhores. Durante a vinculação de um protótipo, você pode selecionar Teclas/Controle na lista suspensa da opção Acionador e atribuir uma tecla ou botão. Você pode usar esses acionadores com Tocar, Arrastar, Tempo e Voz, o que permite criar protótipos para diferentes casos de uso, como aplicativos de desktop, jogos e apresentações.

No XD, mude para o modo de Protótipo.

Para exibir o conector, selecione a prancheta e passe o ponteiro do mouse sobre a alça.

Clique, arraste e solte o conector da prancheta de origem para a prancheta de destino. Quando você conecta o primeiro elemento, a prancheta do elemento é definida como a prancheta inicial.

Clique no conector para exibir o painel Interação no Inspetor de propriedades e selecione as seguintes opções:

• Acionador: defina como Tempo.
• Atraso: defina o tempo de atraso de uma transição em .
• Duração: defina a duração da transição em segundos.
• Ação: defina como Transição.

Selecione o ícone Visualizar no desktop   para visualizar as alterações.

No aplicativo de desktop, clique no botão Compartilhar na parte superior direita e selecione Compartilhar para revisão. Assim que o link for criado, copie-o e abra o protótipo no navegador. As transições temporizadas são reproduzidas conforme você cria o design no aplicativo de desktop do XD.

Para interromper a transição temporizada, pressione a tecla de seta para trás ou o botão de navegação de seta para trás e você será levado de volta à tela anterior.

Quando você interrompe a transição pela primeira vez, o Adobe XD exibe a informação de que a transição temporizada foi interrompida. Para resumir, pressione o botão de navegação de seta direita ou a tecla de seta direita.

No modo de Protótipo, selecione o elemento que você deseja vincular. Quando uma pequena seta for exibida, clique na seta e a ação será definida automaticamente como a prancheta anterior. Você também pode vincular o elemento a uma prancheta e selecionar Ação > Prancheta anterior.

Quando a Ação for definida para Prancheta anterior, o ícone muda.

Use a janela anterior para visualizar o vínculo.

No modo de Protótipo, selecione Destino > Nenhum.

Você também pode arrastar o fio da prancheta para a área de rascunho (o espaço cinza entre as pranchetas).

Visualize os vínculos em um navegador.

Qualquer link de destino definido anteriormente do elemento é removido.

Clique no ícone Visualizar no desktop. A janela Visualizar é exibida na prancheta em foco.

Para testar a navegação entre as telas, clique nos elementos interativos.

Você pode editar o design e as interações de seu protótipo enquanto visualiza na janela de visualização. As alterações ficam disponíveis para visualização imediatamente.

Para gravar a interação, clique no ícone Gravar na janela de visualização. Para terminar a gravação, pressione Esc ou clique no ícone Gravar novamente.

Especifique um nome e o local onde deseja salvar a gravação. A gravação é salva como um arquivo .mp4.