Vous utilisez Figma depuis un moment mais vous avez l'impression de perdre du temps sur des tâches répétitives ? Si oui, alors ce guide est fait pour vous. Vous allez découvrir 7 points qui vont vous faciliter la vie, afin d'être plus efficace pour vos prochaines maquettes de sites web.
Les local styles vont vous permettre de définir à l'avance les titres, couleurs, ... que vous allez utiliser régulièrement. A la place de modifier à chaque fois vos polices, vous avez juste à modifier le style global. Cela vous évitera d'avoir des problèmes de cohérence dans votre design et surtout de pouvoir tout changer d'un coup.
Imaginez que vous arrivez à la fin de votre maquette mais que la couleur des boutons ne conviennent pas à votre client. Si vous avez créé un local style "bouton couleur", vous pouvez tout modifier d'un coup
Ca demande un peu de rigueur au début mais au final, vous allez y gagnez beaucoup de temps
Les components sont utiles quand vous utilisez un asset plusieurs fois, par exemple un bouton.
Avec cmd + alt/opt + k, vous pouvez créer un component. Tous les assets qui découlent du component sont des instances et les changements effectués sur un component affectent les instances. Cependant, les modifications sur une instance n'a pas d'incidence sur les autres. Il faut donc bien faire attention de travailler sur le component de base (icône des 4 losanges).
Tous vos components apparaissent sous l'onglet assets. Ainsi, vous pourrez retrouver plus facilement votre component.
Les librairies vous donnent la possibilité d'utiliser les assets d'autres documents Figma. Une librairie très connue est celle de material design. Il en existe aussi de toutes sortes comme pour créer des wireframe, utiliser des icônes sans devoir passer 5 minutes sur Flaticon etc...
Vous pouvez également créer vos propres librairies, par exemple, pour votre design system. Vous pouvez y définir vos titres, couleurs, boutons, icônes, ... afin de les réutiliser dans plusieurs documents Figma, très utile pour les projets d'équipe.
L'auto-layout permet de définir la position d'éléments dans un layout afin qu'ils gardent la même place lors d'un changement de dimension.
Vous pouvez définir les padding, l'espacement entre les différents objets, l'option space between pour avoir un espacement régulier selon la taille du layout.
Vous pouvez définir, sous "constraints et resizing", que le layout s'adapte selon la grandeur des éléments. Il est aussi possible de choisir "fill container" afin que le texte retourne à la ligne
Finalement vous décidez d'avoir trois images sur une ligne à la place de deux ? Faites simplement cmd + d pour dupliquer un élément et le layout s'adaptera selon ce que vous avez défini.
Vous pouvez facilement copier-coller le style de de vos éléments grâce au raccourci option/alt + cmd + c et option/alt + cmd + v. Cela fonctionne avec les formes et les textes
Le raccourci cmd + shift + k permet d'importer plusieurs images en même temps. Cela peut être très puissant pour rapidement y placer plusieurs images dans des formes déjà prédéfinies, notamment leur du passage du wireframe à la maquette.
Option + double click sur un canvas permet de voir l'image entière et de pouvoir la rogner selon le canvas.
Quand on commence à se pencher dans tous les raccourcis et fonctionnalités de Figma, on remarque à quel point l'outil est pensé pour nous faciliter la vie. Figma propose de nombreux conseils pour améliorer son efficacité et je vous invite à aller découvrir ça plus en profondeur.
Développeur et designer web passionné de grimpe
