Tutoriel vidéo : protéger par mot de passe des intégrations de prototypes Figma

Cette vidéo montre comment protéger vos intégrations de prototypes Figma par un mot de passe avec le plugin Crypto.

La fonctionnalité « Live Embed » de Crypto place l’intégration publique de votre prototype Figma derrière une URL sécurisée et un mot de passe que vous pouvez partager. Vos destinataires consultent alors vos designs dans l’application web Crypto, sans avoir besoin d’un compte Figma.

L’URL Figma sous-jacente reste publique. En raison du fonctionnement des liens de partage dans Figma, Crypto ne peut qu’envelopper l’intégration d’une URL Figma publique dans une URL protégée par mot de passe : toute personne disposant de l’URL Figma sous-jacente peut donc toujours la consulter. Pour révoquer l’accès si nécessaire, vous pouvez supprimer l’URL protégée par mot de passe via le plugin Crypto et/ou limiter les autorisations du fichier Figma à only people invited to this file.

Passer en mode prototype

Pour utiliser cette fonctionnalité, sélectionnez d’abord Figma Prototype (Live Embed) dans la barre d’outils du plugin Crypto.

Frames Figma de premier niveau requis. Pour mettre en ligne un prototype Figma, votre page Figma doit contenir au moins un « frame parent », c’est-à-dire un frame placé directement sous votre page.

Copier l’URL Figma à utiliser

Définir les options du prototype

Plusieurs options de configuration sont disponibles lorsque vous créez des liens protégés par mot de passe pour vos prototypes Figma :

Options de mise à l’échelle

Cette liste déroulante vous permet de choisir comment votre prototype est mis à l’échelle dans le navigateur, parmi les options suivantes :

• 100% : afficher en taille réelle
• Fit : réduire pour tenir dans la fenêtre
• Fill : réduire ou agrandir pour remplir la fenêtre
• Scale down to fit width : réduire pour tenir en largeur (par défaut)

Zones cliquables

Activez l’interrupteur Hotspots pour que le prototype révèle les zones cliquables de vos designs lorsqu’un utilisateur clique sur l’écran ; s’il reste désactivé, aucune indication de zone cliquable ne s’affiche.

Barre latérale

Activez l’interrupteur Sidebar pour afficher dans le navigateur le panneau de navigation latéral de votre prototype Figma ; s’il reste désactivé, ce panneau n’est pas montré à l’utilisateur.

Créer l’URL de prototype protégée par mot de passe

L’URL Figma sous-jacente reste publique. En raison du fonctionnement des liens de partage dans Figma, Crypto ne peut qu’envelopper l’intégration d’une URL Figma publique dans une URL protégée par mot de passe : toute personne disposant de l’URL Figma sous-jacente peut donc toujours la consulter. Pour révoquer l’accès si nécessaire, vous pouvez supprimer l’URL protégée par mot de passe via le plugin Crypto et/ou limiter les autorisations du fichier Figma à only people invited to this file.

Pour créer votre lien de prototype protégé par mot de passe, cliquez sur Share Prototype URL, puis sur le bouton Create Prototype URL.

Une fois la mise en ligne terminée, vous pouvez copier l’URL sécurisée et le mot de passe pour consulter l’intégration de votre prototype Figma dans le navigateur, avec l’application web Crypto.

Chaque mise en ligne appartient à la page Figma depuis laquelle elle a été lancée. Changer de page charge les réglages et l’historique des versions de cette page ; revenez sur la page d’origine pour retrouver une mise en ligne terminée depuis celle-ci. Attendez la fin d’une mise en ligne ou d’une mise à jour des réglages en cours avant d’en lancer une autre sur la même page.

Vous pouvez retrouver l’URL et le mot de passe plus tard dans le plugin. Pour copier de nouveau l’URL et le mot de passe, cliquez sur le bouton Share Prototype URL dans la barre d’outils du plugin Crypto : l’URL et le mot de passe du prototype s’affichent dans la section Secure URL Details, prêts à être copiés.

