Naviguer jusqu'au contenu principal

Comment créer votre design system

Chad BergmanDesigner Advocate, Figma
Illustration géométrique avec des lignes parallèles, des cercles et des ondulations de couleur jaune, verte, orange et bleue.Illustration géométrique avec des lignes parallèles, des cercles et des ondulations de couleur jaune, verte, orange et bleue.

Vous êtes sur le point de construire votre design system ! Voici comment créer les fondations d’un design system adapté à vos objectifs et vos challenges, que vous commenciez à partir de zéro ou d’une base existante.

Illustration de Cynthia Alfonso

Un design system bien conçu est un outil puissant pour créer des interfaces cohérentes, évolutives et efficaces. En définissant un vocabulaire connu de tous et une bibliothèque de composants réutilisables, un design system garantit des produits cohérents, accélère les workflows et libère du temps pour travailler sur les problématiques rencontrées par l’utilisateur.

Dans le dernier article de cette série, nous avions fait le tour des fondamentaux. Pour exploiter pleinement toute la puissance d’un design system, vous devez savoir de quelle façon construire et mettre en œuvre le vôtre. Plus facile à dire qu’à faire, n’est-ce pas ? Dans ce guide, nous expliquerons ce processus via des étapes claires et concrètes. Depuis la définition de vos principes à la préparation du terrain, en passant par la création et l’organisation de vos assets design, nous évoquerons les bonnes pratiques et des exemples réels pour vous aider à créer un design system qui permet à votre équipe de gagner en autonomie et d’améliorer votre produit.

Illustration abstraite présentant des formes organiques orange et des motifs en zigzag verts sur un fond bleu.Illustration abstraite présentant des formes organiques orange et des motifs en zigzag verts sur un fond bleu.

Cet article est le deuxième d’une série consacrée aux design systems. Lisez la première partie : Qu’est-ce qu’un design system ?

Première étape : préparez le terrain

Votre équipe ou votre organisation peut bénéficier d’un design system pour de nombreuses raisons. Avant de se plonger dans la création de composants et de modèles, il est nécessaire de savoir pourquoi on construit un design system et quels sont les problèmes que l’on espère résoudre. Peut-être que votre produit manque de cohérence d’une plateforme à l’autre, ou que les mises à jour sont à faire manuellement et prennent du temps. Ou alors vous voulez améliorer la collaboration, mettre tout le monde en phase ou aider les nouvelles recrues à se mettre au niveau rapidement.

Quelles que soient vos raisons, prenez le temps de définir clairement vos objectifs en répondant à ces questions :

  • Pourquoi voulez-vous un design system ?
  • Quels problèmes doit-il résoudre ?
  • Comment saurez-vous si votre design system réussit à résoudre ces problèmes ?

Dans cette courte vidéo, Jesse Showalter échange avec Dan Mall sur l’importance des design systems et sur ce qui peut vous aider à déterminer si votre organisation a besoin d’en mettre un en place.

Les design systems peuvent être utiles à des équipes de toutes tailles, peu importe leur expérience. Mais en vérité, tout le monde n’a pas besoin d’un design system complexe ou commun à toute l’entreprise. Si vous débutez en la matière, que vous êtes junior ou que vous travaillez dans une petite équipe sur un nombre limité de marques ou de produits, un design system plus simple et quelques modèles et composants réutilisables peuvent suffire à optimiser votre workflow et garantir une certaine cohérence. Au fil de la croissance de vos projets et de votre équipe, votre design system peut évoluer pour s’adapter à vos nouveaux besoins.

L’essentiel est de créer un design system qui correspond à votre situation, que vous ayez besoin d’un système complet capable de gérer plusieurs produits, ou d’un simple jeu d’éléments réutilisables pour une petite équipe. Les design systems ne sont pas universels. Ils varient fortement en fonction des besoins qu’ils cherchent à combler, et ils peuvent être utiles aux indépendants comme à de grandes entreprises.

Au début, le plus important est de mettre tout le monde en phase sur ce que la mise en place d’un design system implique pour votre organisation, et d’expliquer pourquoi vous vous investissez dans ce processus.

Faites le point sur l’existant

