Design : Système de conception simple et réutilisable dans Figma

Techniquement, vous pouvez utiliser l’un des systèmes de conception prêts à l’emploi disponibles pour Figma, mais je dirais que ce n’est pas une très bonne idée, sauf si vous essayez de créer quelque chose à la hâte. Je pense qu’il est toujours préférable de consacrer le temps nécessaire à la construction de votre projet à partir de zéro. Cela vous permettra de mieux comprendre comment chaque composant est créé et de résoudre les problèmes qui peuvent survenir lors de l’utilisation du système de conception.

Parfois, il peut être difficile de créer un système de conception sans avoir une vue d’ensemble. C’est une bonne idée de baser votre système de conception autour d’un projet déjà terminé.

La première chose et la plus importante est de créer une grille appropriée pour votre système de conception. Selon le type de framework avec lequel vous allez travailler, vous pouvez utiliser différents types de grilles. Celui que j’utilise personnellement le plus souvent est la grille Bootstrap. J’aime configurer ma grille pour non seulement m’aider à espacer les objets horizontalement mais aussi verticalement. Je ne vais pas expliquer pourquoi vous devriez utiliser une grille, car c’est un sujet pour un autre article.

Vous devez transformer la grille ainsi créée en un style. Maintenant, si vous ne l’avez pas déjà fait, c’est aussi une bonne idée d’aller dans le menu Figma hamburger> Préférences> Nudge Amount et de définir les valeurs à 1 et 8. De cette façon, vos touches fléchées du clavier en combinaison avec la touche Maj vous permettront de déplacer les objets tout en restant fidèle à la grille que vous venez de créer.

La prochaine étape consiste à créer un tas de styles de police que nous allons utiliser dans notre projet. Il est important de se rappeler de couvrir toutes les bases telles que plusieurs styles pour les titres, les textes de paragraphe, les conseils, les légendes, etc. Faites autant de projets que vous le souhaitez. Vous pourriez penser à vous-même: « Hé, pourquoi ne pas avoir le même style pour les boutons et les menus car ils utilisent la même police? » Eh bien, vous pourriez vous retrouver dans un peu de cornichon s’il s’avère que vous n’avez besoin de modifier la taille de la police de vos éléments de menu qu’à une étape ultérieure de votre projet.

J’aime garder tous mes styles de police affichés dans un cadre, donc je sais s’ils jouent bien ensemble ou non. Ce type de configuration sera nécessaire si vous décidez de dupliquer votre système de conception au lieu de l’utiliser comme bibliothèque pour votre projet, mais j’y reviendrai plus tard. Généralement, cette quantité de styles devrait être suffisante pour tout type de site Web de taille moyenne contenant une quantité décente de texte.

En ce qui concerne les couleurs, je définis généralement des styles pour les couleurs de la marque, la couleur d’action et certains gris. Vous souhaiterez peut-être définir des styles pour les messages importants, d’avertissement, de réussite, d’erreur, etc. Traiter avec une palette strictement définie facilite non seulement le processus de conception, mais aussi le transfert.

Un ensemble de base d’icônes souvent utilisées est également une bonne idée. J’ai utilisé les icônes de matériaux de Google pour cet exemple. Même si vous êtes chargé de concevoir votre propre ensemble, vous pouvez les utiliser comme espaces réservés dans les premières maquettes faciles à remplacer ultérieurement.

Même s’il existe une variété de plugins qui peuvent générer automatiquement du contenu pour vous tels que des avatars ou des images, je préfère créer un ensemble prédéfini d’images ou d’avatars en tant que styles, pour conserver la cohérence au cas où je déciderais de les utiliser comme espaces réservés.

Ce n’est pas très intuitif, mais Figma vous permet de configurer des images en tant que styles de couleurs que vous pourrez ensuite utiliser comme n’importe quel style de couleur normal – pour remplir un objet donné en utilisant un ensemble de caractéristiques prédéfinies. Ce qui est encore plus intéressant, c’est que les objets peuvent avoir beaucoup de calques de remplissage en eux-mêmes qui interagissent les uns avec les autres (cela s’applique également aux traits, aux effets, etc.) et donc un groupe de calques de remplissage dans un même objet peut être défini comme un style facilement modifiable. Les calques de remplissage peuvent également être déplacés vers l’avant ou l’arrière et copiés entre les objets. C’est une fonctionnalité impressionnante que peu de gens connaissent.

Vous pouvez bien sûr obtenir des effets similaires en configurant des images en tant que composants, mais vous ne pouvez pas utiliser des composants en tant que remplissages.

La dernière étape consiste à créer des ombres pour votre projet. Pour un petit système de conception, je ne m’embêterais pas avec un système d’élévation complexe, seulement quelques styles d’ombres différents devraient suffire.

Une fois tous les styles configurés de cette façon, il est temps de commencer à assembler certains composants.