Tout savoir sur les design systems : qu'est-ce qu'un design system ?
Découvrez les design systems, ce qu'ils sont, comment ils fonctionnent et comment ils peuvent changer votre façon de concevoir.
Partager Tout savoir sur les design systems : qu'est-ce qu'un design system ?
Illustration de Cynthia Alfonso.
Les design systems sont les héros méconnus des produits que nous utilisons tous les jours, qu'il s'agisse d'applications mobiles, de sites web ou d'interfaces sur les écrans de télévision et les tableaux de bord des voitures. Ils sont l'ADN de la conception des produits et enregistrent les principes et les éléments qui définissent l'expérience des utilisateurs. Les couleurs et les icônes sont choisies avec précision, les boutons ont une taille et une forme homogènes, le langage est clair et compréhensible. Si votre design system fonctionne bien, il fera gagner du temps aux utilisateurs finaux.
Sans design system, vous risquez de vous retrouver dans l'impasse, à parcourir un labyrinthe pouvant générer de la confusion, une dilution de l'image de marque ou de la frustration pour l'utilisateur. Dans cet article, nous vous présenterons les principes de base des design systems, analyserons ce qui les rend si essentiels et vous aiderons à élaborer un système qui non seulement améliorera votre présence numérique, mais la protégera également contre le risque de désorganisation.
Cet article s'appuie sur notre module de formation Introduction aux design systems, dans lequel nous abordons les bases des design systems. Vous pouvez également la visionner sur YouTube.
Qu'est-ce qu'un design system ?
À la base, un design system est un ensemble de blocs de construction et de normes qui aident à préserver la cohérence visuelle des produits et des expériences. Il s'agit d'une sorte de modèle, avec un langage homogène et un cadre structuré, qui guide les équipes tout au long du processus complexe de création de produits numériques. Un design system peut réduire le temps passé à recréer des éléments et des modèles lors de la conception et de l'élaboration de produits et d'interfaces à grande échelle.
Composants d'un design system
La hiérarchie des design systems est la suivante :
1. Design system
Cet élément de premier niveau est votre direction générale, un ensemble fondamental de ressources et de processus en constante évolution pour votre écosystème de produits. Il peut s'agir de caractéristiques techniques, de design tokens, de documentation et de bonnes pratiques, ou encore de principes et de processus fondamentaux visant à orienter les décisions en matière de conception de l'expérience utilisateur et de développement de produits.
Bibliothèques de composants ou de modèles
Bien qu'elles fassent toutes deux partie intégrante des design systems, les bibliothèques de composants sont principalement composées d'éléments d'interface utilisateur tels que des boutons et des champs de saisie, tandis que les bibliothèques de modèles contiennent des solutions de design au sens large (flux de navigation, affichage des données, etc.)
2. Bibliothèques de composants et de modèles
Il s'agit d'éléments visuels réutilisables et de modèles d'interaction qui définissent l'interface commune et le comportement de votre produit. Il peut s'agir de modèles, de mises en page, de schémas d'interaction, d'extraits de code et de composants, accompagnés d'une documentation détaillée.
Différence entre les design systems et les guides de style
Bien qu'ils soient souvent utilisés de manière interchangeable, les design systems sont plus généraux, incluent des normes de codage et sont faciles à utiliser. En revanche, un guide de style est un sous-ensemble principalement axé sur les éléments visuels tels que les couleurs, la typographie et l'imagerie.
3. Éléments fondamentaux
Ils définissent le langage visuel, y compris l'apparence des éléments et le ton général du produit, tels que la couleur et la typographie. Ils comprennent aussi généralement des icônes, des logos, des illustrations, ainsi que vos règles en matière d'accessibilité et d'image de marque.
Design systems et expérience utilisateur : plus qu'une question d'esthétique
Selon une idée reçue largement répandue, les design systems étouffent l'esthétique en limitant la créativité des concepteurs et en harmonisant tous les designs. Les design systems aident les concepteurs en proposant des modèles reproductibles, ce qui leur permet de consacrer davantage de temps à d'autres défis. En utilisant un design system partagé et maintenu à jour dans Figma, les concepteurs peuvent réutiliser des composants cohérents, mettre en place des variantes pour passer en toute fluidité d'un mode à l'autre et d'une taille d'écran à l'autre, le tout sans devoir copier et coller sans cesse les mêmes designs. Les mises à jour peuvent être effectuées en un seul endroit et diffusées dans tout le système, ce qui permet à toute l'équipe d'être sur la même longueur d'onde. Ainsi, les concepteurs sont libres de se concentrer sur le problème suivant, ou de se pencher sur un autre, afin de créer des expériences plus intuitives, accessibles et agréables.
Ana Boyer, Designer Advocate, brise six idées reçues qui freinent l'adoption des design systems.
Pourquoi utiliser un design system ?
L'impact d'un design system réside dans sa capacité à simplifier les workflows, à assurer la cohérence d'un produit et à favoriser la collaboration entre des équipes interfonctionnelles. Qu'il s'agisse de commencer modestement ou de passer à l'échelle supérieure sur plusieurs plateformes, un design system peut permettre à une équipe de faire plus avec moins, non seulement pour concevoir des fonctionnalités, mais également pour construire le produit réel.
Un design system est une source d'informations unique qui réduit la redondance du design et accélère le processus de développement. En utilisant le design system, les concepteurs passent moins de temps à refaire des composants et piochent dans une bibliothèque d'éléments approuvés par la marque et faciles à développer pour élaborer rapidement des designs. Lorsque les composants intègrent un code, des jetons et des préréglages d'animation, les développeurs peuvent rapidement les traduire en un code fonctionnel et accessible. Les entreprises qui utilisent des design systems ont constaté une transformation du cycle de développement de leurs produits, avec des délais de mise sur le marché plus courts et une expérience utilisateur homogène.
Pour les nouveaux concepteurs, un design system peut servir d'outil d'intégration en les aidant à se familiariser avec le produit et ses principes, et en leur permettant d'apporter leur contribution plus rapidement. Au fur et à mesure que le système évolue, il peut fournir aux équipes une vision et un langage communs qui favorisent une meilleure compréhension et une meilleure cohérence des produits. Cela peut accroître la confiance des utilisateurs de votre produit et ainsi renforcer leur engagement et leur fidélité au fil du temps.
Bref historique des design systems
La première mention de l'utilisation de « systèmes » ou de « modèles » a été faite lors de la conférence de l'OTAN sur le Génie Logiciel à la fin des années 1960 par Christopher Alexander. Son livre « A Pattern Language », publié avec Murray Silverstein et Sara Ishikawa, traite des modèles interconnectés dans l'architecture et est considéré comme étant à l'origine de ce que nous connaissons aujourd'hui sous le nom de « design systems ».
Le concept de design systems a évolué en même temps que la technologie elle-même. Les design systems remontent aux débuts de la conception graphique et de la presse écrite, où les guides de style et les normes typographiques ont introduit pour la première fois l'idée d'une conception systématique. Au milieu du XXe siècle, l'image de marque est devenue vitale pour les entreprises et la nécessité d'une identité cohérente a conduit à l'élaboration de règles exhaustives en la matière.
Avec la révolution numérique, les principes de ces systèmes sont passés du papier aux pixels, gagnant en complexité pour s'adapter à l'expansion du web et à l'essor du marché des applications. Des géants comme Apple en 1987, suivis par Google, IBM et Microsoft, ont été parmi les premiers à définir des langages de design complets visant à définir l'apparence d'innombrables interfaces utilisateur. Ces systèmes ont été conçus non seulement pour l'aspect esthétique, mais aussi pour l'aspect pratique, offrant une documentation claire et des modèles réutilisables pour accélérer le développement et simplifier la conception de l'interface utilisateur, répondant ainsi aux besoins naissants des équipes chargées des produits numériques.
The NASA Graphics Standard Manual, publié en janvier 1976 avec une introduction de l'administrateur de la NASA Richard Truly.
L'apparition de la méthode de l'Atomic Design de Brad Frost en 2013 a redéfini la structure des design systems. Cette approche a non seulement révolutionné la façon dont nous concevons les composants de l'interface utilisateur, en les organisant selon une hiérarchie claire allant des atomes aux molécules et aux organismes, mais a également fourni un vocabulaire commun aux équipes de design et de développement. J'avais commencé à étudier la conception systématique un an auparavant, suite à mes expérimentations avec le framework Twitter Bootstrap et aux connaissances acquises lors de conférences du secteur. Influencée par les écrits et les conférences de Bryan Haggerty, Laura Kalbag et Josh Clark, j'ai constaté et admis la nécessité d'une approche systématique capable de s'adapter à l'évolution rapide des plateformes d'appareils et des petits rectangles lumineux. En m'inspirant des manuels de normes graphiques des années passées et de frameworks tels que Bootstrap et Zurb Foundation, j'ai commencé à rallier un groupe de collègues autour de cette idée de créer des normes, des éléments réutilisables et de la documentation qui, réunis, deviendraient plus tard le premier de mes nombreux design systems à venir.
Rune Madsen a publié une histoire des design systems dans le cadre de son module de formation en ligne Programming Design Systems.
Ce parcours reflète des tendances plus larges dans le domaine, depuis la création de bibliothèques de modèles au début des années 2000 jusqu'à l'adoption des pratiques de Responsive Design. Ces étapes soulignent l'importance des design systems pour les outils numériques modernes. Aujourd'hui, les design systems sont des ressources complètes qui facilitent la création de produits numériques, en veillant à ce qu'ils soient non seulement visuellement cohérents, mais aussi intuitivement utilisables sur différents appareils et plateformes. Cette évolution de règles rudimentaires vers des cadres complexes illustre l'interaction dynamique entre la technologie et le design, dans une quête permanente d'efficacité, de cohérence et d'innovation.
Comment savoir si vous avez besoin d'un design system ?
Chad Bergman, Designer Advocate chez Figma, et Jacob Miller, chef de produit, présentent Building Blocks, notre outil de création de design systems. Regarder les épisodes précédents sur YouTube.
Une taille unique ne convient pas à tous
Tout au long de votre parcours, gardez à l'esprit qu'il n'existe pas de design system unique qui convienne à tous. Chaque entreprise a des besoins différents, qui nécessitent des solutions différentes.
Il n'est pas toujours évident de déterminer le moment idéal pour mettre en place un design system. Il s'agit d'un choix stratégique fondé sur une combinaison d'avantages, de défis potentiels et d'obstacles uniques auxquels votre entreprise est confrontée. Alors, quand faut-il adopter un design system ?
La décision d'adopter un design system doit être motivée par des besoins spécifiques :
Identifier les incohérences
Examinez minutieusement l'apparence de votre produit sur les différentes plateformes. Si vous constatez des incohérences flagrantes ou une identité de marque qui se dilue d'une expérience à l'autre, cela indique que vous avez sans doute besoin d'un design system.
Envisager des thèmes ou des plateformes diversifiés
Votre produit doit-il passer de manière fluide d'un thème à l'autre (comme un mode sombre et un mode clair, ou des marques différentes) ou s'adapter à différentes plateformes et tailles d'écran ? Un design system peut être la clé pour résoudre ces difficultés.
Réduire les redondances
Faites le point sur les tâches de design répétitives ou les problèmes récurrents qui accaparent le temps de votre équipe. Les composants normalisés d'un design system peuvent simplifier votre processus.
Améliorer la communication
Étudiez la façon dont votre équipe communique au sujet du design. Y a-t-il des malentendus ou perdez-vous du temps à clarifier certains éléments ? Un langage commun en matière de design peut atténuer ces difficultés.
Faciliter l'intégration
Pensez au processus d'intégration des nouveaux membres de l'équipe. Un design system fiable peut rendre cette transition plus rapide et efficace, en permettant à chacun de s'investir rapidement.
Améliorer l'efficacité du cycle de vie
Réfléchissez au cycle de vie de votre produit. S'il est possible d'accélérer la conception, le prototypage et les mises à jour, un design system peut être un catalyseur d'efficacité, améliorant chaque étape du développement du produit.
Avant de vous engager, évaluez le workflow actuel de votre équipe, l'expérience utilisateur de votre produit et les problèmes spécifiques à résoudre. Une discussion approfondie avec votre équipe vous aidera à déterminer la nécessité et le périmètre potentiel d'un design system adapté à vos besoins.
Découvrez Comment Headspace a construit un design system qui respire, en utilisant des fonctions telles que les variables dans Figma pour optimiser l'échelle.
Anticiper les défis liés à la mise en place d'un design system
Si les design systems offrent une multitude d'avantages, leur mise en place n'est pas sans difficulté. Comprendre ces obstacles peut vous préparer à une transition en douceur vers un design plus simple et efficace.
Maintenance continue
Tout d'abord, comme n'importe quel produit, un design system exige une attention et des efforts continus, non seulement pour sa mise en place initiale, mais aussi pour sa maintenance. Tout comme les grands produits, qui continuent d'évoluer, un design system n'est jamais vraiment terminé. Maintenir un design system à jour et pertinent nécessite du temps et des ressources dédiées, ce qui vous engage à long terme.
Avantages différés
L'impact d'un design system est important, mais se dévoile au fil du temps. Cette lente révélation des avantages peut freiner les dirigeants, notamment si elle détourne les ressources ou l'attention des objectifs immédiats du projet. L'investissement initial, tant en termes de temps que d'élargissement potentiel de l'équipe, peut être important avant que les bénéfices tangibles ne deviennent évidents.
Allocation des ressources
L'allocation des ressources adéquates est un exercice d'équilibre. Au-delà du développement initial, les design systems ont besoin d'une contribution continue des concepteurs, des développeurs et des chefs de produits pour rester efficaces. Il peut être nécessaire de revoir les priorités, voire d'élargir l'équipe pour éviter que le design system ne stagne.
Transformation culturelle
L'un des défis les plus délicats et complexes est peut-être le changement de culture nécessaire à l'intégration d'un design system au sein d'une entreprise. Il ne s'agit pas seulement d'adopter un nouvel ensemble d'outils ou de processus, mais de changer la façon dont les équipes communiquent, collaborent et conçoivent leur travail. Pour intégrer véritablement un design system dans votre entreprise, vous aurez besoin de talents, c'est-à-dire de personnes qui s'engagent à garantir son succès et peuvent convaincre les autres de son utilité. Il est important de noter qu'à mesure que le système se développe et évolue, il doit s'adapter à l'évolution des besoins et des contributions de sa communauté, ce qui en fait une ressource vivante, façonnée par les utilisateurs.
Assurer l'adoption du système
Obtenir l'adhésion de tous à un design system est une tâche ardue. Il faut éduquer et convaincre les différentes parties prenantes de son intérêt à long terme, ce qui nécessite une communication claire, des démonstrations de son impact et une stratégie d'adoption généralisée. Cela signifie souvent qu'il faut créer et entretenir une communauté autour du design system englobant différents services et postes.
En reconnaissant d'emblée ces défis et en élaborant une stratégie pour les relever, vous pouvez mettre en place un design system plus efficace et mieux accepté. Le chemin est difficile, mais l'objectif (une pratique de design plus cohérente, efficace et évolutive) en vaut la peine.
Vous comptez passer à Figma ? Consultez l'article « Guide destiné aux initiés pour une migration optimale vers Figma » de Clara Ujiie, Designer Advocate, pour obtenir plusieurs ressources, conseils et outils facilitant la transition vers Figma.
Prochaines étapes de votre parcours vers les design systems
La mise en place d'un design system ne consiste pas seulement à créer un ensemble de normes, mais également à instaurer une culture de la cohérence, de la collaboration et de l'efficacité. Il s'agit d'un défi passionnant. Toutefois, il n'existe pas d'approche unique. Si vous n'êtes pas prêt à faire un grand saut, de petites améliorations peuvent toujours apporter une pierre à l'édifice. Consultez nos autres articles sur les design systems, notre formation Introduction aux design systems et nos ressources telles que les design systems ouverts dans la Communauté Figma.
✉️ Inscrivez-vous à notre newsletter The Long & Short Of It pour obtenir davantage de conseils et d'informations sur les design systems !
Ce billet de blog fait partie d'une longue série d'articles, bien d'autres sont à venir. Quels sont les autres sujets que vous aimeriez découvrir ? Envoyez-moi vos questions sur Tweeter/X@figma. Cette série d'articles porte sur notre formation Introduction aux design systems, que vous pouvez également visionner sur YouTube.
Découvrez comment Figma aide les équipes de toutes tailles à garantir la cohérence, à faire évoluer les designs et à maintenir un équilibre avec les tâches de développement en utilisant nos fonctionnalités de design systems ou demandez une démonstration.
