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 !

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

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

figma-copie-ecran

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.

figma-conseils

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.

Tous
Business
Jamstack
NodeJS
React Native
Développement Web & Mobile
Flutter
Mobile
Python
Strapi
Wordpress
UX/UI Design
Headless
Process business
Outils

Articles de la même catégorie

Top 5 des meilleurs sites pour créer son site sans coder

Top 5 : les meilleurs outils no-code pour créer votre site web sans coder

Découvrez notre top 5 des meilleurs outils no-code, pour créer votre site web très facilement....
default alt text

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 T...
default alt text

WordPress ou Strapi ? Choisir le bon CMS en 2022

WordPress est le système de gestion de contenu (CMS) éprouvé, souvent considéré comme la meilleure solution (et la plus populaire). Il permet à pratiquement tout le monde de modifier, de créer et de m...