10 Astuces Figma pour gagner du temps

Débuter et augmenter votre productivité sur cet outil de création.

Un rapide coup d’oeil de ce qui sera traité dans ces 10 points. Si vous êtes débutant cela vous permettra d’accélérer votre productivité. Et si vous êtes déjà expert, peut-être aurez-vous quelques surprises…

Bien évidement, je suis sur un environnement de la marque à la pomme, donc vous pouvez tout de suite remplacer le ⌘ par Control et le ⌥ par la touche Alt.

Voici la liste des 10 astuces abordées

1. Dupliquer après un drag & drop
2. Renommer un|plusieurs calques
3. Gérer opacité en un clin d’oeil
4. Copier/coller style graphique
5. Voir les performances de son document
6. Connaître tous les raccourcis
7. Sélectionner 1/2
8. Sélectionner 2/2
9. Modifier la teinte d’un gris rapidement
10. Sélectionner une couleur

**Surprise…**

#01 Dupliquer après un drag & drop (glisser-déposer)

Après avoir copier et coller un élément par la commande ⌥ ou alt. Vous pouvez dupliquer plusieurs fois cet élément avec le raccourcis ⌘+D avec les mêmes caractéristiques de déplacement utilisées lors du drag & drop.

#02 Renommer un|plusieurs calques

Avoir un document bien organisé avec des calques bien nommés, c’est la base ! Il n’y a rien de pire que de se retrouver nez à nez avec un document qui comporte des calques non-documentés. Avec Figma, vous en avez la possibilité. Vous pouvez même sélectionner plusieurs calques et les renommer de façon incrémentale avec le raccourci ⌘+R.

Ou alors si vous êtes familier avec les expression régulières vous pouvez aller encore plus loin. Mais là c’est vraiment très avancé. Si toutefois vous êtes curieux (suivez les liens ci-dessous, en anglais).

RegExr: Learn, Build, & Test RegEx

Regex For Noobs (like me!) - An Illustrated Guide

#03 Gérer l’opacité en 1 clin d’oeil

Pour ce faire, sélectionner n’importe quel élément de votre document, et puis appuyer sur une des touches numériques de 0 à 9.

Le 1 correspond à 10% d’opacité, le 2 -> 20%, … et le 0 -> 100 %.
Si vous appuyer 2 fois sur le 0 alors vous aurez un objet totalement transparent (0% d’opacité).
Pratique, non ?

#04 Copier/Coller le style graphique

Pouvoir reproduire le même style graphique d’un élément à un autre sans être obligé de tout resaisir dans les champs de descriptions, c’est possible !
Sélectionner l’élément dont vous voulez copié les caractéristiques, faites ⌘+⌥+C. Sélectionnez l’élément auquel vous voulez attribuer ce style graphique et faites ⌘+⌥+V.

#05 Voir les performances de sa page

Votre document rame, c’est long, peut être qu’il faut jeter un oeil à la quantité de resources utilisées sur votre projet. Pour les connaître, aller dans le menu “burger” en haut à gauche, dans la recherche, taper “resources”, et cliquer sur “Resources Use”. Vous aurez ainsi accès à toutes ses informations qui vous permettront de mieux optimiser votre document.

#06 Connaître tous les raccourcis

Vous voulez plus souvent utiliser votre clavier que trackpad ou la souris (parce que voilà vous voulez économiser du trajet à vos mains). Et bien c’est possible, il y a un bouton en bas à droite de votre fenêtre avec le “?”. Cliquez dessus, puis sur “Keyboard Shortcuts”, et vous aurez accès à tous les raccourcis de l’outil répertoriés par catégories.

Tous les raccourcis que vous avez déjà utilisés sont en bleus, à vous d’apprendre les autres…
À noter, que les raccourcis sont pensés pour un clavier américain (qwerty), c’est bien dommage, espérons qu’ils penseront à l’azerty.

#07 Sélectionner (1/2)

Ou comment sélectionner des éléments qui sont en dessous d’un groupe, ou verrouillés. Placer le curseur sur l’objet désiré et faites un clic droit ou pour ne montrer que le menu contextuel avec les calques, faites ⌘+clic droit.
Vous aurez alors la possibilité de choisir un élément dans le sous menu liste qui vient d’apparaitre.

Et vous aurez également accès aux calques verrouillés ou cachés.

#08 Sélectionner (2/2)

Pour naviguer à l’intérieur des groupes d’éléments, voici 2 autres raccourcis bien pratiques.
⇧+↩ -> Revenir au parent de l’élément
↩ -> Sélectionner les enfants de l’élément.

Lorsque vous êtes en phase de création ou que vous voulez tester des nuances de gris pour votre maquette, pouvoir rapidement changer les teintes sans avoir à éditer le code hexa ou ouvrir le nuancier de couleur, c’est tout à fait faisable.

Sélectionnez une teinte de gris et cliquez dans le champ hexadécimal. Ensuite avec les flèches ↑ ou ↓ vous allez pouvoir modifier la teinte. Vous pouvez accentuer la modification en y ajoutant le ⇧.

#10 Sélectionner votre couleur ^+C

Simple et efficace. Sélectionnez un élément graphique et pour lui attribuer une couleur visible dans votre document ou en dehors de la fenêtre du navigateur, utilisez ^(Control)+C.

Le petit plus, c’est que vous pouvez reste appuyer tout en baladant votre pointeur sur la page, et vous verrez votre élément prendre la couleur du pixel touché par la pipette.

*Bonus* Zoomer et sélectionner directement un élément

Vous avez parcouru tout votre document et vous ne retrouvez plus tel élément que vous avez pourtant sous les yeux dans votre panneau de calques. Et bien c’est tout à fait possible.
Sélectionnez votre calque dans le panneau éponyme, et ensuite 2 solutions :

• ⇧+2
• Double cliquez sur le pictogramme à gauche du texte de l’élément

Et pour finir,

J’espère que vous aurez appris ou découvert de nouvelles astuces sur ce bel outil qu’est Figma, Et si vous n’en avez pas eu assez, il y en à d’autres qui sont à venir.