10 astuces Figma pour gagner du temps

Auteur

Grégory

Date

18/03/2020

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
1+

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

Voici quelques astuces fort pratiques pour tous ceux qui utilisent Figma ! 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


Un rapide coup d’oeil de ce qui sera traitĂ© dans ces 10 points. 

Bien Ă©videmment, 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 raccourci ⌘+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 expressions 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) :
Lien vers les Expressions RĂ©guliĂšres
Autre lien sur les RegEx

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

Pour ce faire, sĂ©lectionnez n’importe quel Ă©lĂ©ment de votre document, et puis appuyez sur une des touches numĂ©riques de 0 Ă  9. 

Le 1 correspond Ă  10% d’opacitĂ©, le 2 -> 20%, 
 et le 0 -> 100 %. 
Si vous appuyez 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 ressaisir dans les champs de descriptions, c’est possible !
SĂ©lectionnez l’élĂ©ment dont vous voulez copier les caractĂ©ristiques, faites ⌘+⌄+C. SĂ©lectionnez l’élĂ©ment auquel vous voulez attribuer ce style graphique et faites ⌘+⌄+V.s

#05 Voir les performances de sa page

Votre document rame, c’est long, peut ĂȘtre qu’il faut jeter un oeil Ă  la quantitĂ© de ressources utilisĂ©es sur votre projet. Pour les connaĂźtre, aller dans le menu “burger” en haut Ă  gauche, dans la recherche, tapez “resources”, et cliquer sur “Resources Use”. Vous aurez ainsi accĂšs Ă  toutes ces informations qui vous permettront de mieux optimiser votre document.

#06 ConnaĂźtre tous les raccourcis

Vous voulez utiliser plus souvent votre clavier que le trackpad ou la souris (parce que 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.

ou trouver les raccourcis

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. Placez 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.

Selection 1/2

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.

#09 Modifier la teinte d'un gris rapidement

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

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 rester appuyé 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 ?
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

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 a d’autres qui sont Ă  venir.

CRÉONS ENSEMBLE !

N'hésitez pas à nous contacter, nous ferons de votre projet, une performance.
JE ME LANCE