10 astuces pour maîtriser Figma comme un pro
Vous avez pratiqué nos 10 astuces pour optimiser votre temps sur Figma et souhaitez en savoir plus ?
Vous avez déjà un bon niveau sur Figma mais vous voulez passez au ‘niveau supérieur’? Voici quelques astuces fort pratiques pour commencer à devenir un pro ! 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.
Qu'allons-nous aborder ?
- Ajout d’images à la volée
- Sauver la version en cours
- Catégoriser vos styles
- Gérer les espaces et les alignements
- Sélection avancée
- Déverrouiller tous les calques
- Incrément de base
- Ajouter des gifs
- Comment créer des donuts (graphes circulaires)
- Envoyer vos overrides au composant maître
#01 Ajout d'images à la volée
Vous avez plusieurs images à mettre dans des petites cartes ? Rien de plus simple : ⌘+⇧+K, sélectionnez vos images, et cliquez sur les éléments pour y attribuer vos images.
Il peut y avoir un temps de chargement juste après la sélection des images, soyez patient.
![Présentation de l'astuce 1](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3bf8a84b689b4ee04be7_01-placer-images.gif)
#02 Sauver la version en cours
Oui, Figma est un logiciel en ligne et sauvegarde automatiquement votre travail. Néanmoins vous pouvez sauver une version spécifique à un instant “t”.
Pratique pour déterminer certains jalons de création, (design system par exemple).
Entrez le raccourci ⌘+⌥+S, ou dans le menu>File>Save to version history.
![Présentation de l'astuce 2](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3c343538e62f0393b205_02-Enregistrer-la-version.gif)
#03 Catégoriser vos styles
Vous allez me dire que je suis maniaque, et moi je vous répondrais que je suis ordonné ! Alors rangez-bien vos chaussettes/styles, pour ne plus à chercher telle couleur ou retrouvez le code hexa sur un document ouvert sur Photoshop ou autre. Vous verrez, on gagne du temps !
En utilisant le “/” vous pourrez créer des groupes ou catégories de styles.
![Présentation de l'astuce 3 style](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3cbc30150c189ebdcb38_03-categoriser-styles.gif)
Mais vous pouvez tout aussi bien appliquer cette technique à vos styles de textes. Vous voyez où je veux en venir ?
Et encore plus loin, en créant des styles d’effets (ombres, flous, etc…)
![Présentation de l'astuce 3 titre](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3cf583306e42f2d151dd_03-cat-style-02.gif)
#04 Gérer les espaces et les alignements
Voici comment sélectionner plusieurs éléments et les aligner en un clic, et gérer l’espace entre chaque facilement !
![Présentation de l'astuce 4](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3d147262234343de8fbe_04-1024x518.gif)
#05 Sélection avancée
Un petit tips : la sélection par zone. Vous définissez une zone en cliquant et glissant, et en maintenant le clic, appuyez sur espace et déplacez la zone de sélection. Pratique, non ?
![Présentation de l'astuce 5](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3d47414e855b165be10b_05.gif)
#06 Déverrouiller tous les calques
Ah, pas facile de sélectionner un à un tous les éléments que l’on a caché ! Et bien cette petite astuce est très pratique : allez dans le menu et tapez : ‘unhide all object’
![Présentation de l'astuce 6](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3d6e692b053ba635ec34_06.gif)
Vous pourrez également faire la même manipulation pour déverrouiller tous les éléments verrouillés. 'Unlock all objects' ou ⌘ +⌥ + ⇧ + L
#07 Incrément de base
Vous ne voulez plus aller de 10 en 10 mais de 8 en 8 ? Et bien c’est possible.
![Présentation de l'astuce 7](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3da929a3ac77ac178033_07-nudge-1024x552.gif)
#08 Ajouter des gifs
Et oui, on peut ajouter des gif ! Il seront visibles quand vous lancerez le prototype. À la place d’une image simple, un gif animé passe crème.
![Présentation de l'astuce 8](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b3dc89321dc3a966a5dfc_08.gif)
#09 Comment créer des donuts
C’est natif chez Figma ! Aouuuuuuuhhh, aussi simple qu’efficace. En expliquant je compliquerai, donc vous n’avez qu’à regarder !
![Présentation de l'astuce 9](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b2d7096887a8383d20076_08-Selection-1.gif)
#10 Envoyer vos overrides au composant maître
Et bien oui, on peut tout à fait modifier un composant maître depuis une instance. Et ça peut être très pratique, oui oui oui !
![Présentation de l'astuce 10](https://cdn.prod.website-files.com/61e57b7daaef017ad4e0a257/623b2dd71d37da7ea043c8f6_09-teintes-1.gif)
Et pour conclure,
Figma regorge de fonctionnalités pleines de bon sens. Si j’ai pu vous en faire découvrir quelques unes, me voici ravi !