Une fois que tout le monde est d’accord sur les objectifs, il vous faut examiner attentivement votre écosystème de produits. Rassemblez et classez tous les éléments que vous utilisez actuellement : les couleurs, les polices, les icônes, les composants, les modèles, etc. Les captures d’écran vous seront d’une grande aide. Récoltez des captures de votre produit sur différentes plateformes et appareils, et pensez à inclure les états d’interaction et les versions alternatives. Il est probable que vous voyiez émerger des modèles et des constantes qui peuvent servir de point de départ à votre design system.

Organisez and évaluez votre inventaire

Vous voilà doté d’un inventaire, il est temps de le décortiquer. Organisez vos captures d’écran et vos exemples en catégories, puis prenez du recul et évaluez l’ensemble. À quoi ressemble votre vocabulaire design ? Y a-t-il une possibilité de standardiser et d’optimiser ?

Notez les incohérences, les doublons et les endroits où votre produit semble décousu. Ce sont des signes que la cohérence apportée par un design system peut aider à améliorer l’expérience utilisateur.

Trouvez des alliés

Créer un design system est un travail d’équipe, vous aurez donc besoin de porte-paroles. Identifiez les personnes les plus sensibles à la cohérence du design, ou celles qui ont déjà une expérience des design systems. Ne vous limitez pas à l’équipe design : contactez des développeurs, des product managers, le service après-vente, et d’autres services de l’entreprise. Obtenir différents avis vous aidera à vous assurer que votre design system comble les besoins de tous vos produits et de toute votre organisation, et pas seulement un service. N’oubliez pas que de nombreux design systems réussis ont été lancé à l’initiative d’une seule personne ! N’ayez pas peur de promouvoir le vôtre par vous-même.

Choisissez votre approche

Deux approches sont possibles : commencer de zéro et créer une solution sur mesure, ou construire à partir d’une structure existante et l’adapter à vos besoins. Chacune a des avantages et des inconvénients.

Commencer de zéro vous permet de créer un design system sur-mesure, adapté à vos besoins spécifiques, mais il nécessite d’engager plus de temps et de ressources dès le début. Utiliser une structure existante ou un design system open source peut vous aider à être opérationnel et autonome plus rapidement, mais pourra demander plus de personnalisation pour s’adapter à votre cas particulier.

Il n’y a pas de bonne ou de mauvaise réponse – tout dépend du potentiel de votre équipe, de sa bande passante, et de vos objectifs à long terme. N’ayez pas peur de commencer doucement, votre design system évoluera avec le temps.

S’aligner avec les objectifs de l’entreprise

Enfin, assurez-vous que l’initiative de création de votre design system correspond bien aux objectifs globaux de votre entreprise. Étudiez les paramètres comme le timing, les ressources et la validation par la direction. C’est là que votre audit va être utile : servez-vous de vos conclusions pour expliquer comment un design system contribuera aux objectifs clés de l’entreprise.

Les design systems exigent un investissement continu, il est donc important d’avoir le soutien des parties prenantes dès le départ. Montrer le lien entre votre design system et des avantages commerciaux concrets (comme une mise en production plus rapide ou une expérience utilisateur améliorée) peut vous aider à obtenir les ressources et la validation dont vous avez besoin.

Illustration d’un workflow avec des formes abstraites, des coches et des flèches représentant un processus de design dynamique.Illustration d’un workflow avec des formes abstraites, des coches et des flèches représentant un processus de design dynamique.

Vous comptez passer à Figma ? Consultez l’article de Clara Ujiie, designer advocate, intitulé An insider’s guide to a seamless Figma migration (Guide de l’initié pour une migration en douceur vers Figma). Vous y trouverez de nombreuses ressources, des conseils et des outils pour passer à Figma.

Définissez vos principes directeurs

Une fois ces bases établies, vous voilà prêt à façonner votre design system. Une première étape importante consiste en la définition d’un ensemble de principes directeurs. Ils vont servir de boussole à votre design system et permettre à chacun de rester aligné au fur et à mesure que le système se développe et évolue. Vos principes doivent établir la raison d’être et les valeurs de votre design system, et garantir que chaque décision correspond aux objectifs plus larges de votre organisation. Le but est de constituer un petit nombre de principes faciles à mémoriser, à mettre en œuvre et à appliquer.