L’URL Figma sous-jacente reste publique. En raison du fonctionnement des liens de partage dans Figma, Crypto ne peut qu’envelopper l’intégration d’une URL Figma publique dans une URL protégée par mot de passe : toute personne disposant de l’URL Figma sous-jacente peut donc toujours la consulter. Pour révoquer l’accès si nécessaire, vous pouvez supprimer l’URL protégée par mot de passe via le plugin Crypto et/ou limiter les autorisations du fichier Figma à only people invited to this file.

Modifier les réglages de l’URL du prototype

Il vous arrivera de vouloir modifier l’URL Crypto de prototype que vous avez créée et envoyée à quelqu’un. Pour la mettre à jour avec le plugin Crypto, cliquez sur le bouton Share Prototype URL dans la barre d’outils du plugin Crypto, modifiez l’URL du fichier Figma ou les options du prototype selon vos besoins, puis cliquez sur le bouton Update Existing Prototype URL.

Changer le mot de passe de votre URL Crypto

Par défaut, le plugin Crypto génère pour vous un mot de passe aléatoire sécurisé. Pour le remplacer par un mot de passe personnalisé, activez l’interrupteur Change Password dans la section Set Password for Crypto URLs on this page du panneau des réglages de mise en ligne, saisissez votre nouveau mot de passe dans le champ (6 caractères minimum), puis cliquez sur le bouton Set New Password : le mot de passe de votre URL Crypto est mis à jour pour cette page Figma.

Les URL de designs statiques et de prototype partagent le même mot de passe par page Figma. Si vous mettez en ligne des designs statiques et un prototype sur la même page Figma, sachez que chaque page Figma n’a qu’un seul mot de passe pour les deux URL. Changer le mot de passe de l’une met aussi à jour celui de l’autre.

Changer le mot de passe bloque l’accès à toute personne qui avait l’ancien. Une fois le mot de passe changé, les personnes qui avaient l’ancien ne peuvent plus consulter votre URL ; si elles doivent garder l’accès, communiquez-leur le nouveau mot de passe.

Supprimer l’URL du prototype

Pour révoquer l’accès si nécessaire, vous pouvez supprimer l’URL protégée par mot de passe via le plugin Crypto et/ou limiter les autorisations du fichier Figma à only people invited to this file.

Consulter des prototypes Figma

Vous connecter à votre prototype Figma protégé par mot de passe et interagir avec lui

Après avoir ouvert votre URL (obtenue dans le plugin Figma Crypto) dans votre navigateur, collez le mot de passe généré (obtenu dans le plugin Figma Crypto). Cliquez ensuite sur le bouton Login pour vous authentifier et consulter les designs mis en ligne.

Comme l’application web Crypto intègre l’embed natif du prototype Figma, vous interagissez avec votre prototype exactement comme lorsque vous le consultez dans Figma. Pour en savoir plus, consultez l’article d’aide officiel de Figma Preview designs and prototypes in Presentation View.

Utiliser les raccourcis clavier des prototypes Figma

Comme l’application web Crypto intègre l’embed natif du prototype Figma, les raccourcis du prototype sont exactement les mêmes que lorsque vous le consultez dans Figma. Pour afficher ces raccourcis clavier dans l’application web Crypto, survolez l’icône Keyboard dans la barre d’outils.

Raccourcis clavier disponibles pendant la consultation du prototype

• Changer la taille d’affichage (Z)
• Activer ou désactiver le plein écran (F)
• Redémarrer le prototype (R)
• Écran précédent (←)
• Écran suivant (→)
• Faire avancer le prototype (Enter)

Masquer les icônes de la barre d’outils

Si vous ne voulez pas voir la barre d’outils de l’application web Crypto pendant que vous consultez votre prototype, cliquez sur le bouton d’icône Visibility dans cette barre d’outils. Ce bouton affiche ou masque les icônes. Survolez de nouveau l’emplacement du bouton Visibility pour le faire réapparaître, puis cliquez dessus pour afficher de nouveau la barre d’outils.

Redonnez le focus à l’intégration Figma. Après avoir masqué les icônes ou utilisé une autre commande de la barre d’outils Crypto, cliquez de nouveau sur le prototype Figma avant d’utiliser ses raccourcis clavier.