La cohérence est la clé - Comment construire un système de conception Figma

Il est de notoriété publique parmi les concepteurs qu'un bon système de conception peut avoir un impact énorme sur la qualité des produits que nous expédions et sur le rythme auquel nous pouvons les développer. Comme les arguments en faveur de la création d'un système de conception complet ont été clairement établis à maintes reprises, avec des entreprises comme Google, GitHub, IBM et d'autres qui les utilisent pour créer de meilleurs produits à un rythme plus rapide, la question est passée de "Pourquoi devrions-nous avoir un système de conception système?" à "Comment pouvons-nous créer un excellent système de conception ?"

Alors, qu'est-ce qu'un système de conception précisément ? Will Fanguy le définit comme "une collection de composants réutilisables, guidés par des normes claires, qui peuvent être assemblés pour créer un nombre illimité d'applications". Un système de conception peut inclure non seulement une bibliothèque de composants d'interface utilisateur et une bibliothèque de modèles, mais également un guide de style, des meilleures pratiques, du code, etc. Tout comme le plan d'un architecte pour un bâtiment, un système de conception sert également de «source unique de vérité» pour l'équipe produit lors de la construction de produits, tout en aidant à maintenir la cohérence.

GitHub est même allé jusqu'à partager sa bibliothèque de composants Figma, un excellent exemple de système de conception basé sur Figma. Des outils plus complets comme Storybook et Component-Driven Development sont également des ressources extrêmement utiles pour mettre en œuvre et documenter un système de conception.

Un système de conception maintient la cohérence de la conception et doit être utile à toutes les personnes impliquées dans la création d'un produit. Il s'agit d'une boîte à outils qui aide les concepteurs à créer plus rapidement de nouveaux écrans, flux et prototypes. Un bon système de conception aide les développeurs à comprendre la logique derrière les décisions de conception et aide à créer un produit plus cohérent. Il accélère le processus de conception et laisse aux concepteurs plus de temps pour l'expérimentation.

Pour les concepteurs travaillant avec Figma, voyons comment la création d'une bibliothèque de composants dans Figma peut être un élément clé d'un système de conception complet.

La puissance d'une bibliothèque de composants

Parfois, il peut être contre-productif d'investir trop tôt dans la création d'un système de conception. Dans les premières étapes de la conception d'un produit, le processus est encore fluide. Par exemple, si deux barres de navigation principales sont expérimentées, ajouter les deux à une bibliothèque de composants n'aurait aucun sens, car cela confondrait tout le monde dans l'équipe. Il est préférable d'attendre que la conception du produit soit réglée, de préférence testée et quelque peu finalisée.

Si un produit est mature et n'a pas de bibliothèque de composants existante, le système de conception doit déjà être déterminé par l'implémentation actuelle. Mais ce n'est pas encore codifié. À ce stade, il serait avantageux de définir les modèles UX communs et de distiller le produit en un ensemble de composants régulièrement utilisés dans le produit. De plus, il est idéal que la bibliothèque de composants soit conservée dans un emplacement central facilement accessible à tous.

Un système de conception est avant tout une boîte à outils

Essayer d'utiliser un système de conception comme une boîte à outils est un excellent test décisif pour son efficacité. Si plusieurs designers l'utilisent régulièrement pour accélérer leur processus, il fait du bon travail. Si les développeurs peuvent y faire référence pour les couleurs, les styles de caractères ou pour travailler avec moins de contribution des concepteurs, c'est également un bon signe.

Il n'est généralement pas utile d'inclure des composants très complexes ou ceux qui ne peuvent être utilisés qu'une ou deux fois dans le produit. Plus quelque chose est réutilisable, plus il appartient à un système de conception.

Figma a récemment publié des analyses de système de conception pour les organisations, où les équipes peuvent voir à quel point les différentes parties d'un système de conception sont efficaces et aider à l'optimiser.

Pourquoi Figma est idéal pour créer une bibliothèque de composants

Figma est un outil de conception puissant avec de nombreuses fonctionnalités intéressantes, mais il existe un sous-ensemble d'éléments qui deviennent particulièrement utiles lors de la conception de produits complexes : Styles , Composants et Fichiers de bibliothèque . Ces fonctionnalités permettent de maintenir à jour les systèmes de conception, de maintenir la cohérence entre les conceptions et de fournir un raccourci pour mettre à jour plusieurs conceptions à partir d'un emplacement central.