Dans un monde idéal, les principes seraient définis dès le début. Mais en pratique, ils apparaissent souvent plus tard, ou ils évoluent au fur et à mesure de la maturation du design system. Ce n’est pas un problème ! Une fois qu’ils sont définis, l’important est de s’assurer que tout le monde les connaît et est en phase avec eux. Cela rendra les décisions futures bien plus faciles à prendre.

Cette série s’appuie sur notre Initiation aux design systems (en anglais), qui montre comment l’équipe d’Habitz définit ses principes fondamentaux et les retranscrit en directives concrètes pour le design.

Voici quelques astuces pour créer des principes de design efficaces :

  1. Partez du Pourquoi. Quelle est la croyance ou la valeur fondatrice du principe ?
  2. Soyez précis. Donnez des exemples concrets et des définissez des règles d’application pour vos principes.
  3. Restez concret. Les principes doivent pouvoir se traduire en pratiques concrètes, pas seulement en intentions écrites.

Imaginons que l’accessibilité soit une priorité essentielle. Un principe centré sur l’inclusivité pourrait comprendre des règles concernant la prise en compte de différentes capacités visuelles et auditives, avec des tests de contraste et de lisibilité, ou il pourrait suivre les standards d’accessibilité les plus récents. Plus vos principes sont précis et concrets, mieux c’est.

Trois cartes avec les mots Professional, Approachable et Thoughtful, accompagnées d’icônes et de texte.Trois cartes avec les mots Professional, Approachable et Thoughtful, accompagnées d’icônes et de texte.

Découvrez vos principes avec votre équipe à l’aide ces ces modèles FigJam.

Tirez parti de la richesse des connaissances au sein de votre organisation pour définir vos principes en matière de design. Étudiez les ressources et les règles existantes au sein de votre entreprise, comme les chartes de marque, les directives concernant le tone of voice, les stratégies marketing ou même les instructions appliquées par le service client. Utilisez-les comme point de départ et travaillez avec des partenaires transverses pour vous assurer que les vôtres sont en phase avec l’ensemble. L’objectif n’est pas simplement de créer un ensemble de principes généraux, mais de formuler les priorités et les valeurs propres à votre organisation et à votre produit.

Deuxième étape : posez les fondations

Les bases de votre design system sont les éléments visuels et fonctionnels fondamentaux qui forment son support. Elles incluent des aspects cruciaux comme l’accessibilité, la couleur, la typographie, les illustrations et les dimensions. Ensemble, ces éléments doivent créer un vocabulaire design facile à utiliser et à comprendre.

Capture d’écran de Figma, montrant la mise en page d’une application financière. Le design comprend des boutons avec des labels tels que Done, OK, Continue et Retry sous une section intitulée Progress, et Create account, New goal, Link my bank sous startTask, ainsi que Add cash, Invest in AMZN, Cash out sous startTransaction. Sur le côté gauche, une barre latérale répertorie des éléments de design tels que Shadow, Elevation, Color et Typography, avec une actionLibrary intégrée contenant des composants UI.Capture d’écran de Figma, montrant la mise en page d’une application financière. Le design comprend des boutons avec des labels tels que Done, OK, Continue et Retry sous une section intitulée Progress, et Create account, New goal, Link my bank sous startTask, ainsi que Add cash, Invest in AMZN, Cash out sous startTransaction. Sur le côté gauche, une barre latérale répertorie des éléments de design tels que Shadow, Elevation, Color et Typography, avec une actionLibrary intégrée contenant des composants UI.

Découvrez comment Stash crée des produits bancaires auxquels ses clients font confiance en utilisant des composants Figma et Ditto pour ses mises à jour de texte. Le résultat ? Un travail 20 % plus rapide et 12​​000 heures de travail économisées.

Rendez votre design accessible à tout le monde

Rendre votre produit accessible, c’est vous assurer que chacun peut utiliser et comprendre votre produit, peu importe ses capacités. Il s’agit d’une responsabilité collective, qui doit se trouver au cœur des principes de votre design system. Lorsque vous le créez, penchez-vous sur des éléments comme la taille des polices, les contrastes de couleur, et la façon d’étiqueter et d’organiser les composants. Il est important de communiquer pourquoi et comment les ressources de votre design system doivent être utilisées lorsque vous voulez créer des expériences qui respectent les standards d’accessibilité. En donnant la priorité à l’accessibilité depuis le début et en fournissant des règles claires, vous posez les bases d’un produit plus inclusif dont tout le monde peut profiter. Cependant, souvenez-vous qu’un design system accessible ne garantit pas automatiquement que votre produit le soit. L’effort doit être constant et exige l’engagement de toute l’équipe.

