No modo de Design, selecione o texto dentro do objeto de texto para o qual deseja criar um hiperlink.
Saiba como criar um link para páginas da Web externas por meio de protótipos do Adobe XD.
Qualquer texto, objeto ou componente em seu design pode ser vinculado a uma página da Web externa ou a um endereço de email. Depois de criar um hiperlink, você pode visualizá-lo e compartilhar as especificações de design com as partes interessadas.
Criar um hiperlink do texto
Para vincular um texto a uma página da Web ou a um endereço de email, execute as seguintes etapas:
Link para uma página da Web segura
Para vincular a uma página da Web segura (https), digite o URL da página da Web. Exemplo: https://www.adobe.com.
Vincular a um endereço de email
Para vincular a um endereço de email, digite mailto: seguido do endereço de email do destinatário. Exemplo: mailto:john@xyz.com.
Depois de definir um hiperlink de texto no modo de Design:
- Na tela, o texto com hiperlink é sublinhado por padrão.
- Se somente uma parte do texto estiver com hiperlink, ao selecionar o objeto de texto na tela, você verá um traço (—) no campo Insira o URL aqui.
- No modo de Protótipo, se um objeto de texto que contém hiperlinks for selecionado, os hiperlinks serão exibidos no Inspetor de propriedades.
- Você pode editar um hiperlink de texto no modo de Design ou Protótipo.
Quando você publica e compartilha o link de especificações de design, as partes interessadas podem inspecionar o hiperlink.
Criar um hiperlink de objeto ou componente
Para vincular um objeto ou componente a uma página da Web ou a um endereço de email, execute as seguintes etapas:
Link para uma página da Web segura
Para vincular a uma página da Web segura (https), digite o URL da página da Web. Exemplo: https://www.adobe.com.
Vincular a um endereço de email
Para vincular a um endereço de email, digite mailto: seguido do endereço de email do destinatário. Exemplo: mailto:john@xyz.com.
Para exibir o hiperlink, clique em Visualização no desktop.
Quando você clica em um hiperlink, ele sempre será aberto em uma guia separada do navegador.
Quando você publica e compartilha o link de especificações de design, as partes interessadas podem inspecionar o hiperlink.
Texto de hiperlink nos modos de Design e Protótipo
Além de definir um hiperlink para texto no modo de Design, você pode definir um hiperlink para seu objeto de texto no modo de Protótipo. O hiperlink definido no modo de Design tem prioridade em relação ao hiperlink no modo de Protótipo. Em Visualização no desktop ou link de protótipo:
- Quando você clica em uma parte do texto que não inclui hiperlinks definidos, o hiperlink definido no modo de Protótipo é aberto.
- Se você criar um hiperlink para o texto inteiro em um objeto de texto no modo de Design e criar um hiperlink para o objeto de texto no modo de Protótipo usando o acionador Tocar, o hiperlink do modo de Protótipo não funcionará.
Aplicativo do XD:
- Se você adicionar um URL com um protocolo diferente de https ou mailto ou sem um protocolo, ou o URL tem um domínio inválido, você receberá um aviso. Corrija o URL.
Visualização no desktop e link de protótipo:
- Quando você clica em um hiperlink que tem um protocolo diferente de https ou mailto ou não tenha um protocolo ou o URL tenha um domínio inválido, o URL não será aberto. Você receberá uma mensagem de erro na parte inferior da tela.
- Quando você clica em um hiperlink que tem um domínio válido, o XD impõe uma verificação de segurança no site vinculado. Se a verificação de segurança falhar, você receberá um aviso de segurança. Você pode optar por continuar ou sair do URL.
Saiba mais
Assista a este vídeo de 3 minutos para saber mais sobre como trabalhar com hiperlinks no XD.
Recursos relacionados
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!
Criar protótipos de UX com o Adobe XD
Crie modelos interativos para sites e aplicativos para dispositivos móveis.