• Les styles sont des couleurs et des styles de caractères (police, taille, épaisseur, etc.) qui sont définis en un seul endroit et peuvent être appliqués à de nombreux objets.
• Les composants sont des éléments tels que des boutons ou des bulles de discussion et peuvent être créés à partir de styles, d'objets tels que des formes et du texte, et d'autres composants.
• Les fichiers de bibliothèque permettent de partager des styles et des composants entre plusieurs fichiers et avec une équipe ou une organisation.

Figma a la collaboration et le partage en son cœur. Les fichiers de conception peuvent être modifiés par n'importe qui dans le navigateur, partagés librement et mis à jour en temps réel car plusieurs utilisateurs peuvent les modifier simultanément. Cela ouvre le système de conception à une collaboration plus efficace non seulement entre les concepteurs mais aussi avec les développeurs et les autres parties prenantes.

Création d'un fichier de bibliothèque

Dans Figma, un fichier de bibliothèque qui servira plus ou moins à la création d'un système de conception peut être créé. Ici, nous pouvons définir des styles et des composants qui sont ensuite partagés au sein de l'équipe ou de l'organisation et utilisés dans plusieurs conceptions. Les styles et les composants peuvent être mis à jour en un seul endroit, et ces modifications peuvent ensuite être apportées automatiquement à tous les fichiers de conception individuels.

Cela présente quelques avantages clés :

1. Vitesse . Cela permet de gagner du temps en supprimant le besoin pour un concepteur de mettre à jour manuellement des centaines de conceptions. En ayant des composants gérés dans un seul fichier de bibliothèque, la mise à jour d'une couleur en un seul endroit peut se propager dans chaque conception créée à l'aide de la bibliothèque de composants en quelques clics.
2. Cohérence . Il réduit le risque d'erreur en automatisant la tâche.

Organisation

Lors de la construction d'un système de conception dans Figma, il est utile d'établir des parallèles entre les outils et la théorie. Par exemple, Styles dans Figma pourrait être considéré comme le niveau le plus basique, encore plus basique que Atoms dans le modèle Atomic Design de Brad Frost. Ce sont des choses comme la couleur et la police qui contribuent à l'esthétique du produit.

Un simple composant Figma serait considéré comme un atome dans le modèle Atomic Design, par exemple un bouton. Un composant Figma plus complexe serait considéré comme une molécule ou un organisme , qui est ensuite utilisé pour construire des modèles et des pages .

Certaines des choses les plus utiles à avoir dans une bibliothèque de composants sont :

• Couleurs
• Polices
• Actifs de marque, logo, etc.
• La navigation
• Boutons
• Avis
• Modaux
• Éléments de formulaire et validation

Construire un système de conception dans Figma - Mise en route

Dans cet exemple, nous allons créer un formulaire de connexion simple et expliquer les composants et les styles qui peuvent être déduits et utilisés.

Réfléchissons tout d'abord aux Composants et aux Styles susceptibles d'être réutilisables à partir de ce formulaire. Il y a une carte contenant un logo, des champs de formulaire et un bouton. Il existe également trois styles de police et quelques couleurs et effets différents qui peuvent être utiles.

Une fois que les styles et les composants à inclure sont identifiés dans la bibliothèque comme ci-dessus, il est temps de créer un fichier de bibliothèque et de commencer à le remplir.

Créer un fichier de bibliothèque Figma

Créez un nouveau fichier et publiez-le en tant que bibliothèque. Une fois qu'un nouveau fichier est créé, cliquez sur l'onglet Actifs , cliquez sur l'icône Bibliothèque , puis cliquez sur Publier . Cela publie les styles et les composants dans le fichier de bibliothèque afin qu'ils puissent être utilisés dans d'autres fichiers.

Les styles et les composants peuvent maintenant être créés dans le fichier de bibliothèque et peuvent être utilisés dans d'autres fichiers et mis à jour à partir du fichier de bibliothèque central.

Comment créer un style Figma

La création de styles est la même dans les fichiers de bibliothèque que dans tout autre fichier, décrite dans les étapes ci-dessous.

