Guide d'utilisation Annuler

Création d’hyperliens

Découvrez comment créer des liens vers des pages web externes dans les prototypes Adobe XD.

Tout texte, objet ou composant de votre composition peut renvoyer vers une page Web externe ou une adresse e-mail. Une fois votre hyperlien créé, vous pouvez le prévisualiser et partager les spécifications techniques avec vos collaborateurs.

Créer un hyperlien de texte

Pour créer un lien hypertexte vers une page Web ou une adresse e-mail, procédez comme suit :

  1. En mode Design, sélectionnez le texte à l’intérieur de l’objet texte à partir duquel vous souhaitez créer un hyperlien.

  2. Dans le champ Insérer l’URL ici de la section Texte de l’Inspecteur Propriétés, procédez comme suit :

    Lien vers une page Web sécurisée

    Lien vers une page Web sécurisée
    Lien vers une page Web sécurisée

    Pour créer un lien vers une page Web sécurisée (https), entrez son URL. Exemple : https://www.adobe.com/fr.

    Lien vers une adresse e-mail

    Lien vers une adresse e-mail
    Lien vers une adresse e-mail

    Pour créer un lien qui renvoie vers une adresse e-mail, saisissez mailto: suivi de l’adresse e-mail du destinataire. Exemple : mailto:john@xyz.com.

    Une fois que vous avez défini un lien hypertexte en mode Design :

    • Sur la zone de travail, le lien hypertexte que vous créez est souligné par défaut.
    • Si seule une portion du texte contient un lien hypertexte, lorsque vous sélectionnez l’objet texte dans la zone de travail, le champ Insérez l’URL ici affiche un tiret (—).
    • En mode Prototype, si un objet texte contenant des hyperliens est sélectionné, ceux-ci s’afficheront dans l’Inspecteur Propriétés.
    • Vous pouvez modifier un lien hypertexte en mode Design ou Prototype.
Une partie de l’objet texte est associée à un hyperlien (mode Design)
Une partie de l’objet texte est associée à un hyperlien (mode Design)

Deux portions de texte associées à un hyperlien à l’intérieur d’un objet texte (mode Prototype)
Deux portions de texte associées à un hyperlien à l’intérieur d’un objet texte (mode Prototype)

Lorsque vous publiez et partagez un lien de spécifications techniques, les collaborateurs peuvent inspecter l’hyperlien.

Créer un hyperlien d’objet ou de composant

Pour créer un hyperlien entre un objet (ou un composant) et une page Web (ou une adresse e-mail), procédez comme suit :

  1. Passez en mode Prototype et sélectionnez l’objet ou le composant pour lequel vous souhaitez créer un hyperlien.

  2. Cliquez sur la flèche bleue de l’objet puis, dans l’Inspecteur Propriétés, définissez le déclencheur sur Appui, Touches/Manette ou Voix.

  3. Définissez le type d’action sur Hyperlien.

  4. Dans le champ Destination , effectuez les opérations suivantes :

    Lien vers une page Web sécurisée

    Lien vers une page web
    Lien vers une page Web sécurisée

    Pour créer un lien vers une page Web sécurisée (https), entrez son URL. Exemple : https://www.adobe.com/fr.

    Lien vers une adresse e-mail

    Lien vers une adresse e-mail
    Lien vers une adresse e-mail

    Pour créer un lien qui renvoie vers une adresse e-mail, saisissez mailto: suivi de l’adresse e-mail du destinataire. Exemple : mailto:john@xyz.com.

  5. Pour prévisualiser votre hyperlien, sélectionnez   Aperçu sur ordinateur.

    Lorsque vous cliquez sur un hyperlien, il s’ouvre toujours dans un nouvel onglet de votre navigateur. 

Lorsque vous publiez et partagez un lien de spécifications techniques, les collaborateurs peuvent inspecter l’hyperlien.

Lien hypertexte en modes Design et Prototype

En plus de définir un hyperlien pour le texte en mode Design, vous pouvez définir un hyperlien pour son objet texte en mode Prototype. Le lien hypertexte défini en mode Design a priorité sur le lien hypertexte en mode Prototype. Dans   Aperçu sur ordinateur ou Lien de prototype :

  • lorsque vous cliquez sur une portion du texte qui n’est pas associée à un hyperlien, l’hyperlien défini en mode Prototype s’ouvre ;
  • si vous créez un hyperlien sur l’ensemble du texte d’un objet texte en mode Design et que vous associez un hyperlien à un objet texte en mode Prototype à l’aide du déclencheur Appuyer, l’hyperlien en mode Prototype ne fonctionnera pas.

Informations à prendre en compte

Application XD :

  • Vous recevez un avertissement lorsque vous ajoutez une URL qui utilise un protocole autre que https ou mailto, qui n’utilise pas de protocole, ou qui n’a pas un domaine valide. Corrigez l’URL.
Avertissement qui s’affiche lorsque vous n’utilisez pas les protocoles https ou mailto
Avertissement qui s’affiche lorsque vous n’utilisez pas les protocoles https ou mailto

Aperçu sur ordinateur   et Lien de prototype :

  • Lorsque vous cliquez sur un hyperlien dont le protocole n’est pas https ou mailto, qui n’a pas de protocole ou dont le domaine n’est pas valide, l’URL ne s’ouvre pas. Un message d’erreur s’affiche alors au bas de l’écran.
  • Lorsque vous cliquez sur un hyperlien dont le domaine est valide, XD effectue un contrôle de sécurité sur le site Web vers lequel vous êtes dirigé. Si le contrôle de sécurité échoue, vous recevez un avertissement de sécurité. Vous pouvez poursuivre ou quitter l’URL.
Message d’erreur pour les protocoles non pris en charge et les domaines non valides
Message d’erreur pour les protocoles non pris en charge et les domaines non valides

Avertissement de sécurité pour les sites Web dont le contrôle de sécurité a échoué
Avertissement de sécurité pour les sites Web dont le contrôle de sécurité a échoué

En savoir plus

Regardez cette vidéo pour en savoir plus sur l’utilisation des hyperliens dans XD (3 minutes).

Ressources associées

Vous avez une question ou une suggestion ?

questions à la communauté

Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations !

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?