Graphisme promotionnel pour le tout nouveau plugin Stark pour Figma, intitulé Supercharge Accessibility. Il présente des captures d'interface avec des outils d'accessibilité pour la vérification des contrastes, la typographie et les suggestions de texte alternatif. Le slogan indique : « Tous les outils dont les designers, les développeurs, les product managers et les experts en accessibilité ont besoin pour concevoir dès le départ des produits et des logiciels accessibles ». L'arrière-plan est un dégradé de violet avec des dessins décoratifs jaunes et un cœur rouge.Graphisme promotionnel pour le tout nouveau plugin Stark pour Figma, intitulé Supercharge Accessibility. Il présente des captures d'interface avec des outils d'accessibilité pour la vérification des contrastes, la typographie et les suggestions de texte alternatif. Le slogan indique : « Tous les outils dont les designers, les développeurs, les product managers et les experts en accessibilité ont besoin pour concevoir dès le départ des produits et des logiciels accessibles ». L'arrière-plan est un dégradé de violet avec des dessins décoratifs jaunes et un cœur rouge.

Testez le plugin de Stark pour le contraste et l’accessibilité afin d’améliorer votre workflow dédié à l’accessibilité. Pour vérifier celle de vos couleurs, explorez les plugins de la communauté Figma et suivez lesWeb Content Accessibility Guidelines.

Choisissez des couleurs qui vont bien ensemble

La couleur est un outil puissant. Elle peut évoquer des émotions, stimuler la curiosité et attirer l’attention des gens. Quand vous choisissez des couleurs pour votre design system, visez une gamme équilibrée, ni trop limitée, ni trop fournie. Prenez en considération les différents modes (comme le mode sombre) et les différents produits à gérer pour garder une expérience de marque cohérente.

Capture d’écran montrant « le système pour palette de couleurs ultime » par Untitled UI, présentant un vaste choix d’échantillons et de noms de couleurs organisés sur un modèle d’UI.Capture d’écran montrant « le système pour palette de couleurs ultime » par Untitled UI, présentant un vaste choix d’échantillons et de noms de couleurs organisés sur un modèle d’UI.

Allez voir ce système pour palette de couleur ultime signé Untitled UI, un ensemble de styles de couleurs bien organisés, parfait point de départ pour la palette d’une marque ou d’un projet.

Pour simplifier votre palette, examinez les designs existants et fusionnez les nuances similaires. Réduire le nombre de couleurs utilisées pour les boutons primaires, par exemple, peut rendre votre design plus clair et plus intuitif. En règle générale, il est préférable de commencer avec 60 % de couleurs neutres, 30 % de couleurs primaires et 10 % de couleurs secondaires ou d’accent.

Sélectionnez des polices faciles à lire et qui correspondent à votre marque

La typographie est un autre élément clé pour les bases de vos designs. Choisissez des polices qui vont bien ensemble, faciles à lire et correspondant à la personnalité de votre marque. Prêtez attention aux détails comme l’interlettre, la graisse et la hauteur de ligne pour que la lecture soit agréable. Établissez un ensemble de taille de police et de hauteur de ligne avec votre échelle de caractères, dont la taille de base est généralement autour de 16 pixels. Vous pouvez également structurer votre échelle de caractères en fonction de l’application prévue, par exemple « affichage » ou « titre », ou opter pour une dénomination plus simple telle que « en-tête-100. »

Graphique montrant l’outil Typescale avec un exemple d’échelle typographique utilisant la phrase « The quick brown fox jumps over the lazy dog » dans différentes tailles, sur un fond jaune vif.Graphique montrant l’outil Typescale avec un exemple d’échelle typographique utilisant la phrase « The quick brown fox jumps over the lazy dog » dans différentes tailles, sur un fond jaune vif.

Pour l’échelle typographique, utilisez des plugins comme Typescale par Sam Smith, ou Scaaale (oui, avec trois A) de Nicolas Massi.

