23 meilleurs conseils Figma en 2022

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 avec agily.fr pour rendre la vie encore plus amusante avec Figma !

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 un cadre spécifique et simplement le coller ailleurs. Vous pouvez soit partager l’ensemble de la page web ou choisir un cadre 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. Celui-ci m’a vraiment plu quand je l’ai découvert ! 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. 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 la cadre 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 mes 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. Lorsqu’une grille est ajoutée au cadre avec vos contraintes (constraints), les éléments non imbriqués prendront les colonnes comme leur cadre parent. Si vous voulez que vos éléments se comportent parfaitement avec la grille, réglez-les sur « gauche-droite ».

Les contraintes respectent toujours une grille appliquée. 

Ceci fonctionne très bien pour du texte ou des groupes 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 (components) avec les pages et les wireframes

Vous êtes probablement familier avec la convention de dénomination « / » pour les composants. Saviez-vous que l’ajout d’un composant maître à un cadre 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 un nouveau cadre. Et les noms de vos composants seront supers et courts.

Lorsque vous placez un composant dans une page et un cadre spécifique, cela se reflète automatiquement dans l’organisation des actifs (assests).

Dans notre exemple, nous avons créé une page pour mobile et une autre pour 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 cadres 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 de 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 au lieu du bureau. 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)

J’ai passé beaucoup de temps à nommer mes 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 trouvez 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.

Les images peuvent être enregistrées et utilisées comme n’importe quel autre style.

 

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 les CSS W3 du module des couleurs sont supportés (c’est un peu fou, donc je m’en tiens généralement au vert, bleu et 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 ! 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 je n’ai 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 +/ »

Masquer les autres souris avec 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’éxpé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.

Vous avez un projet en tête ?

Discutons-en ! 

Découvrez nos autres articles de blog

WordPress Vs JAMstack

WordPress Vs JAMstack

On départage Wordpress vs Jamstack pour déterminer quelle est la meilleure option pour créer un site web rapide, sécurisé et simple à développer.

lire plus
Loading...