• Sélectionnez l'objet à partir duquel vous souhaitez créer un style. Les styles peuvent être des couleurs, des propriétés de texte, des effets et des grilles de mise en page.
• Cliquez sur le bouton Styles (quatre points dans un carré) à côté de la propriété à utiliser dans le nouveau style, puis cliquez sur le bouton plus dans la fenêtre contextuelle pour créer un nouveau style.

• Cela affichera un modal pour nommer le style. Il est souvent utile d'utiliser un nom sémantique plutôt qu'un nom de présentation, par exemple, « Couleur primaire » au lieu de « Vert », afin de mieux comprendre à quoi le style est destiné.
• Publiez le style dans votre bibliothèque d'équipe à l'aide de la fenêtre contextuelle qui apparaît en bas à droite de l'écran, ou répétez les étapes suivies pour publier la bibliothèque en premier lieu.

Voici le tutoriel de Figma sur la création d'un style .

Comment créer un composant Figma

La création d'un composant est également très simple. Sélectionnez simplement l'objet à partir duquel vous souhaitez créer un composant, puis cliquez avec le bouton droit de la souris et sélectionnez "Créer un composant".

Les composants sont publiés dans la bibliothèque d'équipe de la même manière que les styles.

Voici le tutoriel de Figma sur la création d'un composant .

Une fois que quelques styles et composants ont été créés, le fichier de bibliothèque peut être partagé avec l'équipe, et les styles et composants peuvent être utilisés dans n'importe quel nombre de fichiers.

Utilisation de la bibliothèque Figma

Pour utiliser ces styles et composants dans un autre fichier, le fichier de bibliothèque doit être lié à un fichier de conception existant dans lequel nous voulons utiliser les nouveaux styles et composants. Ouvrez simplement à nouveau le modal Bibliothèques (Actifs, icône Bibliothèque) et activez l'interrupteur à bascule pour le fichier de bibliothèque à utiliser.

La bibliothèque de composants est maintenant prête à être utilisée. Les composants peuvent être placés en les faisant glisser dans le fichier de conception à partir de l'onglet Actifs à gauche de l'écran. Les styles de la bibliothèque peuvent être utilisés de la même manière que les styles locaux lors de la modification des styles de texte, des couleurs de remplissage, des contours, des effets et des grilles de mise en page.

Lorsque les composants et les styles sont mis à jour dans la bibliothèque, les fichiers qui les utilisent doivent accepter les modifications. Figma affichera une notification lorsque des mises à jour sont effectuées dans le fichier de la bibliothèque, donnant la possibilité de les publier. Une fois publiés, tous les fichiers utilisant les composants et les styles devront accepter la modification via une notification similaire ou l'onglet ressources pour mettre à jour leurs composants et styles. Cela empêche les modifications d'être publiées et mises à jour de manière inattendue.

Au-delà de la construction d'une bibliothèque de composants dans Figma

Figma ne couvre que la partie bibliothèque de composants d'un système de conception à part entière. Pour un système de conception complet, il vaut la peine d'envisager d'autres éléments qui pourraient être incorporés, tels que les directives de la marque, les guides de style de contenu et la documentation des développeurs.

Le guide de style de contenu de Mailchimp est un excellent exemple, détaillant le ton de la voix et l'image de marque à travers le contenu. GitHub a une excellente documentation sur le fonctionnement de leur bibliothèque de composants dans le code, et le système de conception de matériaux de Google a également d'excellents exemples de documentation de la logique derrière le système de conception.

En tant qu'outil de conception, Figma a beaucoup mûri et de nouvelles fonctionnalités sont constamment ajoutées. L'ajout d'un système de conception Figma avec des analyses intégrées accessibles à l'ensemble de l'organisation est un pas de géant en avant. L'ajout de ces fonctionnalités indique que Figma vise à être un outil de conception complet et à part entière, et il est en bonne voie d'y parvenir.

• • •

Pour en savoir plus sur le blog Toptal Design :

• La puissance de Figma comme outil de conception
• Rationalisez la conception collaborative avec Figma
• Mini tutoriel - Tirer parti des fonctionnalités de Figma pour l'ensemble du processus de conception
• Mini tutoriel - Travailler avec les composants du bouton Figma
• Maîtrisez votre métier avec ces meilleurs outils UX