Créez une hiérarchie visuelle avec les superpositions

La notion de superposition renvoie à l’utilisation des ombres, des couches et de la transparence pour amener profondeur et clarté à votre design. Par exemple, les cartes peuvent sembler légèrement surélevées au-dessus de la page, ou une boîte de dialogue peut devenir un point focal paraissant flotter au-dessus du reste grâce à l’utilisation d’ombres. Des ombres subtiles sur les barres de navigation fixes ou des ombres en creux sur les tiroirs de navigation peuvent également indiquer leur position par rapport à la page. La superposition peut vous aider à structurer votre interface et à aider les utilisateurs à comprendre intuitivement quels sont les éléments principaux et quels sont les éléments secondaires.

Créez des icônes cohérentes et éloquentes

Explorez ce guide complet pour la création d’icônes par l’illustratrice et icon designer Bonnie Kate Wolf sur DesignSystems.com.

Les icônes sont de petits symboles visuels qui communiquent rapidement des idées et des actions. Unicon system bien conçu renforce l’identité de votre marque et améliore l’utilisabilité. Veillez à ce que vos icônes soient claires, cohérentes et qu’elles conservent leur sens même lorsqu’elles sont mises en forme différemment. Utilisez une grille pour que la taille et l’alignement des icônes soient cohérents, et donnez-leur des noms descriptifs et des termes de recherche qui les rendent faciles à trouver et à utiliser.

Image représentant de nombreuses icônes colorées et stylisées disposées sur des tuiles physiques, avec un dégradé doux et pastel. Le mot Iconographie est affiché en gros caractères noirs et le mot FONDATIONS en caractères plus petits à gauche, ce qui indique que l’accent est mis sur les aspects fondamentaux du design d’icônes.Image représentant de nombreuses icônes colorées et stylisées disposées sur des tuiles physiques, avec un dégradé doux et pastel. Le mot Iconographie est affiché en gros caractères noirs et le mot FONDATIONS en caractères plus petits à gauche, ce qui indique que l’accent est mis sur les aspects fondamentaux du design d’icônes.

Découvrez comme les équipes de Microsoft utilisent leur icon system, baptisé Fluent, dans tous leurs produits. Les icônes Fluent ont des coins arrondis, des formes simplifiées, et existent en version standard ou pleine.

Appliquez les tokens avec les variables et les styles

Image d’une pile cylindrique de disques rayés verts, jaunes et rouges, créant un effet de superposition, sur un fond orange.Image d’une pile cylindrique de disques rayés verts, jaunes et rouges, créant un effet de superposition, sur un fond orange.

Regardez notre leçon sur l’application des tokens, des variables et des styles, qui fait partie de notre cours d’introduction aux design systems.

Variables vs. styles

Dans Figma, les variables contiennent une seule valeur (comme la couleur), alors que les styles renferment une information plus complexe, comme les paramètres d’un dégradé. Ils sont plus adaptés pour des interfaces détaillées et à plusieurs niveaux. En savoir plus

Dans Figma, vous pouvez utiliser les variables et les styles pour créer un design system cohérent et évolutif. Les variables et les styles vous aident à définir les éléments principaux qui peuvent être utilisés dans vos designs. Ils sont généralement séparés en deux catégories principales :

  • Les primitives : : il s’agit des éléments de base de votre design system, tels que les couleurs, l’espacement et les dimensions. Ces éléments constituent les fondements de votre design, mais ne sont pas utilisés directement dans les composants ou les mises en page.
  • Les sémantiques fournissent un contexte pertinent sur la façon d’utiliser une variable ou un style. Par exemple, vous aurez une variable de couleur appelée « couleur-fond-avertissement » qui servira à véhiculer un sentiment d’urgence ou de danger potentiel. Les variables sémantiques sont essentiellement des alias de valeurs primitives en arrière-plan, mais elles peuvent également accepter des codes hexadécimaux bruts, des nombres ou des chaînes de caractères.

Pour bien gérer les variables et les styles, il est important d’utiliser une convention de nommage claire et cohérente. Nathan Curtis, design system contributor, suggère de combiner une base (comme la couleur ou la taille) avec les modificateurs (comme la variante ou l’état) pour créer des noms faciles à comprendre et à utiliser. Le but est de partager une convention que tous les membres de l’équipe peuvent utiliser pour communiquer et travailler de manière plus efficace.

