\n2. D\u00e9finition de l\u2019outil<\/span><\/a>
\n3. R\u00e9alisation d\u2019un audit de conception<\/a>
\n4. D\u00e9finition des \u00e9l\u00e9ments de conception basiques<\/a>
\n5. D\u00e9finition des composants du syst\u00e8me de conception<\/a>
\n6. D\u00e9finition des pages (\u00e9crans, fen\u00eatres, compositions)<\/a>
\n7. Comment partager votre syst\u00e8me de conception<\/a>
\n8. Lectures recommand\u00e9es et exemples<\/a><\/p>\n
<\/a>1. Processus de cr\u00e9ation du syst\u00e8me de conception<\/span><\/h2>\nSelon les r\u00e9pondants au dernier sondage sur l\u2019<\/span>\u00e9tat des syst\u00e8mes de conception en 2020<\/span><\/a>, la construction d\u2019un syst\u00e8me de conception peut vous rendre endett\u00e9 \u00e0 cause de deux raisons principales\u00a0:<\/span><\/p>\n\n- Manque de planification<\/span><\/li>\n
- Le fait de n\u2019avoir pas compris l\u2019ampleur d\u2019un syst\u00e8me de conception<\/span><\/li>\n<\/ul>\n
Donc, une chose importante que vous devez comprendre est qu\u2019un syst\u00e8me de conception n\u2019est pas un fichier que vous remplissez une fois avec la supposition qu\u2019il sera bon pour toujours. La cr\u00e9ation d\u2019un syst\u00e8me de conception r\u00e9ussi et durable n\u00e9cessite beaucoup d\u2019efforts et de planification pr\u00e9alable.<\/span><\/p>\nLa premi\u00e8re \u00e9tape consiste \u00e0 d\u00e9terminer clairement qui sera en charge du syst\u00e8me de conception et \u00e0 d\u00e9cider le processus \u00e0 suivre. Vous pouvez le faire de diff\u00e9rentes mani\u00e8res\u00a0: en \u00e9quipes solitaires, centralis\u00e9es ou f\u00e9d\u00e9r\u00e9es. Vous devrez \u00e9galement d\u00e9terminer les objectifs, c-\u00e0-d la mani\u00e8re dont vous mesurerez le succ\u00e8s du syst\u00e8me de conception. Cela comprend le co\u00fbt et le temps requis, les priorit\u00e9s et la strat\u00e9gie \u00e0 suivre pour donner suite \u00e0 ces priorit\u00e9s.<\/span><\/p>\nDans notre cas, comme nous n\u2019avons que deux designers dans l\u2019\u00e9quipe produit, nous avons d\u00e9cid\u00e9 qu\u2019une seule personne en sera responsable et consacrera un temps sp\u00e9cifique par semaine \u00e0 maintenir le syst\u00e8me. De plus, lors de la d\u00e9finition des objectifs et r\u00e9sultats cl\u00e9s (OKR) pour chaque trimestre, nous prenons en compte qu\u2019il doit y avoir une t\u00e2che li\u00e9e au syst\u00e8me de conception pour mettre \u00e0 jour, ajouter ou supprimer certains \u00e9l\u00e9ments. De cette fa\u00e7on, nous nous assurons qu\u2019un certain temps est toujours consacr\u00e9 \u00e0 maintenir notre syst\u00e8me de conception pour le tenir en bon \u00e9tat de fonctionnement.<\/span><\/p>\n![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/Design-System-Organisation.png\")
Les trois approches diff\u00e9rentes pour organiser un syst\u00e8me de conception : en \u00e9quipes solitaires, centralis\u00e9es ou f\u00e9d\u00e9r\u00e9es\u00a0<\/span>(source : Medium.com<\/a>).<\/p><\/div>\n<\/a>2. D\u00e9finition de l\u2019outil<\/span><\/h2>\nAvant de commencer \u00e0 pr\u00e9parer quoi que ce soit, il est important de d\u00e9finir o\u00f9 on va h\u00e9berger la conception et o\u00f9 la documentation. Il est essentiel de documenter les meilleures pratiques pour les \u00e9l\u00e9ments, les composants, les vues et les mod\u00e8les. La documentation peut \u00e9galement inclure vos principes directeurs et des fragments de code, la justification des choix de conception, les choses \u00e0 faire et \u00e0 ne pas faire, etc.<\/span><\/p>\nVous pouvez choisir de tout faire dans Figma (c-\u00e0-d\u2019y cr\u00e9er des composants, des modules, etc. et aussi la documentation de l\u2019ensemble du syst\u00e8me de conception) ou le faire s\u00e9par\u00e9ment avec le kit UI sur une plateforme de conception telle que <\/span>Figma<\/span><\/a>, <\/span>Sketch<\/span><\/a> ou <\/span>Adobe XD<\/span><\/a> pendant que la documentation du syst\u00e8me de conception est faite sur une autre plateforme.<\/span><\/p>\nPlusieurs plateformes peuvent g\u00e9rer la documentation, et beaucoup d\u2019entre elles sont gratuites. Voici les quatre principaux types d\u2019outils de documentation\u00a0:<\/span><\/p>\n\n- Outils de conception<\/b> \u2013 Utilisez des outils de conception pour cr\u00e9er des \u00e9crans num\u00e9riques et g\u00e9rer tous vos actifs num\u00e9riques. Utilisez-les \u00e9galement pour partager des designs (p. ex., l\u2019exportation d\u2019images, l\u2019acc\u00e8s en ligne et le partage de biblioth\u00e8ques). Ces outils, parmi eux Sketch, Figma, Adobe XD et Framer X, n\u2019ont pas \u00e9t\u00e9 con\u00e7us pour cr\u00e9er la documentation g\u00e9n\u00e9rale. Mais un fait int\u00e9ressant est que<\/span> Framer X<\/span><\/a> combine d\u00e9veloppement et conception en incorporant du code.<\/span><\/li>\n
- Outils de documentation<\/b> \u2013 Ces outils offrent des pages Web accessibles au public avec contr\u00f4le de version que tout le monde peut utiliser pour r\u00e9cup\u00e9rer des informations. La plupart de ces outils sont destin\u00e9s aux d\u00e9veloppeurs, avec des options d\u2019h\u00e9bergement et d\u2019affichage de code. Comme il n\u2019y a pas d\u2019int\u00e9gration avec les outils de conception, les concepteurs doivent d\u00e9velopper (et mettre \u00e0 jour) les images de chaque design et les placer ou remplacer manuellement sur le site Web. Exemples de ceci sont <\/span>GitBook<\/span><\/a>, <\/span>VuePress<\/span><\/a>, <\/span>Fractal<\/span><\/a> et <\/span>Confluence<\/span><\/a>.<\/span><\/li>\n
- Outils de documentation de la conception <\/b>\u2013 <\/span>Frontify<\/span><\/a>, <\/span>zeroheight<\/span><\/a>, <\/span>Nuclino<\/span><\/a>, <\/span>Lucid<\/span><\/a> et <\/span>Bynder<\/span><\/a>\u00a0 ne sont que quelques exemples d\u2019outils de documentation de la conception. Leurs layouts sont meilleurs pour afficher la marque et le design. Certains de ces outils se synchronisent m\u00eame automatiquement avec votre outil de conception\u00a0; donc avoir votre syst\u00e8me de conception \u00e0 jour avec les derni\u00e8res modifications est un jeu d\u2019enfant. Dans notre cas, nous utilisons zeroheight pour expliquer les cas d\u2019utilisation, les combinaisons, les valeurs, etc. Et puis nous avons le kit UI dans Figma.<\/span><\/li>\n
- Plateformes sur mesure<\/b> \u2013 Vous avez aussi la possibilit\u00e9 de d\u00e9velopper votre propre plateforme. Cela vous donne plus de flexibilit\u00e9 dans ce que vous pouvez faire. Cependant, cela n\u00e9cessite aussi beaucoup plus d\u2019efforts et de connaissances techniques et ne prend pas en charge la synchronisation avec votre outil de conception (\u00e0 moins que vous ne soyez un programmeur tr\u00e8s qualifi\u00e9 d\u00e9sireux de cr\u00e9er votre propre plugin personnalis\u00e9). <\/span>La plateforme Material de Google<\/span><\/a> est un exemple de plateforme sur mesure.<\/span><\/li>\n<\/ol>\n
![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/Design-system-tools.png\")
Comparaison des diff\u00e9rents outils pour des syst\u00e8mes de conception (source <\/span>: Hike One<\/a>).<\/p><\/div>\nComme vous pouvez le voir, chaque outil a son propre ensemble de fonctionnalit\u00e9s, de points forts et d\u2019imperfections\u00a0; ainsi, trouver le meilleur outil d\u00e9pend enti\u00e8rement de vos besoins. Alors, quelles autres questions devriez-vous vous poser\u00a0? Est-ce que vous utilisez Sketch, Adobe XD ou Figma pour cr\u00e9er vos designs\u00a0? Collaborez-vous \u00e9troitement avec les d\u00e9veloppeurs\u00a0? Est-ce que vous souhaitez int\u00e9grer le marketing dans votre strat\u00e9gie\u00a0? Ou souhaitez-vous utiliser un syst\u00e8me de conception statique ou dynamique\u00a0?<\/span><\/p>\n<\/a>3. R\u00e9alisation d\u2019un audit de conception<\/span><\/h2>\nParcourez tous les designs dont vous disposez jusqu\u2019\u00e0 pr\u00e9sent et prenez des captures d\u2019\u00e9cran. Regroupez-les en diff\u00e9rentes cat\u00e9gories telles que navigation, listes d\u00e9roulantes, en-t\u00eates, etc. Ensuite, regroupez-les en sous-cat\u00e9gories, telles que \u00e9tats des boutons. Maintenant, examinez ce que vous avez d\u00e9j\u00e0 et trouvez des patrons et des incoh\u00e9rences. Pour r\u00e9sumer\u00a0:<\/span><\/p>\n\n- Prenez des captures d\u2019\u00e9cran des composants de votre produit actuel. Assurez-vous de que vous voyez toutes les propri\u00e9t\u00e9s de votre produit comme le site d\u2019aide, les outils internes, les diff\u00e9rentes applications, etc.<\/span><\/li>\n
- Utilisez Figma ou Google Slides pour organiser vos captures d\u2019\u00e9cran ou envisagez de les imprimer et de les \u00e9pingler sur des panneaux en mousse.<\/span><\/li>\n
- Examinez chaque cat\u00e9gorie pour d\u00e9tecter les incoh\u00e9rences et noter les domaines \u00e0 am\u00e9liorer.<\/span><\/li>\n<\/ol>\n
<\/a>4. D\u00e9finition des \u00e9l\u00e9ments de conception basiques<\/span><\/h2>\nVous devez commencer \u00e0 travailler sur votre syst\u00e8me de conception avec les \u00e9l\u00e9ments basiques qui le caract\u00e9riseront. Les \u00e9l\u00e9ments de conception sont les blocs de construction de base d\u2019une interface utilisateur. La premi\u00e8re \u00e9tape de la cr\u00e9ation d\u2019un syst\u00e8me de conception int\u00e9gral consiste \u00e0 d\u00e9finir ses \u00e9l\u00e9ments de base. Essayez d\u2019aller au niveau le plus bas de votre hi\u00e9rarchie de composants. Plus tard, vous utiliserez ces \u00e9l\u00e9ments de base pour cr\u00e9er vos composants.<\/span><\/p>\nD\u00e9finissez une liste d\u2019\u00e9l\u00e9ments de base que vous pensez que votre syst\u00e8me de conception devrait avoir. Vous pouvez trouver de nombreuses listes de contr\u00f4le sur Internet. Ne vous inqui\u00e9tez pas si elles incluent des \u00e9l\u00e9ments que vous n\u2019avez pas encore d\u00e9finis ou que vous ne saviez m\u00eame pas que vous deviez d\u00e9finir.<\/span><\/p>\nChaque syst\u00e8me de conception est unique. Vous n\u2019\u00eates pas oblig\u00e9 de suivre tous les \u00e9l\u00e9ments que vous voyez dans les listes de contr\u00f4le. Utilisez-les simplement comme source d\u2019inspiration pour compl\u00e9ter votre syst\u00e8me de conception.<\/span><\/p>\nDans notre cas, nous avons utilis\u00e9 la liste de contr\u00f4le qu\u2019on peut t\u00e9l\u00e9charger \u00e0 partir de <\/span>cette page<\/span><\/a>, et nous utilisons encore aujourd\u2019hui tous les \u00e9l\u00e9ments de la liste.<\/span><\/p>\nEn fonction de ce que vous d\u00e9couvrez dans vos recherches, vous d\u00e9ciderez ce que vous ferez ensuite. Si vous manquez de coh\u00e9rence dans la structure, les couleurs, les patrons, les ic\u00f4nes, etc., peut-\u00eatre vous d\u00e9finirez vos \u00e9l\u00e9ments de base pour assurer plus de coh\u00e9rence. Voici quelques exemples\u00a0:<\/span><\/p>\n4.1 Grille<\/span><\/h3>\nVous devrez d\u00e9terminer les layouts que vous utilisez le plus et puis appliquer des modifications \u00e0 ceux que vous avez d\u00e9j\u00e0. Par exemple, si l\u2019entreprise n\u2019est pas habitu\u00e9e \u00e0 travailler avec des grilles, les \u00e9l\u00e9ments peuvent \u00eatre con\u00e7us avec des proportions qui ne seront jamais les m\u00eames lors du d\u00e9veloppement, car on utilise la mauvaise grille.<\/span><\/p>\nAlors, vous devrez d\u00e9couvrir quelles fen\u00eatres d\u2019affichage vos utilisateurs utilisent le plus et baser vos conceptions sur cette information. Ensuite, vous devrez d\u00e9finir le type de grille que vous utilisez en fonction de la fen\u00eatre d\u2019affichage. C\u2019est une chose que vous pouvez d\u00e9finir avec les d\u00e9veloppeurs. Il n\u2019y a pas une seule bonne solution.<\/span><\/p>\n![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/CSS-breakpoints.png\")
La fa\u00e7on 100% correcte de faire des points d\u2019arr\u00eat CSS (source :\u00a0<\/span>Udar Updates<\/a>).<\/p><\/div>\n4.2 Couleurs<\/span><\/h3>\nUn autre \u00e9l\u00e9ment de base\u00a0: les couleurs de la marque. Cela peut sembler un peu b\u00eate, mais de nombreuses entreprises utilisent de diff\u00e9rentes versions de la m\u00eame couleur simplement parce qu\u2019on ne la d\u00e9finit pas ou on ne la partage pas avec le reste de l\u2019\u00e9quipe. Il est donc crucial d\u2019\u00e9tablir les couleurs de la marque\u00a0: la primaire, le secondaire, les tons neutres, les couleurs suppl\u00e9mentaires pour les illustrations, etc.<\/span><\/p>\n![\"TestingTime](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-colours-1.png\")
Les couleurs de notre marque (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n4.3 Espaces<\/span><\/h3>\nLes espaces sont un autre \u00e9l\u00e9ment de base important \u00e0 d\u00e9finir. Si nous n\u2019\u00e9tablissons pas les espaces que nous allons utiliser, notre produit aura un nombre infini d\u2019espaces diff\u00e9rents sans aucune logique entre eux. Alors, si nous d\u00e9finissons les espaces, nos designs seront plus coh\u00e9rents.<\/span><\/p>\n![\"Design](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/Design-System-Spacing.png\")
Les r\u00e8gles d\u2019espacement de TestingTime (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n<\/a>5. D\u00e9finition des composants du syst\u00e8me de conception<\/span><\/h2>\nLes composants sont des pi\u00e8ces fonctionnelles d\u2019une interface utilisateur cr\u00e9\u00e9e \u00e0 partir des caract\u00e9ristiques de base qui se r\u00e9unissent de diverses mani\u00e8res pour former une composition. Vous devrez \u00e9galement d\u00e9finir les diff\u00e9rents \u00e9tats des composants, leur aspect quand en survol, focalis\u00e9s, actifs, etc.<\/span><\/p>\nLa cr\u00e9ation de composants est l\u2019une des t\u00e2ches les plus ardues lors de la cr\u00e9ation du syst\u00e8me de conception. Au d\u00e9but, c\u2019est tr\u00e8s simple, car vous n\u2019avez qu\u2019\u00e0 r\u00e9pliquer les composants que vous poss\u00e9dez d\u00e9j\u00e0 et d\u00e9finir quand et comment les utiliser. La partie compliqu\u00e9e commence lorsque vous devez cr\u00e9er un nouveau composant et l\u2019ajouter au syst\u00e8me de conception. \u00c0 ce moment-l\u00e0, vous devrez v\u00e9rifier si le composant que vous souhaitez d\u00e9velopper est prometteur ou non. Vous devrez toujours le faire lors de l\u2019ajout d\u2019un nouveau composant, alors ne vous d\u00e9couragez pas. Am\u00e9liorer l\u2019utilisabilit\u00e9 d\u2019un produit prend du temps et beaucoup de patience\u00a0!<\/span><\/p>\nCependant, une fois que vous avez le nouveau composant, il vous suffira de l\u2019ajouter \u00e0 votre syst\u00e8me de conception et de d\u00e9finir quand et comment il doit \u00eatre utilis\u00e9. Mieux vous expliquerez le composant, moins vous aurez de questions \u00e0 r\u00e9soudre plus tard. Et si vous avez des animations qui montrent l\u2019op\u00e9ration, c\u2019est encore mieux. Dans la phase suivante, la conception est align\u00e9e en interne et transmise \u00e0 l\u2019\u00e9quipe de d\u00e9veloppement. N\u2019oubliez pas que votre syst\u00e8me de conception est lui-m\u00eame un produit et que vous devez communiquer chaque fois que vous le mettez \u00e0 jour ou lorsque vous y ajoutez quelque chose de nouveau.<\/span><\/p>\n![\"TestingTime](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-Buttons.png\")
La fa\u00e7on dont nous fournissons les diff\u00e9rentes combinaisons de boutons dans Figma (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\nCela peut sembler un peu d\u00e9sordonn\u00e9, mais la chose importante ici est que tout soit bien connect\u00e9 dans le kit UI et que, lors de la conception, les concepteurs puissent clairement voir quelles combinaisons ils ont disponibles. Et en plus de l\u2019avoir dans le kit UI dans Figma, nous avons \u00e9galement zeroheight, o\u00f9 nous expliquons les diff\u00e9rents cas d\u2019utilisation, les bonnes et les mauvaises combinaisons, etc.<\/span><\/p>\n<\/a>6. D\u00e9finition des pages (\u00e9crans, fen\u00eatres, compositions)<\/span><\/h2>\nUne fois que vous avez d\u00e9fini les composants de votre produit, vous pourrez les combiner pour cr\u00e9er des pages. Ce processus ne devrait pas prendre trop de temps, une fois tous les composants con\u00e7us. Ce qui peut prendre plus de temps, c\u2019est de d\u00e9finir quand utiliser chaque type de page, d\u2019expliquer la logique de chaque page, si vous avez men\u00e9 ou non des recherches, les r\u00e9sultats des recherches, etc.<\/span><\/p>\nDans notre cas, nous avons fait la refonte de notre site Web, pour lequel nous avons fait tout un processus de recherche, et cela a \u00e9t\u00e9 document\u00e9 pour qu\u2019\u00e0 l\u2019avenir nous puissions encore comprendre pourquoi nous avons pris les d\u00e9cisions de la fa\u00e7on que nous l\u2019avons fait.<\/span><\/p>\nUne fois la recherche men\u00e9e, l\u2019\u00e9tape suivante consiste \u00e0 la transmettre \u00e0 notre kit UI sous forme de diff\u00e9rents composants et de leurs variantes, afin qu\u2019\u00e0 l\u2019avenir ces \u00e9l\u00e9ments puissent facilement \u00eatre r\u00e9utilis\u00e9s pour cr\u00e9er de nouveaux composants ou \u00eatre modifi\u00e9s lors d\u2019une future conception.<\/span><\/p>\n![\"TestingTime](\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-WordPress-Modules.png\")
Les designs de nos modules WordPress pour le site web (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n<\/a>7. Comment partager votre syst\u00e8me de conception<\/span><\/h2>\nTout le monde dans l\u2019entreprise devrait avoir acc\u00e8s au syst\u00e8me de conception. Et le meilleur moyen de s\u2019assurer que tout le monde est \u00e0 jour avec la derni\u00e8re version est d\u2019avoir une seule source de v\u00e9rit\u00e9, par exemple, sur un site Web. Je peux vous assurer que l\u2019utilisation d\u2019un PDF ou d\u2019un Google Doc ne fonctionnera pas. On ne le trouvera pas, on utilisera une mauvaise version ou on ne l\u2019utilisera pas du tout.<\/span><\/p>\nUne petite entreprise pourrait utiliser un site wiki interne si maintenir un site externe implique trop de travail. Il est \u00e9galement essentiel que l\u2019\u00e9quipe produit ne d\u00e9pende pas des d\u00e9veloppeurs pour maintenir le syst\u00e8me de conception \u00e0 jour. In\u00e9vitablement, les gens oublient de l\u2019utiliser ou ne peuvent pas le trouver. Ce n\u2019est pas grave\u00a0: vous devrez tout simplement continuer de leur rappeler jusqu\u2019\u00e0 ce que cela devienne une habitude. Chaque fois que vous avez mis \u00e0 jour ou ajout\u00e9 quelque chose de nouveau, une caract\u00e9ristique, un composant ou une page, vous devrez le partager avec les membres de votre \u00e9quipe et leur rappeler o\u00f9 ils peuvent le trouver et, si n\u00e9cessaire, organiser un atelier pour expliquer, entre autres, la structure et le contenu de ce qu\u2019on peut y trouver.<\/span><\/p>\n<\/a>8. Lectures recommand\u00e9es et exemples<\/span><\/h2>\nJ\u2019ai rassembl\u00e9 quelques lectures int\u00e9ressantes qui peuvent vous aider \u00e0 construire un syst\u00e8me de conception. Si vous souhaitez \u00eatre au courant de l\u2019\u00e9tat des syst\u00e8mes de conception dans le secteur, je vous recommande de lire <\/span>cette \u00e9tude<\/span><\/a>.<\/span><\/p>\nUn excellent exemple de syst\u00e8me de conception est celui d\u2019Airbnb, donc si vous voulez en savoir plus sur la fa\u00e7on dont ils ont mis en \u0153uvre leur syst\u00e8me, je vous recommande <\/span>cet article<\/span><\/a>.<\/span><\/p>\nUn livre qui a aid\u00e9 \u00e0 comprendre ce qu\u2019est un syst\u00e8me de conception est Atomic Design. Alors, <\/span>lire Atomic Design<\/span><\/a> est crucial pour une meilleure compr\u00e9hension des \u00e9cosyst\u00e8mes des syst\u00e8mes de conception.<\/span><\/p>\nPour en savoir plus sur l\u2019histoire du syst\u00e8me de conception, je vous <\/span>recommande cet article<\/span><\/a>.<\/span><\/p>\nExplorez les syst\u00e8mes de conception exemplaires des organisations suivantes\u00a0:<\/span><\/p>\n\n- Google\u00a0: <\/span>material.io\/design<\/span><\/a><\/li>\n
- Salesforce\u00a0: <\/span>lightningdesignsystem.com<\/span><\/a><\/li>\n
- IBM\u00a0: <\/span>ibm.com\/design\/language<\/span><\/a><\/li>\n
- Shopify\u00a0: <\/span>polaris.shopify.com<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Sommaire 1. Processus de cr\u00e9ation du syst\u00e8me de conception 2. D\u00e9finition de l\u2019outil 3. R\u00e9alisation d\u2019un audit de conception 4. D\u00e9finition des \u00e9l\u00e9ments de conception basiques 5. D\u00e9finition des composants du syst\u00e8me de conception 6. D\u00e9finition des pages (\u00e9crans, fen\u00eatres, compositions) 7. Comment partager votre syst\u00e8me de conception 8. Lectures recommand\u00e9es et exemples 1. Processus […]<\/p>\n","protected":false},"author":59,"featured_media":28300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[12401,12400],"tags":[],"class_list":["post-28618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conception","category-etude-de-cas"],"acf":[],"yoast_head":"\n
Comment construire un syst\u00e8me de conception avec Figma - TestingTime<\/title>\n<meta name=\"description\" content=\"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment construire un syst\u00e8me de conception avec Figma\" \/>\n<meta property=\"og:description\" content=\"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"TestingTime\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/testingtime\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T07:10:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-23T13:53:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2914\" \/>\n\t<meta property=\"og:image:height\" content=\"1966\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@testingtime\" \/>\n<meta name=\"twitter:site\" content=\"@testingtime\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\"},\"author\":{\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\"},\"headline\":\"Comment construire un syst\u00e8me de conception avec Figma\",\"datePublished\":\"2021-07-26T07:10:15+00:00\",\"dateModified\":\"2021-07-23T13:53:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\"},\"wordCount\":2808,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#organization\"},\"articleSection\":[\"Conception\",\"\u00c9tude de cas\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\",\"url\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\",\"name\":\"Comment construire un syst\u00e8me de conception avec Figma - TestingTime\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#website\"},\"datePublished\":\"2021-07-26T07:10:15+00:00\",\"dateModified\":\"2021-07-23T13:53:25+00:00\",\"description\":\"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TestingTime\",\"item\":\"https:\/\/www.testingtime.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment construire un syst\u00e8me de conception avec Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#website\",\"url\":\"https:\/\/www.testingtime.com\/fr\/\",\"name\":\"TestingTime\",\"description\":\"Wir rekrutieren Testpersonen\",\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.testingtime.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#organization\",\"name\":\"TestingTime\",\"url\":\"https:\/\/www.testingtime.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"TestingTime\"},\"image\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/testingtime\",\"https:\/\/twitter.com\/testingtime\",\"https:\/\/www.instagram.com\/testingtime\/\",\"https:\/\/www.linkedin.com\/company-beta\/9231506\/\",\"https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\",\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"caption\":\"Beatriz G\u00f3mez P\u00e9rez\"},\"url\":\"https:\/\/www.testingtime.com\/fr\/blog\/author\/beatriz\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment construire un syst\u00e8me de conception avec Figma - TestingTime","description":"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment construire un syst\u00e8me de conception avec Figma","og_description":"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.","og_url":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","og_site_name":"TestingTime","article_publisher":"https:\/\/www.facebook.com\/testingtime","article_published_time":"2021-07-26T07:10:15+00:00","article_modified_time":"2021-07-23T13:53:25+00:00","og_image":[{"width":2914,"height":1966,"url":"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png","type":"image\/png"}],"author":"Beatriz G\u00f3mez P\u00e9rez","twitter_card":"summary_large_image","twitter_creator":"@testingtime","twitter_site":"@testingtime","twitter_misc":{"Written by":"Beatriz G\u00f3mez P\u00e9rez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#article","isPartOf":{"@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/"},"author":{"name":"Beatriz G\u00f3mez P\u00e9rez","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0"},"headline":"Comment construire un syst\u00e8me de conception avec Figma","datePublished":"2021-07-26T07:10:15+00:00","dateModified":"2021-07-23T13:53:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/"},"wordCount":2808,"commentCount":0,"publisher":{"@id":"https:\/\/www.testingtime.com\/fr\/#organization"},"articleSection":["Conception","\u00c9tude de cas"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","url":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","name":"Comment construire un syst\u00e8me de conception avec Figma - TestingTime","isPartOf":{"@id":"https:\/\/www.testingtime.com\/fr\/#website"},"datePublished":"2021-07-26T07:10:15+00:00","dateModified":"2021-07-23T13:53:25+00:00","description":"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.","breadcrumb":{"@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TestingTime","item":"https:\/\/www.testingtime.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment construire un syst\u00e8me de conception avec Figma"}]},{"@type":"WebSite","@id":"https:\/\/www.testingtime.com\/fr\/#website","url":"https:\/\/www.testingtime.com\/fr\/","name":"TestingTime","description":"Wir rekrutieren Testpersonen","publisher":{"@id":"https:\/\/www.testingtime.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.testingtime.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.testingtime.com\/fr\/#organization","name":"TestingTime","url":"https:\/\/www.testingtime.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","width":1,"height":1,"caption":"TestingTime"},"image":{"@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/testingtime","https:\/\/twitter.com\/testingtime","https:\/\/www.instagram.com\/testingtime\/","https:\/\/www.linkedin.com\/company-beta\/9231506\/","https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w"]},{"@type":"Person","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0","name":"Beatriz G\u00f3mez P\u00e9rez","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","caption":"Beatriz G\u00f3mez P\u00e9rez"},"url":"https:\/\/www.testingtime.com\/fr\/blog\/author\/beatriz\/"}]}},"_links":{"self":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts\/28618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/comments?post=28618"}],"version-history":[{"count":4,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts\/28618\/revisions"}],"predecessor-version":[{"id":28624,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts\/28618\/revisions\/28624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/media\/28300"}],"wp:attachment":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/media?parent=28618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/categories?post=28618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/tags?post=28618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- \n
- Manque de planification<\/span><\/li>\n
- Le fait de n\u2019avoir pas compris l\u2019ampleur d\u2019un syst\u00e8me de conception<\/span><\/li>\n<\/ul>\n
Donc, une chose importante que vous devez comprendre est qu\u2019un syst\u00e8me de conception n\u2019est pas un fichier que vous remplissez une fois avec la supposition qu\u2019il sera bon pour toujours. La cr\u00e9ation d\u2019un syst\u00e8me de conception r\u00e9ussi et durable n\u00e9cessite beaucoup d\u2019efforts et de planification pr\u00e9alable.<\/span><\/p>\n
La premi\u00e8re \u00e9tape consiste \u00e0 d\u00e9terminer clairement qui sera en charge du syst\u00e8me de conception et \u00e0 d\u00e9cider le processus \u00e0 suivre. Vous pouvez le faire de diff\u00e9rentes mani\u00e8res\u00a0: en \u00e9quipes solitaires, centralis\u00e9es ou f\u00e9d\u00e9r\u00e9es. Vous devrez \u00e9galement d\u00e9terminer les objectifs, c-\u00e0-d la mani\u00e8re dont vous mesurerez le succ\u00e8s du syst\u00e8me de conception. Cela comprend le co\u00fbt et le temps requis, les priorit\u00e9s et la strat\u00e9gie \u00e0 suivre pour donner suite \u00e0 ces priorit\u00e9s.<\/span><\/p>\n
Dans notre cas, comme nous n\u2019avons que deux designers dans l\u2019\u00e9quipe produit, nous avons d\u00e9cid\u00e9 qu\u2019une seule personne en sera responsable et consacrera un temps sp\u00e9cifique par semaine \u00e0 maintenir le syst\u00e8me. De plus, lors de la d\u00e9finition des objectifs et r\u00e9sultats cl\u00e9s (OKR) pour chaque trimestre, nous prenons en compte qu\u2019il doit y avoir une t\u00e2che li\u00e9e au syst\u00e8me de conception pour mettre \u00e0 jour, ajouter ou supprimer certains \u00e9l\u00e9ments. De cette fa\u00e7on, nous nous assurons qu\u2019un certain temps est toujours consacr\u00e9 \u00e0 maintenir notre syst\u00e8me de conception pour le tenir en bon \u00e9tat de fonctionnement.<\/span><\/p>\n
Les trois approches diff\u00e9rentes pour organiser un syst\u00e8me de conception : en \u00e9quipes solitaires, centralis\u00e9es ou f\u00e9d\u00e9r\u00e9es\u00a0<\/span>(source : Medium.com<\/a>).<\/p><\/div>\n
<\/a>2. D\u00e9finition de l\u2019outil<\/span><\/h2>\n
Avant de commencer \u00e0 pr\u00e9parer quoi que ce soit, il est important de d\u00e9finir o\u00f9 on va h\u00e9berger la conception et o\u00f9 la documentation. Il est essentiel de documenter les meilleures pratiques pour les \u00e9l\u00e9ments, les composants, les vues et les mod\u00e8les. La documentation peut \u00e9galement inclure vos principes directeurs et des fragments de code, la justification des choix de conception, les choses \u00e0 faire et \u00e0 ne pas faire, etc.<\/span><\/p>\n
Vous pouvez choisir de tout faire dans Figma (c-\u00e0-d\u2019y cr\u00e9er des composants, des modules, etc. et aussi la documentation de l\u2019ensemble du syst\u00e8me de conception) ou le faire s\u00e9par\u00e9ment avec le kit UI sur une plateforme de conception telle que <\/span>Figma<\/span><\/a>, <\/span>Sketch<\/span><\/a> ou <\/span>Adobe XD<\/span><\/a> pendant que la documentation du syst\u00e8me de conception est faite sur une autre plateforme.<\/span><\/p>\n
Plusieurs plateformes peuvent g\u00e9rer la documentation, et beaucoup d\u2019entre elles sont gratuites. Voici les quatre principaux types d\u2019outils de documentation\u00a0:<\/span><\/p>\n
- \n
- Outils de conception<\/b> \u2013 Utilisez des outils de conception pour cr\u00e9er des \u00e9crans num\u00e9riques et g\u00e9rer tous vos actifs num\u00e9riques. Utilisez-les \u00e9galement pour partager des designs (p. ex., l\u2019exportation d\u2019images, l\u2019acc\u00e8s en ligne et le partage de biblioth\u00e8ques). Ces outils, parmi eux Sketch, Figma, Adobe XD et Framer X, n\u2019ont pas \u00e9t\u00e9 con\u00e7us pour cr\u00e9er la documentation g\u00e9n\u00e9rale. Mais un fait int\u00e9ressant est que<\/span> Framer X<\/span><\/a> combine d\u00e9veloppement et conception en incorporant du code.<\/span><\/li>\n
- Outils de documentation<\/b> \u2013 Ces outils offrent des pages Web accessibles au public avec contr\u00f4le de version que tout le monde peut utiliser pour r\u00e9cup\u00e9rer des informations. La plupart de ces outils sont destin\u00e9s aux d\u00e9veloppeurs, avec des options d\u2019h\u00e9bergement et d\u2019affichage de code. Comme il n\u2019y a pas d\u2019int\u00e9gration avec les outils de conception, les concepteurs doivent d\u00e9velopper (et mettre \u00e0 jour) les images de chaque design et les placer ou remplacer manuellement sur le site Web. Exemples de ceci sont <\/span>GitBook<\/span><\/a>, <\/span>VuePress<\/span><\/a>, <\/span>Fractal<\/span><\/a> et <\/span>Confluence<\/span><\/a>.<\/span><\/li>\n
- Outils de documentation de la conception <\/b>\u2013 <\/span>Frontify<\/span><\/a>, <\/span>zeroheight<\/span><\/a>, <\/span>Nuclino<\/span><\/a>, <\/span>Lucid<\/span><\/a> et <\/span>Bynder<\/span><\/a>\u00a0 ne sont que quelques exemples d\u2019outils de documentation de la conception. Leurs layouts sont meilleurs pour afficher la marque et le design. Certains de ces outils se synchronisent m\u00eame automatiquement avec votre outil de conception\u00a0; donc avoir votre syst\u00e8me de conception \u00e0 jour avec les derni\u00e8res modifications est un jeu d\u2019enfant. Dans notre cas, nous utilisons zeroheight pour expliquer les cas d\u2019utilisation, les combinaisons, les valeurs, etc. Et puis nous avons le kit UI dans Figma.<\/span><\/li>\n
- Plateformes sur mesure<\/b> \u2013 Vous avez aussi la possibilit\u00e9 de d\u00e9velopper votre propre plateforme. Cela vous donne plus de flexibilit\u00e9 dans ce que vous pouvez faire. Cependant, cela n\u00e9cessite aussi beaucoup plus d\u2019efforts et de connaissances techniques et ne prend pas en charge la synchronisation avec votre outil de conception (\u00e0 moins que vous ne soyez un programmeur tr\u00e8s qualifi\u00e9 d\u00e9sireux de cr\u00e9er votre propre plugin personnalis\u00e9). <\/span>La plateforme Material de Google<\/span><\/a> est un exemple de plateforme sur mesure.<\/span><\/li>\n<\/ol>\n
Comparaison des diff\u00e9rents outils pour des syst\u00e8mes de conception (source <\/span>: Hike One<\/a>).<\/p><\/div>\n
Comme vous pouvez le voir, chaque outil a son propre ensemble de fonctionnalit\u00e9s, de points forts et d\u2019imperfections\u00a0; ainsi, trouver le meilleur outil d\u00e9pend enti\u00e8rement de vos besoins. Alors, quelles autres questions devriez-vous vous poser\u00a0? Est-ce que vous utilisez Sketch, Adobe XD ou Figma pour cr\u00e9er vos designs\u00a0? Collaborez-vous \u00e9troitement avec les d\u00e9veloppeurs\u00a0? Est-ce que vous souhaitez int\u00e9grer le marketing dans votre strat\u00e9gie\u00a0? Ou souhaitez-vous utiliser un syst\u00e8me de conception statique ou dynamique\u00a0?<\/span><\/p>\n
<\/a>3. R\u00e9alisation d\u2019un audit de conception<\/span><\/h2>\n
Parcourez tous les designs dont vous disposez jusqu\u2019\u00e0 pr\u00e9sent et prenez des captures d\u2019\u00e9cran. Regroupez-les en diff\u00e9rentes cat\u00e9gories telles que navigation, listes d\u00e9roulantes, en-t\u00eates, etc. Ensuite, regroupez-les en sous-cat\u00e9gories, telles que \u00e9tats des boutons. Maintenant, examinez ce que vous avez d\u00e9j\u00e0 et trouvez des patrons et des incoh\u00e9rences. Pour r\u00e9sumer\u00a0:<\/span><\/p>\n
- \n
- Prenez des captures d\u2019\u00e9cran des composants de votre produit actuel. Assurez-vous de que vous voyez toutes les propri\u00e9t\u00e9s de votre produit comme le site d\u2019aide, les outils internes, les diff\u00e9rentes applications, etc.<\/span><\/li>\n
- Utilisez Figma ou Google Slides pour organiser vos captures d\u2019\u00e9cran ou envisagez de les imprimer et de les \u00e9pingler sur des panneaux en mousse.<\/span><\/li>\n
- Examinez chaque cat\u00e9gorie pour d\u00e9tecter les incoh\u00e9rences et noter les domaines \u00e0 am\u00e9liorer.<\/span><\/li>\n<\/ol>\n
<\/a>4. D\u00e9finition des \u00e9l\u00e9ments de conception basiques<\/span><\/h2>\n
Vous devez commencer \u00e0 travailler sur votre syst\u00e8me de conception avec les \u00e9l\u00e9ments basiques qui le caract\u00e9riseront. Les \u00e9l\u00e9ments de conception sont les blocs de construction de base d\u2019une interface utilisateur. La premi\u00e8re \u00e9tape de la cr\u00e9ation d\u2019un syst\u00e8me de conception int\u00e9gral consiste \u00e0 d\u00e9finir ses \u00e9l\u00e9ments de base. Essayez d\u2019aller au niveau le plus bas de votre hi\u00e9rarchie de composants. Plus tard, vous utiliserez ces \u00e9l\u00e9ments de base pour cr\u00e9er vos composants.<\/span><\/p>\n
D\u00e9finissez une liste d\u2019\u00e9l\u00e9ments de base que vous pensez que votre syst\u00e8me de conception devrait avoir. Vous pouvez trouver de nombreuses listes de contr\u00f4le sur Internet. Ne vous inqui\u00e9tez pas si elles incluent des \u00e9l\u00e9ments que vous n\u2019avez pas encore d\u00e9finis ou que vous ne saviez m\u00eame pas que vous deviez d\u00e9finir.<\/span><\/p>\n
Chaque syst\u00e8me de conception est unique. Vous n\u2019\u00eates pas oblig\u00e9 de suivre tous les \u00e9l\u00e9ments que vous voyez dans les listes de contr\u00f4le. Utilisez-les simplement comme source d\u2019inspiration pour compl\u00e9ter votre syst\u00e8me de conception.<\/span><\/p>\n
Dans notre cas, nous avons utilis\u00e9 la liste de contr\u00f4le qu\u2019on peut t\u00e9l\u00e9charger \u00e0 partir de <\/span>cette page<\/span><\/a>, et nous utilisons encore aujourd\u2019hui tous les \u00e9l\u00e9ments de la liste.<\/span><\/p>\n
En fonction de ce que vous d\u00e9couvrez dans vos recherches, vous d\u00e9ciderez ce que vous ferez ensuite. Si vous manquez de coh\u00e9rence dans la structure, les couleurs, les patrons, les ic\u00f4nes, etc., peut-\u00eatre vous d\u00e9finirez vos \u00e9l\u00e9ments de base pour assurer plus de coh\u00e9rence. Voici quelques exemples\u00a0:<\/span><\/p>\n
4.1 Grille<\/span><\/h3>\n
Vous devrez d\u00e9terminer les layouts que vous utilisez le plus et puis appliquer des modifications \u00e0 ceux que vous avez d\u00e9j\u00e0. Par exemple, si l\u2019entreprise n\u2019est pas habitu\u00e9e \u00e0 travailler avec des grilles, les \u00e9l\u00e9ments peuvent \u00eatre con\u00e7us avec des proportions qui ne seront jamais les m\u00eames lors du d\u00e9veloppement, car on utilise la mauvaise grille.<\/span><\/p>\n
Alors, vous devrez d\u00e9couvrir quelles fen\u00eatres d\u2019affichage vos utilisateurs utilisent le plus et baser vos conceptions sur cette information. Ensuite, vous devrez d\u00e9finir le type de grille que vous utilisez en fonction de la fen\u00eatre d\u2019affichage. C\u2019est une chose que vous pouvez d\u00e9finir avec les d\u00e9veloppeurs. Il n\u2019y a pas une seule bonne solution.<\/span><\/p>\n
La fa\u00e7on 100% correcte de faire des points d\u2019arr\u00eat CSS (source :\u00a0<\/span>Udar Updates<\/a>).<\/p><\/div>\n
4.2 Couleurs<\/span><\/h3>\n
Un autre \u00e9l\u00e9ment de base\u00a0: les couleurs de la marque. Cela peut sembler un peu b\u00eate, mais de nombreuses entreprises utilisent de diff\u00e9rentes versions de la m\u00eame couleur simplement parce qu\u2019on ne la d\u00e9finit pas ou on ne la partage pas avec le reste de l\u2019\u00e9quipe. Il est donc crucial d\u2019\u00e9tablir les couleurs de la marque\u00a0: la primaire, le secondaire, les tons neutres, les couleurs suppl\u00e9mentaires pour les illustrations, etc.<\/span><\/p>\n
Les couleurs de notre marque (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n
4.3 Espaces<\/span><\/h3>\n
Les espaces sont un autre \u00e9l\u00e9ment de base important \u00e0 d\u00e9finir. Si nous n\u2019\u00e9tablissons pas les espaces que nous allons utiliser, notre produit aura un nombre infini d\u2019espaces diff\u00e9rents sans aucune logique entre eux. Alors, si nous d\u00e9finissons les espaces, nos designs seront plus coh\u00e9rents.<\/span><\/p>\n
Les r\u00e8gles d\u2019espacement de TestingTime (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n
<\/a>5. D\u00e9finition des composants du syst\u00e8me de conception<\/span><\/h2>\n
Les composants sont des pi\u00e8ces fonctionnelles d\u2019une interface utilisateur cr\u00e9\u00e9e \u00e0 partir des caract\u00e9ristiques de base qui se r\u00e9unissent de diverses mani\u00e8res pour former une composition. Vous devrez \u00e9galement d\u00e9finir les diff\u00e9rents \u00e9tats des composants, leur aspect quand en survol, focalis\u00e9s, actifs, etc.<\/span><\/p>\n
La cr\u00e9ation de composants est l\u2019une des t\u00e2ches les plus ardues lors de la cr\u00e9ation du syst\u00e8me de conception. Au d\u00e9but, c\u2019est tr\u00e8s simple, car vous n\u2019avez qu\u2019\u00e0 r\u00e9pliquer les composants que vous poss\u00e9dez d\u00e9j\u00e0 et d\u00e9finir quand et comment les utiliser. La partie compliqu\u00e9e commence lorsque vous devez cr\u00e9er un nouveau composant et l\u2019ajouter au syst\u00e8me de conception. \u00c0 ce moment-l\u00e0, vous devrez v\u00e9rifier si le composant que vous souhaitez d\u00e9velopper est prometteur ou non. Vous devrez toujours le faire lors de l\u2019ajout d\u2019un nouveau composant, alors ne vous d\u00e9couragez pas. Am\u00e9liorer l\u2019utilisabilit\u00e9 d\u2019un produit prend du temps et beaucoup de patience\u00a0!<\/span><\/p>\n
Cependant, une fois que vous avez le nouveau composant, il vous suffira de l\u2019ajouter \u00e0 votre syst\u00e8me de conception et de d\u00e9finir quand et comment il doit \u00eatre utilis\u00e9. Mieux vous expliquerez le composant, moins vous aurez de questions \u00e0 r\u00e9soudre plus tard. Et si vous avez des animations qui montrent l\u2019op\u00e9ration, c\u2019est encore mieux. Dans la phase suivante, la conception est align\u00e9e en interne et transmise \u00e0 l\u2019\u00e9quipe de d\u00e9veloppement. N\u2019oubliez pas que votre syst\u00e8me de conception est lui-m\u00eame un produit et que vous devez communiquer chaque fois que vous le mettez \u00e0 jour ou lorsque vous y ajoutez quelque chose de nouveau.<\/span><\/p>\n
La fa\u00e7on dont nous fournissons les diff\u00e9rentes combinaisons de boutons dans Figma (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n
Cela peut sembler un peu d\u00e9sordonn\u00e9, mais la chose importante ici est que tout soit bien connect\u00e9 dans le kit UI et que, lors de la conception, les concepteurs puissent clairement voir quelles combinaisons ils ont disponibles. Et en plus de l\u2019avoir dans le kit UI dans Figma, nous avons \u00e9galement zeroheight, o\u00f9 nous expliquons les diff\u00e9rents cas d\u2019utilisation, les bonnes et les mauvaises combinaisons, etc.<\/span><\/p>\n
<\/a>6. D\u00e9finition des pages (\u00e9crans, fen\u00eatres, compositions)<\/span><\/h2>\n
Une fois que vous avez d\u00e9fini les composants de votre produit, vous pourrez les combiner pour cr\u00e9er des pages. Ce processus ne devrait pas prendre trop de temps, une fois tous les composants con\u00e7us. Ce qui peut prendre plus de temps, c\u2019est de d\u00e9finir quand utiliser chaque type de page, d\u2019expliquer la logique de chaque page, si vous avez men\u00e9 ou non des recherches, les r\u00e9sultats des recherches, etc.<\/span><\/p>\n
Dans notre cas, nous avons fait la refonte de notre site Web, pour lequel nous avons fait tout un processus de recherche, et cela a \u00e9t\u00e9 document\u00e9 pour qu\u2019\u00e0 l\u2019avenir nous puissions encore comprendre pourquoi nous avons pris les d\u00e9cisions de la fa\u00e7on que nous l\u2019avons fait.<\/span><\/p>\n
Une fois la recherche men\u00e9e, l\u2019\u00e9tape suivante consiste \u00e0 la transmettre \u00e0 notre kit UI sous forme de diff\u00e9rents composants et de leurs variantes, afin qu\u2019\u00e0 l\u2019avenir ces \u00e9l\u00e9ments puissent facilement \u00eatre r\u00e9utilis\u00e9s pour cr\u00e9er de nouveaux composants ou \u00eatre modifi\u00e9s lors d\u2019une future conception.<\/span><\/p>\n
Les designs de nos modules WordPress pour le site web (source\u00a0: le syst\u00e8me de conception de TestingTime<\/span>).<\/p><\/div>\n
<\/a>7. Comment partager votre syst\u00e8me de conception<\/span><\/h2>\n
Tout le monde dans l\u2019entreprise devrait avoir acc\u00e8s au syst\u00e8me de conception. Et le meilleur moyen de s\u2019assurer que tout le monde est \u00e0 jour avec la derni\u00e8re version est d\u2019avoir une seule source de v\u00e9rit\u00e9, par exemple, sur un site Web. Je peux vous assurer que l\u2019utilisation d\u2019un PDF ou d\u2019un Google Doc ne fonctionnera pas. On ne le trouvera pas, on utilisera une mauvaise version ou on ne l\u2019utilisera pas du tout.<\/span><\/p>\n
Une petite entreprise pourrait utiliser un site wiki interne si maintenir un site externe implique trop de travail. Il est \u00e9galement essentiel que l\u2019\u00e9quipe produit ne d\u00e9pende pas des d\u00e9veloppeurs pour maintenir le syst\u00e8me de conception \u00e0 jour. In\u00e9vitablement, les gens oublient de l\u2019utiliser ou ne peuvent pas le trouver. Ce n\u2019est pas grave\u00a0: vous devrez tout simplement continuer de leur rappeler jusqu\u2019\u00e0 ce que cela devienne une habitude. Chaque fois que vous avez mis \u00e0 jour ou ajout\u00e9 quelque chose de nouveau, une caract\u00e9ristique, un composant ou une page, vous devrez le partager avec les membres de votre \u00e9quipe et leur rappeler o\u00f9 ils peuvent le trouver et, si n\u00e9cessaire, organiser un atelier pour expliquer, entre autres, la structure et le contenu de ce qu\u2019on peut y trouver.<\/span><\/p>\n
<\/a>8. Lectures recommand\u00e9es et exemples<\/span><\/h2>\n
J\u2019ai rassembl\u00e9 quelques lectures int\u00e9ressantes qui peuvent vous aider \u00e0 construire un syst\u00e8me de conception. Si vous souhaitez \u00eatre au courant de l\u2019\u00e9tat des syst\u00e8mes de conception dans le secteur, je vous recommande de lire <\/span>cette \u00e9tude<\/span><\/a>.<\/span><\/p>\n
Un excellent exemple de syst\u00e8me de conception est celui d\u2019Airbnb, donc si vous voulez en savoir plus sur la fa\u00e7on dont ils ont mis en \u0153uvre leur syst\u00e8me, je vous recommande <\/span>cet article<\/span><\/a>.<\/span><\/p>\n
Un livre qui a aid\u00e9 \u00e0 comprendre ce qu\u2019est un syst\u00e8me de conception est Atomic Design. Alors, <\/span>lire Atomic Design<\/span><\/a> est crucial pour une meilleure compr\u00e9hension des \u00e9cosyst\u00e8mes des syst\u00e8mes de conception.<\/span><\/p>\n
Pour en savoir plus sur l\u2019histoire du syst\u00e8me de conception, je vous <\/span>recommande cet article<\/span><\/a>.<\/span><\/p>\n
Explorez les syst\u00e8mes de conception exemplaires des organisations suivantes\u00a0:<\/span><\/p>\n
- \n
- Google\u00a0: <\/span>material.io\/design<\/span><\/a><\/li>\n
- Salesforce\u00a0: <\/span>lightningdesignsystem.com<\/span><\/a><\/li>\n
- IBM\u00a0: <\/span>ibm.com\/design\/language<\/span><\/a><\/li>\n
- Shopify\u00a0: <\/span>polaris.shopify.com<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Sommaire 1. Processus de cr\u00e9ation du syst\u00e8me de conception 2. D\u00e9finition de l\u2019outil 3. R\u00e9alisation d\u2019un audit de conception 4. D\u00e9finition des \u00e9l\u00e9ments de conception basiques 5. D\u00e9finition des composants du syst\u00e8me de conception 6. D\u00e9finition des pages (\u00e9crans, fen\u00eatres, compositions) 7. Comment partager votre syst\u00e8me de conception 8. Lectures recommand\u00e9es et exemples 1. Processus […]<\/p>\n","protected":false},"author":59,"featured_media":28300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[12401,12400],"tags":[],"class_list":["post-28618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conception","category-etude-de-cas"],"acf":[],"yoast_head":"\n
Comment construire un syst\u00e8me de conception avec Figma - TestingTime<\/title>\n<meta name=\"description\" content=\"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment construire un syst\u00e8me de conception avec Figma\" \/>\n<meta property=\"og:description\" content=\"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\" \/>\n<meta property=\"og:site_name\" content=\"TestingTime\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/testingtime\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-26T07:10:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-23T13:53:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2914\" \/>\n\t<meta property=\"og:image:height\" content=\"1966\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@testingtime\" \/>\n<meta name=\"twitter:site\" content=\"@testingtime\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Beatriz G\u00f3mez P\u00e9rez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\"},\"author\":{\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\"},\"headline\":\"Comment construire un syst\u00e8me de conception avec Figma\",\"datePublished\":\"2021-07-26T07:10:15+00:00\",\"dateModified\":\"2021-07-23T13:53:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\"},\"wordCount\":2808,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#organization\"},\"articleSection\":[\"Conception\",\"\u00c9tude de cas\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\",\"url\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\",\"name\":\"Comment construire un syst\u00e8me de conception avec Figma - TestingTime\",\"isPartOf\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#website\"},\"datePublished\":\"2021-07-26T07:10:15+00:00\",\"dateModified\":\"2021-07-23T13:53:25+00:00\",\"description\":\"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TestingTime\",\"item\":\"https:\/\/www.testingtime.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment construire un syst\u00e8me de conception avec Figma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#website\",\"url\":\"https:\/\/www.testingtime.com\/fr\/\",\"name\":\"TestingTime\",\"description\":\"Wir rekrutieren Testpersonen\",\"publisher\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.testingtime.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#organization\",\"name\":\"TestingTime\",\"url\":\"https:\/\/www.testingtime.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg\",\"width\":1,\"height\":1,\"caption\":\"TestingTime\"},\"image\":{\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/testingtime\",\"https:\/\/twitter.com\/testingtime\",\"https:\/\/www.instagram.com\/testingtime\/\",\"https:\/\/www.linkedin.com\/company-beta\/9231506\/\",\"https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0\",\"name\":\"Beatriz G\u00f3mez P\u00e9rez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"contentUrl\":\"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png\",\"caption\":\"Beatriz G\u00f3mez P\u00e9rez\"},\"url\":\"https:\/\/www.testingtime.com\/fr\/blog\/author\/beatriz\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment construire un syst\u00e8me de conception avec Figma - TestingTime","description":"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment construire un syst\u00e8me de conception avec Figma","og_description":"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.","og_url":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","og_site_name":"TestingTime","article_publisher":"https:\/\/www.facebook.com\/testingtime","article_published_time":"2021-07-26T07:10:15+00:00","article_modified_time":"2021-07-23T13:53:25+00:00","og_image":[{"width":2914,"height":1966,"url":"https:\/\/www.testingtime.com\/app\/uploads\/2021\/07\/TestingTime-Design-System-1.png","type":"image\/png"}],"author":"Beatriz G\u00f3mez P\u00e9rez","twitter_card":"summary_large_image","twitter_creator":"@testingtime","twitter_site":"@testingtime","twitter_misc":{"Written by":"Beatriz G\u00f3mez P\u00e9rez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#article","isPartOf":{"@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/"},"author":{"name":"Beatriz G\u00f3mez P\u00e9rez","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0"},"headline":"Comment construire un syst\u00e8me de conception avec Figma","datePublished":"2021-07-26T07:10:15+00:00","dateModified":"2021-07-23T13:53:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/"},"wordCount":2808,"commentCount":0,"publisher":{"@id":"https:\/\/www.testingtime.com\/fr\/#organization"},"articleSection":["Conception","\u00c9tude de cas"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","url":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/","name":"Comment construire un syst\u00e8me de conception avec Figma - TestingTime","isPartOf":{"@id":"https:\/\/www.testingtime.com\/fr\/#website"},"datePublished":"2021-07-26T07:10:15+00:00","dateModified":"2021-07-23T13:53:25+00:00","description":"Construire un syst\u00e8me de conception \u00e0 partir de rien peut \u00eatre un d\u00e9fi, mais avec un bon processus, vous \u00e9vitez le chaos. Pour en savoir plus, cliquez ici.","breadcrumb":{"@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.testingtime.com\/fr\/blog\/design-system-figma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TestingTime","item":"https:\/\/www.testingtime.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment construire un syst\u00e8me de conception avec Figma"}]},{"@type":"WebSite","@id":"https:\/\/www.testingtime.com\/fr\/#website","url":"https:\/\/www.testingtime.com\/fr\/","name":"TestingTime","description":"Wir rekrutieren Testpersonen","publisher":{"@id":"https:\/\/www.testingtime.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.testingtime.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.testingtime.com\/fr\/#organization","name":"TestingTime","url":"https:\/\/www.testingtime.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2017\/04\/logo.svg","width":1,"height":1,"caption":"TestingTime"},"image":{"@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/testingtime","https:\/\/twitter.com\/testingtime","https:\/\/www.instagram.com\/testingtime\/","https:\/\/www.linkedin.com\/company-beta\/9231506\/","https:\/\/www.youtube.com\/channel\/UCpnMUgCz5FiiCUXU-U8ub1w"]},{"@type":"Person","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/e906f91aa704cca46130d9dcefa5b7f0","name":"Beatriz G\u00f3mez P\u00e9rez","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.testingtime.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","contentUrl":"https:\/\/www.testingtime.com\/app\/uploads\/2020\/02\/TT_Team_Beatriz_transp-150x150.png","caption":"Beatriz G\u00f3mez P\u00e9rez"},"url":"https:\/\/www.testingtime.com\/fr\/blog\/author\/beatriz\/"}]}},"_links":{"self":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts\/28618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/comments?post=28618"}],"version-history":[{"count":4,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts\/28618\/revisions"}],"predecessor-version":[{"id":28624,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/posts\/28618\/revisions\/28624"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/media\/28300"}],"wp:attachment":[{"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/media?parent=28618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/categories?post=28618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.testingtime.com\/fr\/wp-json\/wp\/v2\/tags?post=28618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Salesforce\u00a0: <\/span>lightningdesignsystem.com<\/span><\/a><\/li>\n
- Utilisez Figma ou Google Slides pour organiser vos captures d\u2019\u00e9cran ou envisagez de les imprimer et de les \u00e9pingler sur des panneaux en mousse.<\/span><\/li>\n
- Outils de documentation<\/b> \u2013 Ces outils offrent des pages Web accessibles au public avec contr\u00f4le de version que tout le monde peut utiliser pour r\u00e9cup\u00e9rer des informations. La plupart de ces outils sont destin\u00e9s aux d\u00e9veloppeurs, avec des options d\u2019h\u00e9bergement et d\u2019affichage de code. Comme il n\u2019y a pas d\u2019int\u00e9gration avec les outils de conception, les concepteurs doivent d\u00e9velopper (et mettre \u00e0 jour) les images de chaque design et les placer ou remplacer manuellement sur le site Web. Exemples de ceci sont <\/span>GitBook<\/span><\/a>, <\/span>VuePress<\/span><\/a>, <\/span>Fractal<\/span><\/a> et <\/span>Confluence<\/span><\/a>.<\/span><\/li>\n
- Le fait de n\u2019avoir pas compris l\u2019ampleur d\u2019un syst\u00e8me de conception<\/span><\/li>\n<\/ul>\n