Comme d’habitude, Figma ne manquera pas de vous impressionner et a sorti quelques nouvelles super fonctionnalités ainsi que quelques pépites qui se cachent à la vue de tous. Voici donc les meilleurs Trucs & Astuces pour rendre la vie encore plus amusante avec Figma !
Version vidéo de cet article :
Il existe également uneversion vidéo de cet article si vous préférez voir ces trucs et astuces en streaming.
Au fait, nous allons voir des raccourcis Mac. Si vous êtes sur un PC, veuillez procéder comme indiqué ci-dessous. Cela fonctionne dans la plupart des cas. Il y a quelques cas particuliers que nous ne manquerons pas de mentionner.
1. Copie rapide du lien du fichier (cmd+L)
Dans votre fichier, appuyez sur cmd+L et le lien du fichier sera copié dans votre presse-papiers. Vous pouvez maintenant le partager et le coller n’importe où.
Partager une sélection spécifique
Si vous avez sélectionné une page, une fenêtre ou un élément spécifique, le fichier apparaîtra dans votre sélection lorsqu’il sera ouvert avec le lien.
2. Exportation rapide d’éléments et de prototypes à partir de Figma
Utilisez le raccourci clavier cmd+ L pour copier le lien vers une page ou une fenêtre spécifique et simplement le coller ailleurs. Vous pouvez soit partager l’ensemble de la page web ou choisir un élément spécifique à partager. Cette fonction est absolument extraordinaire pour la documentation, les systèmes de conception et les guides de style. Mais aussi pour être présenté sur d’autres sites web, comme ici dans Medium, c’est comme ça que sont intégrées les images ci-dessous. Allez-y, vous pouvez le tester.
Maintenant le meilleur : Intégrer des prototypes.
Cela fonctionne aussi pour des prototypes. Ah, et il se met à jour automatiquement, bien sûr !!! Allez-y et cliquez sur « setup for desktop ».
3. Ajuster le texte, la couleur et les valeurs
Sélectionnez une forme colorée et ouvrez le menu des couleurs, maintenez la touche shift enfoncée et montez et descendez comme vous le feriez pour un déplacement vers le haut ou vers le bas. Vous pouvez voir la couleur « nudge ». Si vous utilisez la molette de la souris, vous pouvez modifier la teinte de la couleur. Si vous maintenez la touche « alt » enfoncée tout en zoomant, vous pouvez également modifier l’opacité. Vous pouvez également modifier n’importe quel autre champ, comme la hauteur de ligne par exemple
** Astuce : Utilisez des déplacements de 4 ou 8 pt sur la typographie et la hauteur de ligne pour configurer votre échelle de caractères à votre façon ! Au fait, le réglage par défaut est 10 ; pour le modifier, appuyez sur cmd +**/ et tapez « nudge ». Assurez-vous de maintenir la touche « alt » enfoncée lorsque vous faites un changement pour voir les distances.
4. Les champs de modifications
Lorsque vous passez la souris sur certains champs de propriétés dans Figma, une flèche de navigation apparaît. Il suffit de maintenir cliquée la souris et de déplacer la flèche de gauche à droite. Maintenez la touche « shift » enfoncée pour augmenter la vitesse de défilement. Cette manip fonctionne avec tous les champs de valeur qui affichent la flèche de défilement lorsqu’on passe la souris dessus. Comment ai-je pu ne pas le voir ?
5. Copier en PNG sans exporter
Appuyez sur cmd + shift+ c (ou par le menu clic droit) pour copier l’élément en png dans votre presse-papiers. Vous pouvez maintenant le coller n’importe où à l’intérieur ou à l’extérieur de votre fichier. Nous adorons cette méthode pour une copie rapide dans des présentations, slack (ou chat) ou emails, et faire nos maquettes sans les exporter.
6. Grille d’ajustement gauche-droite !
Il est impossible de vivre sans celle-ci. Elle existe depuis un certain temps mais elle mérite d’être mentionnée. Lorsque vous définissez des contraintes alors qu’une grille est ajoutée au cadre, les éléments (non imbriqués) prennent les colonnes comme conteneur parent. Si vous voulez que vos éléments se comportent parfaitement avec la grille, réglez-les sur « gauche-droite ».
Ceci fonctionne très bien pour du texte ou d’autres cadres. Cela ne fonctionnera pas avec la mise en page automatique. Petite astuce : il suffit de placer votre mise en page automatique à l’intérieur d’un groupe, vous pouvez alors définir des contraintes sur ce groupe.
7. Dénomination des composants avec les pages et les fenêtres
Vous êtes probablement familier avec la convention de dénomination « / » pour les composants. Saviez-vous que l’ajout d’un composant maître à une fenêtre est organisé de la même manière qu’avec un « / » ? Et c’est encore mieux. Vous pouvez également utiliser les pages pour créer des « méta-catégories ».
De cette façon, vous détachez l’organisation de la dénomination et pouvez réorganiser les composants en une seconde en les faisant simplement glisser dans une nouvelle fenêtre. Et les noms de vos composants seront supers et courts.
Lorsque vous placez un composant dans une page et une fenêtre spécifiques, cela se reflète automatiquement dans l’organisation des asset.
Dans notre exemple, nous avons créé une page pour mobile et une autre plus générale (nous ne pourrons pas en créer une pour chaque cas de figure, ou une bibliothèque pour le web et les app android ou iOS, vous l’avez compris). À l’intérieur de la page, nous avons simplement des fenêtres où nous plaçons les composants. Il peut s’agir de composants uniques ou d’ensemble de composants avec des variantes.
*Tip: Si vous importez depuis Sketch ou d’une ancienne bibliothèque Figma et que vous avez les habituels “button/primary/active/more stuff/andmore”, vous pouvez configurer la page et les cadres, puis simplement utiliser la fonction renommage par batch dans Figma et supprimer tous les préfixes d’expression régulière.
8. Copie d’écran directement dans Figma
Cela vous permettra de garder votre bureau bien ordonné. Préparez-vous à appuyer sur shift + ctrl + cmd+ 4 pour faire une capture d’écran (+ barre d’espace pour capturer une fenêtre entière). Ceci vous permettra d’enregistrer l’image écran dans votre presse-papiers. Vous pouvez maintenant la coller directement dans Figma en faisant « cmd + V ». Avec Windows essayez « alt + print screen ».
Vous pouvez maintenant utiliser la fonction d’ordonnancement de Figma (sélectionnez tous les éléments de taille similaire et vous obtiendrez la petite icône carrée dans le coin inférieur droit). Ainsi que la fonction d’arrangement pour obtenir une belle vue d’ensemble de vos recherches. C’est super !
**Astuce : Double-cliquez tout en maintenant la touche « alt » enfoncée et vous pouvez recadrer l’image directement
9. Copier un SVG à partir du navigateur
Au lieu de télécharger des SVG et de les réimporter ensuite dans Figma, vous pouvez copier des SVG directement depuis le code d’une page. Sélectionnez l’image SVG et faites un clic droit pour sélectionner le mode inspection (inspect mode). Cliquez à nouveau sur l’image source. Ensuite, sur l’image, cliquez avec le bouton droit de la souris pour passer en mode inspection et ensuite sur l’élément SVG entier (!!!), cliquez avec le bouton droit de la souris et choisissez « copy element ». Vous pouvez maintenant le coller dans votre fichier Figma et il restera un SVG évolutif et éditable à tous niveaux.
10. Séparation de plusieurs « instances »
Si vous avez un élément avec de nombreuses « instances » imbriquées que vous souhaitez détacher, ouvrez votre menu de recherche rapide avec « cmd +/ recherche Instances » vous pouvez alors choisir de séparer toutes les instances ou de détacher toutes les instances imbriquées tout en gardant leurs paramètres tels que les cadres et la mise en page automatique.
11. Arborescence hiérarchisée des objets
Cliquez avec le bouton droit de la souris et choisissez “Select layer” (Sélectionner le calque) et vous obtiendrez une vue générale de la sélection actuelle, du groupe dans lequel elle se trouve, et de ce qui se trouve au-dessus et en dessous. Maintenant, naviguez là où vous voulez sans chercher dans le panneau des calques.
12. Ajouter des propriétés aux « unions »
Si vous créez un « union », vous pouvez désormais utiliser des éléments tels que le rayon pour lisser les bords. Vous pouvez toujours manipuler les éléments individuels d’un « union ». D’ailleurs, vous pouvez également utiliser vos composants et les ajouter à des « unions » ou créer des « unions », ils adopteront alors la couleur définie et les styles de propriétés.
13. Trier et déplacer les styles en vrac (bulk)
Nous avons passé beaucoup de temps à nommer les styles avec la convention « / », surtout avec la typographie. Cela peut rendre un peu dingue. En fait, nous avons découvert que vous pouvez les regrouper dans le panneau des propriétés ce qui a fait notre bonheur.
Sélectionnez les styles et appuyez sur « cmd + G » pour les regrouper, puis les nommer. Vous pouvez maintenant trier et déplacer les styles à l’intérieur et entre les dossiers.
14. Ajouter _ pour les styles personnalisés
Vous voulez définir un style mais vous n’êtes pas encore prêt à le partager ? Pour vous assurer qu’il ne sera pas mis à jour par accident, ajoutez simplement un _ à sa dénomination, par exemple « _highlight » et il restera à vous.
15. Utilisez des descriptions pour les styles
Lorsque vous nommez vos styles, vous trouverez un petit champ en dessous, appelé description. Votre description sera ajoutée à l’infobulle lorsque quelqu’un choisira le style. Nous aimons bien utiliser ce champ pour ajouter plus d’informations sur l’objectif du style. Ceci apparaissait aussi en mode « inspect » mais il semble que cela ait été modifié. D’ailleurs, c’est la même chose pour les composants, vous pouvez les trouver de cette même façon, ce qui est appréciable !
16. Saviez-vous que les images peuvent être des styles ?
Vous pouvez enregistrer des images tout comme des styles de couleur (attention quand même à la résolution). Vous pouvez désormais remplir n’importe quelle forme, y compris avec du texte.
17. Utilisation des noms de couleur
Saviez-vous que vous pouvez simplement saisir le nom d’une couleur dans le champ couleur ? Ce n’est probablement pas terrible pour une conception soignée de l’interface utilisateur mais c’est pratique pour des tests rapides ou pour mettre en évidence des précisions lors du débogage. Toutes lesCSS W3 du module des couleurs sont supportés (c’est un peu fou, donc nous utilisons généralement le vert, le bleu et le jaune).
18. Ignorer la mise en page automatique
Nous adorons la mise en page automatique, mais parfois c’est embêtant si vous voulez simplement ajouter ou tester quelque chose rapidement. Il existe une petite astuce que nous ne connaissions pas avant ! Il suffit d**‘appuyer sur la barre d’espacement** pour qu’il soit ajouté au-dessus de la mise en page automatique.
19. Largeur automatique du texte
Vous voulez qu’un texte soit défini en largeur automatique ? C’est simple ! Il suffit de double-cliquer sur la zone de texte.
20. Basculer entre design et prototype (shift+E)
Cette fonctionnalité est également l’une des plus évidentes que nous n’ayons jamais utilisée auparavant. Avec shift+E, vous pouvez basculer entre le mode « prototype » et le mode « design » (conception)… un réel gain de temps.
21. Configurez n’importe quelle fenêtre en tant qu’image miniature (thumbnail)
Auparavant, vous deviez configurer la page supérieure de votre conception en tant qu’image miniature. Ce n’est plus le cas ! Vous pouvez maintenant choisir une fenêtre et la transformer en image miniature. Bien joué ! Sélectionnez une image, faites un clic droit et sélectionnez “set as thumbnail”.
22. Masquer les souris des autres
Vous ne voulez pas voir toutes les souris de vos collègues flotter sur le fichier partagé pendant que vous travaillez ? Pas de problème, vous pouvez simplement les cacher via le Menu>View>Multiple cursors ou appuyez simplement sur « alt + cmd +/ ».
23. Utiliser “%” pour la hauteur de ligne
Dans Figma, la hauteur de ligne est définie en px/pt, ce qui est énervant. Nous aimons bien utiliser les fonctions génériques comme avec CSS, (exemple : « line-height=1.5). Malheureusement, vous ne pouvez pas la définir en valeur CSS, mais vous pouvez utiliser « % ». Cela permet également de modifier la taille de la police tout en conservant la hauteur de ligne.
Pour le calculer : texte : 16 ajouter 1.5 ou 150% de hauteur de ligne serait identique à 16*150% = 24px /pt. D’ailleurs, en mode « inspect » (inspection), le texte sera toujours affiché comme PX.
Le mot de la fin
Figma, cet éditeur graphique continue de s’améliorer année après année. Comme nous l’avons vu ensemble, de nombreuses nouvelles fonctionnalités sont sorties pour rendre l’expérience d’utilisation encore plus agréable.
La plupart de ces raccourcis Mac consistent en des améliorations plus ou moins importantes pour permettre à l’utilisateur d’exploiter au mieux son appareil.