Regardez le tutoriel Figma : Initiation aux variables (en anglais) pour mieux comprendre le fonctionnement des variables, et également comment les utiliser pour représenter les design tokens et tenir compte des différents modes et thèmes.

Utilisez les grilles de mise en page et l’espacement pour créer une harmonie visuelle

Les grilles de mise en page, l’espacement et le dimensionnement (nommés collectivement « systèmes spatiaux ») sont comme la colle invisible qui maintient la cohésion de vos interfaces. Ils créent une impression de structure, de cohérence et d’harmonie visuelle qui confère un aspect soigné et professionnel à votre produit.

  • Les mises en page : Définissez la façon dont votre design s’adapte à différentes tailles d’écran et appareils, afin que l’expérience soit cohérente sur toutes les plateformes.
  • Les grilles : Utilisez des grilles à colonnes, des grilles à lignes et des grilles modulaires pour aligner les éléments de manière cohérente et créer une hiérarchie visuelle claire.
  • L’espacement : Définissez des unités d’espacement cohérentes pour contrôler les distances entre les éléments et créer une mise en page équilibrée et lisible.

De nombreux types de grilles peuvent être utilisées pour créer la colonne vertébrale de votre mise en page :

  • Les grilles à colonnes divisent l’écran en sections verticales, ce qui facilite l’alignement des éléments et permet de conserver une cohérence visuelle d’un appareil à l’autre.
  • Les grilles à lignes contrôlent l’espacement vertical entre les éléments, en s’alignant généralement sur la ligne de base de votre texte.
  • Les grilles modulaires combinent les colonnes et les lignes afin de créer une structure flexible pour des mises en page plus complexes.

Pour en savoir plus sur les espacements, les grilles et les mises en page, lisez cet article signé par Elliot Dahl, head of product design chez Hightouch, sur DesignSystems.com.

