Criar hiperlinks

Última atualização em 21 de mar de 2022

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:

No modo de Design, selecione o texto dentro do objeto de texto para o qual deseja criar um hiperlink.

No campo Insira o URL aqui na seção Texto do Inspetor de propriedades, faça o seguinte:

Link para uma página da Web segura

Link para uma página da Web segura
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

Vincular a um endereço de email
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.
Uma parte do objeto de texto inclui um hiperlink (modo de Design)
Uma parte do objeto de texto inclui um hiperlink (modo de Design)

Duas partes do texto que inclui um hiperlink dentro de um objeto de texto (modo de Protótipo)
Duas partes do texto que inclui um hiperlink dentro de um objeto de texto (modo de 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:

Alterne para o modo Protótipo e selecione o objeto ou componente que você deseja vincular.

Clique na seta azul no objeto e, no Inspetor de propriedades, defina o Acionador como Tocar em, Teclas e controle ou Voz.

Defina o Tipo de ação como Hiperlink.

No campo Destino, faça o seguinte:

Link para uma página da Web segura

Link para uma página da Web
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

Vincular a um endereço de email
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á.
Herança de hiperlink do objeto
Herança de hiperlink do objeto

Texto totalmente com hiperlink nos modos Design e protótipo
Texto totalmente com hiperlink nos modos Design e protótipo

Observações importantes

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.
Aviso quando você não usa protocolos https ou mailto
Aviso quando você não usa protocolos https ou mailto

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.
Mensagem de erro para protocolos não compatíveis e domínios inválidos
Mensagem de erro para protocolos não compatíveis e domínios inválidos

Aviso de segurança para sites com falha na verificação de segurança
Aviso de segurança para sites com falha na verificação de segurança

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?

pergunte à comunidade

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!