Tutoriel vidéo : protéger par mot de passe des designs Figma statiques
Cette vidéo montre comment protéger vos designs Figma par un mot de passe avec le plugin Crypto.
La fonctionnalité « Static Frames » de Crypto met en ligne, via le plugin Figma Crypto, des images des frames parents de premier niveau de votre page Figma actuelle, puis génè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.
Pour utiliser cette fonctionnalité, sélectionnez d’abord Figma Designs (Static Frames) dans la barre d’outils du plugin Crypto.
Sélectionner et désélectionner les frames à mettre en ligne
Pour commencer, sélectionnez Figma Designs (Static Frames) dans la barre d’outils du plugin Crypto.
Vous pouvez alors sélectionner, sur votre page Figma actuelle, les frames à utiliser comme designs à partager dans votre lien protégé par mot de passe.
Crypto charge tous les « frames parents » de votre page Figma actuelle dans le plugin, sous forme de liste dans laquelle vous choisissez les designs à partager. Cliquez sur la case à cocher ou sur la miniature d’un frame pour le sélectionner (un nouveau clic le désélectionne).
Frames Figma de premier niveau requis. Pour mettre en ligne vos designs statiques, votre page Figma doit contenir au moins un « frame parent », c’est-à-dire un frame placé directement sous votre page.
Mettre en évidence des frames parents Figma pour les sélectionner
Pour sélectionner plus facilement les frames parents Figma à comparer, cliquez sur un ou plusieurs frames de votre page Figma ou mettez-les en évidence : la liste des frames disponibles dans le plugin Crypto est alors automatiquement filtrée sur ces frames.
Actualiser les frames parents Figma
Si le plugin Crypto est déjà ouvert et que vous devez ajouter ou supprimer des frames parents sur votre page Figma actuelle, faites vos modifications, puis cliquez sur le bouton d’icône Refresh frames à côté du nombre de frames, dans la barre d’outils du plugin Crypto.
Trier rapidement vos frames
Plusieurs options permettent de trier l’ordre des frames de vos designs mis en ligne :
Trier les frames selon l’ordre des calques Figma
L’option Sort frames by Layer Order ↓ (ou ↑ pour l’ordre inverse) trie automatiquement vos frames selon leur ordre dans vos calques Figma.
Trier les frames visuellement par colonnes
Les options Sort frames Left to Right et Sort frames Right to Left trient automatiquement vos frames selon leur position visuelle, colonne par colonne, dans votre design Figma.
Trier les frames visuellement par rangées
Les options Sort frames Top to Bottom et Sort frames Bottom to Top trient automatiquement vos frames selon leur position visuelle, rangée par rangée, dans votre design Figma.
Le tri visuel tolère de légers écarts d’alignement et utilise la position absolue de chaque frame sur le canevas, y compris pour les frames imbriqués dans différentes Sections Figma.
Trier les frames selon le nom des calques Figma
L’option Sort by Figma Layer Name ↓ (ou ↑ pour l’ordre inverse) trie automatiquement vos frames selon un ordre naturel de leurs noms de calques Figma : un nom comme Frame 2 apparaît ainsi avant Frame 10.
Ordonner les frames manuellement par glisser-déposer
Vous pouvez ordonner vos frames manuellement par glisser-déposer : cliquez et maintenez la poignée de déplacement au bout d’une rangée de frame, faites-la glisser vers le haut ou vers le bas pour changer sa position parmi les frames mis en ligne, puis relâchez-la pour confirmer cet ordre. Cet ordre personnalisé est conservé si vous passez d’une option de tri à l’autre : vous le retrouvez en choisissant l’option Sort frames by Custom Order dans la liste de tri.
Mettre en ligne vos designs
Lorsque la sélection et l’ordre de vos frames vous conviennent, cliquez sur le bouton Share Design URL dans la barre d’outils du plugin Crypto. Le panneau de partage s’ouvre : cliquez sur le bouton Securely Upload Designs pour lancer la mise en ligne des images.
Une fois la mise en ligne terminée, un message de confirmation affiche votre URL sécurisée et un mot de passe généré.
Dupliquer un fichier Figma copie aussi son URL et son mot de passe. Pour générer des informations différentes pour le doublon, saisissez le code Konami (Up, Up, Down, Down, Left, Right, Left, Right, B, A) pendant que le plugin est ouvert. Crypto crée une nouvelle URL et un nouveau mot de passe, sans supprimer l’URL précédente.
Ouvrir l’URL générée
Une fois la mise en ligne terminée, vous pouvez copier l’URL sécurisée et le mot de passe pour consulter dans le navigateur, avec l’application web Crypto, les frames sélectionnés dans Figma.
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 Design URL dans la barre d’outils du plugin Crypto, puis sélectionnez une version déjà mise en ligne dans la liste Select Previous Version : l’URL et le mot de passe s’affichent alors dans la section Secure URL Details, prêts à être copiés.
Mettre en ligne une nouvelle version d’URL
Après le première mise en ligne de vos designs, vous pouvez continuer à mettre en ligne de nouvelles URL, qui créent des versions de vos designs. C’est un bon moyen de suivre les différentes étapes d’un design, ou de créer des URL distinctes qui montrent chacune un ensemble de frames différent.
Pour créer une nouvelle version d’URL avec le plugin Crypto, cliquez sur le bouton Share Design URL dans la barre d’outils du plugin Crypto, puis sur le bouton Upload New Version URL.
Une fois la mise en ligne terminée, un message de confirmation affiche la nouvelle version de votre URL sécurisée et le mot de passe.
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 Design URL dans la barre d’outils du plugin Crypto, puis sélectionnez une version déjà mise en ligne dans la liste Select Previous Version : l’URL et le mot de passe s’affichent alors dans la section Secure URL Details, prêts à être copiés.
Mettre à jour une version d’URL Crypto déjà mise en ligne
Il vous arrivera de vouloir mettre à jour une version d’URL Crypto déjà mise en ligne et envoyée à quelqu’un. Pour mettre à jour n’importe quelle URL déjà mise en ligne avec le plugin Crypto, cliquez sur le bouton Share Design URL dans la barre d’outils du plugin Crypto, sélectionnez une version déjà mise en ligne dans la liste Select Previous Version, puis cliquez sur le bouton Update Version xxxxxxxx URL.
Les designs de cette URL sont alors remplacés par les nouveaux frames sélectionnés dans le plugin Crypto. L’URL et le mot de passe ne changent pas : toute personne qui les avait déjà peut toujours les utiliser.
Une fois la mise en ligne terminée, un message de confirmation affiche la nouvelle version de votre URL sécurisée et le mot de passe.
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 Design URL dans la barre d’outils du plugin Crypto, puis sélectionnez une version déjà mise en ligne dans la liste Select Previous Version : l’URL et le mot de passe s’affichent alors dans la section Secure URL Details, prêts à être copiés.
Mettre à jour une URL remplace les designs mis en ligne auparavant. Cliquer sur le bouton Update Version xxxxxxxx URL remplace tous les designs mis en ligne pour la version sélectionnée. Toute personne disposant de l’ancienne URL et du mot de passe verra les designs mis à jour en revenant sur l’URL qui lui a été envoyée.
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 une version d’URL Crypto
Vous pouvez supprimer n’importe quelle version des URL sécurisées générées avec le plugin Crypto : cliquez sur le bouton Share Design URL dans la barre d’outils du plugin Crypto, sélectionnez une version déjà mise en ligne dans la liste Select Previous Version, puis activez l’interrupteur I would like to delete the xxxxxxxx version URL. Une fois cet interrupteur activé, vous pouvez cliquer sur le bouton Delete Version xxxxxxxx URL.
Un message de confirmation vous indique que la version sélectionnée a été supprimée.
La suppression d’une version d’URL est irréversible. Cliquer sur le bouton Delete Version xxxxxxxx URL supprime tous les designs mis en ligne pour la version sélectionnée. Les personnes disposant de cette URL ne pourront plus consulter ces designs. Vous pouvez toutefois mettre en ligne une nouvelle version et leur communiquer la nouvelle URL après avoir supprimé celle qui leur avait été envoyée.
Consulter des designs Figma statiques
Vous connecter à vos designs
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.
Naviguer entre les frames de votre design
Dans l’application web Crypto, vous pouvez passer d’un frame à l’autre en cliquant sur les boutons fléchés, en cliquant et faisant glisser les frames vers la gauche ou la droite, ou en appuyant sur les touches flèche gauche et flèche droite de votre clavier. La touche espace de votre clavier permet aussi de passer au frame suivant.
Aller directement à un frame de votre design
Pour aller directement à un frame précis de vos designs mis en ligne, utilisez la barre de navigation en bas de la page de l’application web Crypto. Survolez cette barre pour afficher les miniatures de chaque frame, puis cliquez sur une miniature pour afficher instantanément le frame correspondant.
Passer d’une version de design mise en ligne à l’autre
Si vous avez mis en ligne plusieurs versions de vos designs avec le plugin Figma Crypto, vous pouvez passer instantanément de l’une à l’autre dans l’application web Crypto en cliquant sur le titre à liste déroulante en haut à gauche de la page. Choisir une autre version charge les designs de cette version. Le libellé situé sous le sélecteur indique aussi la date de dernière mise à jour de chaque version.
Activer le mode sombre
Si vos designs s’affichent mieux sur fond sombre, activez le mode sombre en cliquant sur l’icône soleil ou lune dans la barre d’outils de l’application web Crypto. Chaque clic sur l’icône bascule entre le mode sombre et le mode par défaut (plus clair).
Masquer les éléments autour des designs
Si vous ne voulez pas voir le titre, les flèches, la barre de navigation ni la barre d’outils pendant que vous consultez vos designs, cliquez sur le bouton d’icône visibility dans la barre d’outils de l’application web Crypto. Ce bouton affiche ou masque tout ce qui n’est pas les designs eux-mêmes.