Cette image montre une comparaison entre deux types de grilles à lignes utilisées dans le design graphique. En haut, un panneau de réglage intitulé « Lignes » propose des options pour le nombre (100), la couleur (rouge avec le code hexadécimal #FF0000 avec une opacité de 10 %), le type (Haut), la hauteur (16), le décalage (0) et la gouttière (16). À droite, un graphique montre une grille à ligne qui met en évidence la hauteur des lignes avec des bandes horizontales rouges espacées régulièrement sur un fond blanc, correspondant aux paramètres. En dessous, un panneau de réglage similaire présente les mêmes options, mais l’opacité de la couleur est fixée à 30 %. À droite de ce panneau, un autre graphique de grille présente cette fois une grille à ligne de base qui les met en évidence à l’aide de lignes rouges continues sur fond blanc, indiquant l’endroit où la ligne de base du texte s’alignerait, ce qui correspond également aux paramètres du panneau. Ces deux grilles illustrent les outils utilisés par les designers pour garantir un rythme et un espacement verticaux cohérents dans leurs mises en page.Cette image montre une comparaison entre deux types de grilles à lignes utilisées dans le design graphique. En haut, un panneau de réglage intitulé « Lignes » propose des options pour le nombre (100), la couleur (rouge avec le code hexadécimal #FF0000 avec une opacité de 10 %), le type (Haut), la hauteur (16), le décalage (0) et la gouttière (16). À droite, un graphique montre une grille à ligne qui met en évidence la hauteur des lignes avec des bandes horizontales rouges espacées régulièrement sur un fond blanc, correspondant aux paramètres. En dessous, un panneau de réglage similaire présente les mêmes options, mais l’opacité de la couleur est fixée à 30 %. À droite de ce panneau, un autre graphique de grille présente cette fois une grille à ligne de base qui les met en évidence à l’aide de lignes rouges continues sur fond blanc, indiquant l’endroit où la ligne de base du texte s’alignerait, ce qui correspond également aux paramètres du panneau. Ces deux grilles illustrent les outils utilisés par les designers pour garantir un rythme et un espacement verticaux cohérents dans leurs mises en page.
Les réglages de grille ci-dessus illustrent différentes approches de création d’une grille à lignes.

Pourquoi le chiffre huit est-il si récurrent dans les design systems ? C’est simple : la majorité des points de rupture des appareils sont divisibles par huit, ce qui en fait une unité de base idéale pour les grilles, les espacements et la typographie.

Un bon espacement est essentiel pour établir une hiérarchie visuelle et créer des liens entre les éléments d’un design. En utilisant des unités d’espacement constantes, vous créez une impression d’harmonie et d’équilibre dans tout votre produit.

Le responsive design est une façon de construire des interfaces qui prend en compte la diversité des appareils pour optimiser l’expérience de visualisation sur toutes les tailles d’écran.

En fournissant des composants et des modèles de mise en page prédéfinis, votre design system peut vous permettre de créer des interfaces responsives et adaptables de manière plus efficace. Ces composants sont créés avec un ensemble de points de rupture prédéfinis qui déterminent comment la mise en page s’adapte à différentes tailles d’écran. Par exemple, votre design system aura probablement un composant spécifique pour présenter un message ou un produit clé. En prévoyant des variantes de mise en page pour les différentes tailles d’écran, vous vous assurez que la bannière principale reste esthétique et garde sa hiérarchie visuelle, qu’elle soit consultée sur un téléphone ou sur un ordinateur. Cette approche permet de se concentrer sur la création de designs parfaitement adaptés à leur produit, plutôt que de réinventer la roue à chaque fois que se pose le problème de la mise en page responsive.

Un contrepoint : a-t-on vraiment besoin d’une grille ? Donnie D’Amato, design systems architect, propose de travailler sans grille.

Cependant, ce n’est pas parce que votre design system existe que tout le monde va l’utiliser à la perfection. C’est comme un livre de recettes : c’est très utile, mais le cuisinier doit en suivre les instructions pour préparer un délicieux repas. C’est pourquoi les designers doivent comprendre et s’approprier le système spatial. S’ils saisissent l’intérêt d’un espacement et d’une mise en page réguliers, leurs interfaces ont plus de chance de satisfaire et de plaire aux utilisateurs.

Les fonctionnalités pour design system de Figma, comme les grilles et les styles, facilitent l’adoption d’un système spatial par les équipes, et ce pour tous leurs projets. En fournissant une source unique de vérité concernant les grilles, les espacements et les composants de mise en page, Figma aide tout le monde à rester sur la même longueur d’onde et à appliquer systématiquement le système spatial. Le résultat ? Une expérience utilisateur cohérente et intuitive, peu importe la taille d’écran.

En fin de compte, un système spatial est un outil précieux, mais son efficacité dépend de l’utilisation qu’en font les designers. S’ils en comprennent les avantages et qu’ils sont encouragés à l’utiliser systématiquement, ils peuvent profiter de tout son potentiel.

Rappelez-vous, un système spatial est là pour vous inspirer et vous guider, et non pour entraver votre créativité. Quand vous appliquez le système spatial à votre travail, donnez toujours la priorité aux besoins et à l’expérience de votre utilisateur, et considérez les règles comme une structure utile, plutôt que comme un carcan.

Troisième étape : construisez votre design system dans Figma

Construire un design system dans Figma, c’est créer une méthode de travail cohérente, efficace et évolutive pour tout votre projet. Un peu comme des briques que chaque membre de votre équipe peut utiliser pour créer des interfaces cohérentes. Voici un guide étape par étape pour vous lancer :

Examinez vos designs existants avec attention

Revenez sur votre votre audit initial, où vous aviez examiné tous vos designs existants pour les décomposer en éléments individuels. Commencez par définir vos variable et vos styles, qui sont les fondamentaux de vos designs. Cela comprend les couleurs, les polices, l’espacement, la mise en page, et tous les effets comme les ombres. En créant des styles prédéfinis, vous vous assurez que tout le monde utilise les mêmes éléments de design dans tous vos projets.

Dans cette vidéo Figma, la designer advocate Lauren Andres explique ce que sont les propriétés de composants et comment les créer.

Les propriétés d’un composant sont ses paramètres ajustables. Vous pouvez définir quelles parties d’un composant sont modifiables par les membres de votre équipe en les associant à des propriétés de design spécifiques.

Ensuite, définissez vos composants. Ce sont des blocs de construction tout prêts que vous pouvez réutiliser dans vos interfaces, comme des boutons, des icônes, ou des éléments plus complexes comme les modales et les barres de navigation. Décomposez-les afin de faire émerger leurs parties les plus élémentaires, et utilisez-les pour construire des structures plus complexes.

Choisissez des noms clairs et cohérents

Lorsque vous nommez vos composants et vos variables, il est important de choisir des noms qui reflètent leur fonction, plutôt que leur aspect visuel ou la façon dont ils sont codés. Ainsi, il sera plus facile de les comprendre et de bien les utiliser. Servez-vous du nommage sémantique, qui véhicule le sens et la raison d’être de l’élément. Pour un message d’alerte, vous pouvez utiliser le nom couleur-alerte, et pour la couleur de fond de votre application, le nomfond-principal. Ajoutez au nom les détails comme la catégorie ou la variante, par exemplecouleur-texte-secondaire pour votre couleur de titre secondaire.

Pour ce qui est de la casse de nommage, vous avez différentes possibilités. Le trait d’union (comme dansbouton-principal) et le camel case (les mots sont attachés, avec une majuscule à partir du deuxième, comme dans boutonPrincipal) sont les plus utilisés. Si vous ne savez pas quelle convention de nommage choisir, parlez-en aux développeurs pour voir si vous pouvez vous aligner avec une convention existante au sein de votre organisation.

Organisez votre bibliothèque Figma

Découvrez comment l’entreprise technologique Onfido, qui aide les entreprises à effectuer des vérifications, organise ses équipes, ses projets et ses fichiers de design system.

Un des atouts de Figma réside dans la possibilité de partager des bibliothèques sur différents fichiers et projets. Ainsi, tous les membres de votre équipe peut accéder au même ensemble de styles et de composants, indépendamment du projet sur lequel ils travaillent.

Lorsque vous configurez votre bibliothèque, réfléchissez à la structure qui conviendra le mieux à votre équipe. Peut-être vaut-il mieux tout mettre dans le même fichier, pour que tout le monde travaille à partir de la même « source de vérité ». Vous pouvez aussi tout diviser et répartir les éléments dans plusieurs fichiers, selon les différentes parties de votre projet. Prenez en compte la façon dont vos équipes aiment travailler, et comment les designers et les développeurs vont utiliser la bibliothèque.

Graphisme à thème sombre mettant en évidence la structure du design system avec un encadré intitulé Meilleures pratiques et des éléments tels que Alerte, En-tête, Pied de page et Zone de texte reliés par un organigramme.Graphisme à thème sombre mettant en évidence la structure du design system avec un encadré intitulé Meilleures pratiques et des éléments tels que Alerte, En-tête, Pied de page et Zone de texte reliés par un organigramme.

Vous avez besoin de conseils sur la meilleure façon de structure votre design system ? Consultez ce fichier de la communauté créé par Luis Ouriach, designer advocate chez Figma. Vous y trouverez des recommandations sur comment construire un design system qui corresponde à vos équipes, vos projets et vos fichiers.

Gardez à l’esprit que la construction de votre design system dans Figma est un processus continu, et qu’il va grandir et évoluer avec vos équipes et vos projets. Commencez par poser des bases solides, et encouragez les membres de votre équipes à contribuer et à améliorer vos pratiques de design au fil du temps. Au fur et à mesure de sa maturation, votre design system va devenir une partie intégrante de votre workflow, imprégné de l’expertise et de la créativité collective.

Si vous souhaitez en savoir plus sur les subtilités de la construction d’un design system dans Figma, consultez notre démonstration étape par étape et la vidéo ci-dessous.

✉️ Abonnez-vous à notre newsletter pour encore plus d’idées et d’astuces sur les design systems !

Si vous avez d’autres questions ou des sujets à explorer, n’hésitez pas à nous envoyer un message sur X (anciennement Twitter) via @figma. C'est toujours un plaisir de vous aider ! Découvrez comment Figma peut vous aider à amener de la cohérence, à faire passer votre design à l'échelle et à rester sur un pied d'égalité avec le développement avec sesfonctionnalités de design systemset demandez une démo.

Créez et collaborez avec Figma

Lancez-vous gratuitement