Crear hipervínculos

Última actualización el 21/03/2022

Conozca cómo crear vínculos a páginas web externas en prototipos de Adobe XD.

Cualquier texto, objeto o componente en el diseño puede vincularse a un sitio web externo o a una dirección de correo electrónico. Después de crear un hipervínculo, puede previsualizarlo y compartir las especificaciones de diseño con otros colaboradores.

Crear un hipervínculo de texto

Para crear un hipervínculo de texto a un sitio web o a una dirección de correo electrónico, realice los siguientes pasos:

En modo Diseño, seleccione el texto dentro del objeto del texto en el que desea crear el hipervínculo.

En el campo Insertar URL aquí dentro de la sección Texto del Inspector de Propiedades, haga lo siguiente:

Vínculo a un sitio web seguro

Vínculo a un sitio web seguro
Vínculo a un sitio web seguro

Para crear un vínculo a un sitio web seguro (https), escriba la URL del sitio web. Ejemplo: https://www.adobe.com.

Vínculo a una dirección de correo electrónico

Vínculo a una dirección de correo electrónico
Vínculo a una dirección de correo electrónico

Para vincular a una dirección de correo electrónico, escriba mailto: seguido de la dirección de correo electrónico del receptor. Ejemplo: mailto:john@xyz.com.

Una vez que defina un hipervínculo de texto en modo Diseño:

  • En el lienzo, el texto con el hipervínculo creado se subraya de forma predeterminada.
  • Si solo se ha creado un hipervínculo a una parte del texto, cuando seleccione el objeto del texto en el lienzo, verá un guion (—) en el campo Insertar la URL aquí.
  • En modo Prototipo, si se selecciona un objeto de texto que contiene hipervínculos, se mostrarán los hiperenlaces en el Inspector de Propiedades.
  • Es posible editar un hipervínculo de texto en el modo Diseño o Prototipo:
Una parte del objeto del texto presenta un hipervínculo (modo Diseño)
Una parte del objeto del texto presenta un hipervínculo (modo Diseño)

Dos partes del texto que presentan hipervínculo dentro de un objeto del texto (modo Prototipo)
Dos partes del texto que presentan hipervínculo dentro de un objeto del texto (modo Prototipo)

Cuando publica y comparte un vínculo de especificaciones de diseño, los colaboradores pueden examinar el hipervínculo.

Crear un hipervínculo de objeto o componente

Para crear un hipervínculo de un objeto o un componentes a un sitio web o a una dirección de correo electrónico, realice los siguientes pasos:

Cambie al modo Prototipo y seleccione el objeto o componente para el que desee crear el hipervínculo.

Haga clic en la flecha azul del objeto y, en el Inspector de propiedades, cambie la opción Desencadenador a Tocar, Teclas y mando de juego o Voz.

Active en Tipo de acción la opción Hipervínculo.

En el campo Destino, haga lo siguiente:

Vínculo a un sitio web seguro

Vínculo a un sitio web
Vínculo a un sitio web seguro

Para crear un vínculo a un sitio web seguro (https), escriba la URL del sitio web. Ejemplo: https://www.adobe.com.

Vínculo a una dirección de correo electrónico

Vínculo a una dirección de correo electrónico
Vínculo a una dirección de correo electrónico

Para vincular a una dirección de correo electrónico, escriba mailto: seguido de la dirección de correo electrónico del receptor. Ejemplo: mailto:john@xyz.com.

Para probar el hipervínculo, haga clic en   Vista previa de escritorio.

Cuando haga clic en un hipervínculo, siempre se abrirá en una pestaña separada del navegador. 

Cuando publica y comparte un vínculo de especificaciones de diseño, los colaboradores pueden examinar el hipervínculo.

Texto del hipervínculo en modo Diseño y Prototipo:

Además de definir un hipervínculo para el texto en modo Diseño, es posible definir un hipervínculo para su objeto de texto en el modo Prototipo. El hipervínculo definido en el modo Diseño tiene prioridad sobre el hipervínculo en el modo Prototipo. En   vista previa del Escritorio o vínculo al prototipo:

  • Cuando hace clic en una parte del texto que no tiene hipervínculos definidos, el hipervínculo definido en el modo Prototipo se abre.
  • Si crea un hipervínculo en todo el texto dentro del objeto de Diseño, y crea un hipervínculo al objeto del texto en modo Prototipo usando Tocar activador, no funcionará el hipervínculo del modo Prototipo.
Herencia de hipervínculo de objeto
Herencia de hipervínculo de objeto

Texto con hipervínculo completo en los modos Design y Prototype
Texto completamente con hipervínculo en los modos Diseño y Prototipo

Cuestiones a las que prestar atención

Aplicación XD:

  • Cuando agrega una URL con un protocolo diferente a https o mailto o sin un protocolo, o si la URL presenta un dominio no válido, recibe una advertencia. Corregir la URL.
Advertencia cuando no usa los protocolos https o mailto
Advertencia cuando no usa los protocolos https o mailto

Vista previa   y vínculo al prototipo:

  • Cuando hace clic en un hipervínculo que disponga de un protocolo diferente a https mailto o no disponga de un protocolo, o si la URL presenta un dominio no válido, la URL no se abre. Recibirá un mensaje de error que le aparecerá en la parte inferior de la pantalla.
  • Cuando hace clic en un hipervínculo que dispone de un dominio válido, XD ejecuta una comprobación de seguridad en el sitio web vinculado. Si se produce un error en la comprobación de seguridad, recibe una advertencia de seguridad. Es posible elegir continuar o salir de la URL.
Mensaje de error para protocolos no compatible y dominios no válidos
Mensaje de error para protocolos no compatible y dominios no válidos

Advertencia de seguridad para sitios web que produce errores en la comprobación de seguridad
Advertencia de seguridad para sitios web que produce errores en la comprobación de seguridad

Más información

Vea este vídeo de 3 minutos para obtener más información sobre cómo trabajar con hipervínculos en XD.

Recursos relacionados

¿Tiene alguna pregunta o idea?

pregunte a la comunidad

¿Tiene alguna pregunta o idea para compartir? Entre y participe en la Comunidad de Adobe XD. ¡Nos gustaría tener noticias suyas y ver sus creaciones!