{"id":3243,"date":"2023-01-20T09:09:14","date_gmt":"2023-01-20T08:09:14","guid":{"rendered":"https:\/\/www.anais.digital\/?p=3243"},"modified":"2024-11-06T16:09:41","modified_gmt":"2024-11-06T15:09:41","slug":"meilleurs-outils-pour-creer-un-design-system","status":"publish","type":"post","link":"https:\/\/www.anais.digital\/fr\/meilleurs-outils-pour-creer-un-design-system\/","title":{"rendered":"Les 4 meilleurs outils pour cr\u00e9er un Design System en 2023"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2024\/07\/Template-blog-32.png\" alt=\"photo de couverture de l'article sur les meilleurs outils de design system\" class=\"wp-image-5257\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2024\/07\/Template-blog-32.png 1024w, https:\/\/www.anais.digital\/wp-content\/uploads\/2024\/07\/Template-blog-32-300x169.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2024\/07\/Template-blog-32-768x432.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>V\u00e9ritable guide pour les designers et les d\u00e9veloppeurs, un <a href=\"https:\/\/www.anais.digital\/fr\/design-system-pourquoi-est-ce-indispensable-pour-votre-entreprise\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a> regroupe un ensemble d\u2019\u00e9l\u00e9ments offrant de nombreux avantages \u00e0 vos \u00e9quipes tout en garantissant un gain de temps et d\u2019argent non n\u00e9gligeable.\u00a0<\/p>\n\n\n\n<p>Le saviez-vous :&nbsp; vous pouvez cr\u00e9er votre design system gr\u00e2ce \u00e0 des outils collaboratifs en ligne. Voici une liste non exhaustive de sites pour vous aider \u00e0 le cr\u00e9er.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Quels sont les meilleurs outils en ligne pour cr\u00e9er un design system ?<\/h2>\n\n\n\n<p>Pour cr\u00e9er un <a href=\"https:\/\/www.anais.digital\/fr\/design-system\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a><em>,<\/em> il faut combiner les bonnes comp\u00e9tences et de bons outils.&nbsp;<\/p>\n\n\n\n<p>Vous avez besoin de biblioth\u00e8ques visuelles, outils collaboratifs, plateformes de partage de composants, <em>UI kit,<\/em> outils de code et de handoff, <em>etc<\/em>.<br>Parmi les meilleurs logiciels utilis\u00e9s pour cr\u00e9er des <em>design systems<\/em>, citons :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Figma<\/strong> : la biblioth\u00e8que visuelle pour un <em>design system<\/em> qui \u00e9volue<\/li>\n\n\n\n<li><strong>Zeroheight<\/strong>: documentation de <em>design system<\/em>s collaborative<\/li>\n\n\n\n<li><strong>StoryBook<\/strong>: la biblioth\u00e8que pour d\u00e9veloppeurs<\/li>\n\n\n\n<li><strong>Miro<\/strong> : l\u2019outil pour stimuler la collaboration&nbsp;<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Figma : la biblioth\u00e8que visuelle pour un design system \u00e9volutif<\/h3>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"722\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/figma-1024x722.png\" alt=\"\" class=\"wp-image-3247\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/figma-1024x722.png 1024w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/figma-300x212.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/figma-768x542.png 768w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/figma-1536x1083.png 1536w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/figma.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.figma.com\/fr\/\" target=\"_blank\" rel=\"noopener\">Figma<\/a> est un outil sp\u00e9cialis\u00e9 dans la conception d&rsquo;interfaces web et mobiles. Il favorise la collaboration et le partage, ce qui le rend id\u00e9al pour construire un <em>design system<\/em> pouvant \u00eatre utilis\u00e9 par une \u00e9quipe.<\/p>\n\n\n\n<p>La grande popularit\u00e9 de Figma vient de ses mod\u00e8les et fonctionnalit\u00e9s, inspir\u00e9es du d\u00e9veloppement web, qui correspondent parfaitement aux tendances et aux besoins actuels.<\/p>\n\n\n\n<p>De plus, Figma est h\u00e9berg\u00e9 sur le <em>cloud<\/em>,<em> <\/em>ce qui favorise le travail collaboratif et le partage de biblioth\u00e8ques visuelles.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Les avantages de Figma :<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La collaboration et le partage sont facilit\u00e9s, \u00e0 distance et en temps r\u00e9el&nbsp;<\/li>\n\n\n\n<li>Travail et sauvegarde sur le Cloud&nbsp;<\/li>\n\n\n\n<li>Possibilit\u00e9 d\u2019\u00e9crire des commentaires&nbsp;<\/li>\n\n\n\n<li>Biblioth\u00e8ques partag\u00e9es&nbsp;<\/li>\n\n\n\n<li>Les composants peuvent \u00eatre facilement chang\u00e9s et r\u00e9cup\u00e9r\u00e9s&nbsp;<\/li>\n\n\n\n<li>Compatibilit\u00e9 avec ZeroHeight<\/li>\n<\/ul>\n\n\n\n<p>En septembre 2022, Adobe a annonc\u00e9 l\u2019<a href=\"https:\/\/news.adobe.com\/news\/news-details\/2022\/Adobe-to-Acquire-Figma\/default.aspx\" target=\"_blank\" rel=\"noopener\">achat de son concurrent Figma<\/a> pour un montant de 20 millions de dollars.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tarif de Figma<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" width=\"920\" height=\"700\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/tarifs-figma.png\" alt=\"\" class=\"wp-image-3266\" style=\"width:724px;height:551px\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/tarifs-figma.png 920w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/tarifs-figma-300x228.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/tarifs-figma-768x584.png 768w\" sizes=\"(max-width: 920px) 100vw, 920px\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\"><br>ZeroHeight : gestion collaborative de documentation de design systems<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"523\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/ZeroHeight-1024x523.png\" alt=\"\" class=\"wp-image-3253\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/ZeroHeight-1024x523.png 1024w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/ZeroHeight-300x153.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/ZeroHeight-768x392.png 768w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/ZeroHeight-1536x784.png 1536w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/ZeroHeight.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/zeroheight.com\/\" target=\"_blank\" rel=\"noopener\">Zeroheight<\/a> est un CMS (content management system) qui permet aux designers, aux d\u00e9veloppeurs, ing\u00e9nieurs et \u00e9quipes de produit de cr\u00e9er une documentation visuelle, une documentation technique et de les maintenir \u00e0 jour.&nbsp;<\/p>\n\n\n\n<p>ZeroHeight dispose d&rsquo;une puissante API (Application Programming Interface) qui vous permet d&rsquo;importer et de documenter vos fichiers de conception (par exemple, les cadres, les composants ou le style de Figma).&nbsp;<\/p>\n\n\n\n<p>Il fonctionne sous forme de blocs pr\u00e9con\u00e7us qui r\u00e9pondent \u00e0 la plupart de vos besoins pour concevoir un contenu de Design system de qualit\u00e9.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Les avantages de ZeroHeight :<br><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Guide de style en ligne facile \u00e0 suivre et bien document\u00e9 ;<\/li>\n\n\n\n<li>inspection en d\u00e9tail des composants possibles ;<\/li>\n\n\n\n<li>design Token, assets et fichiers de design \u00e0 jour et synchronis\u00e9s ;<\/li>\n\n\n\n<li>compatibilit\u00e9 avec Figma, Adobe XD et Sketch pour importer des \u00e9l\u00e9ments graphiques et de conception.<br><\/li>\n<\/ul>\n\n\n\n<p>ZeroHeight est utilis\u00e9 par des clients comme Decathlon ou la Ville d\u2019Amsterdam.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Tarif de Zeroheight<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"725\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Tarif-de-Zeroheight-1024x725.png\" alt=\"\" class=\"wp-image-3256\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Tarif-de-Zeroheight-1024x725.png 1024w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Tarif-de-Zeroheight-300x213.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Tarif-de-Zeroheight-768x544.png 768w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Tarif-de-Zeroheight-1536x1088.png 1536w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Tarif-de-Zeroheight.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Storybook : la biblioth\u00e8que pour d\u00e9veloppeurs<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"723\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Storybook-1024x723.png\" alt=\"\" class=\"wp-image-3259\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Storybook-1024x723.png 1024w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Storybook-300x212.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Storybook-768x542.png 768w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Storybook-1536x1084.png 1536w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/Storybook.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Avec <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noopener\">StoryBook<\/a> (souvent appel\u00e9 Storybook JS, StorybookJS, Storybook React ou encore React Storybook), vous pouvez cr\u00e9er de la documentation pour&nbsp; d\u00e9veloppeurs front-end et pour les \u00e9quipes designs qui ma\u00eetrisent le code.<\/p>\n\n\n\n<p>StoryBook aide les d\u00e9veloppeurs front-end \u00e0 documenter, \u00e0 g\u00e9rer et \u00e0 garder la trace de composants et de pages sp\u00e9cifiques, tout en les rendant facilement consultables.<\/p>\n\n\n\n<p>L\u2019outil permet de visualiser de visualiser les changements visuels en direct pendant que vous codez.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&nbsp;Les avantages de Storybook<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Documentation technique orient\u00e9e pour les \u00e9quipes de d\u00e9veloppement (besoin de connaissance en codage) ;<\/li>\n\n\n\n<li>fonctionne correctement avec HTML brut, React, React Native, Vue, Angular, mithril, Marko, Ember, Riot, Svelte ;<\/li>\n\n\n\n<li>Compatible avec Figma.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Tarif de Storybook<\/h4>\n\n\n\n<p>Storybook est un outil open source (gratuit).&nbsp;<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Miro : l\u2019outil pour stimuler la collaboration<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/miro-1024x608.png\" alt=\"\" class=\"wp-image-3262\" srcset=\"https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/miro-1024x608.png 1024w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/miro-300x178.png 300w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/miro-768x456.png 768w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/miro-1536x911.png 1536w, https:\/\/www.anais.digital\/wp-content\/uploads\/2023\/01\/miro.png 1999w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/miro.com\/fr\/\" target=\"_blank\" rel=\"noopener\">Miro<\/a> est une plateforme de tableau blanc en ligne qui vous permet de partager des informations avec vos coll\u00e8gues de travail. L\u2019outil r\u00e9pond \u00e0 une multitude de besoins : r\u00e9unions, ateliers, <em>brainstormings<\/em>, processus agiles et UX Design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Les avantages de Miro<\/strong>&nbsp;<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Facilite la collaboration \u00e0 distance et en temps r\u00e9el ;<\/li>\n\n\n\n<li>diff\u00e9rents outils accessibles depuis le tableau blanc tels que le stylo, la fonction post-it, les formes, les commentaires et l\u2019int\u00e9gration de fichiers ;<\/li>\n\n\n\n<li>possibilit\u00e9 d\u2019utiliser les templates d\u00e9j\u00e0 cr\u00e9\u00e9s ou de d\u00e9velopper les v\u00f4tres.<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Il existe de nombreuses fa\u00e7ons de cr\u00e9er un design system (terme que l\u2019on peut traduire par \u201csyst\u00e8me de conception\u201d).&nbsp;<\/p>\n\n\n\n<p>Dans cet article on vous pr\u00e9sent les meilleurs pour cr\u00e9er des<em> design systems<\/em> :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Figma<\/strong> : l\u2019outil pr\u00e9f\u00e9r\u00e9 de nos \u00e9quipes. Figma est une plateforme collaborative en ligne qui est id\u00e9ale pour la cr\u00e9ation graphique<\/li>\n\n\n\n<li><strong>ZeroHeight<\/strong> : sur cette plateforme vous trouverez de la documentation et des conseils de meilleures pratiques<\/li>\n\n\n\n<li><strong>StoryBook<\/strong> contient de la documentation technique \u00e0 destination des \u00e9quipes de d\u00e9veloppement<\/li>\n\n\n\n<li><strong>Miro<\/strong> : est un outil qui favorise la collaboration, propose un \u00e9tat des lieux et facilite le travail des \u00e9quipes.<\/li>\n<\/ul>\n\n\n\n<p>Il est \u00e9galement essentiel de se rappeler qu&rsquo;un outil est toujours au service de celles et ceux qui s\u2019en servent.&nbsp;<\/p>\n\n\n\n<p>Le succ\u00e8s d&rsquo;un <em>design system<\/em> demande du temps et l\u2019implication d\u2019une \u00e9quipe pour son impl\u00e9mentation (qui repr\u00e9sente un travail continu).&nbsp;<\/p>\n\n\n\n<p>Les cl\u00e9s de la r\u00e9ussite ? Collaboration, communication et participation active de toutes les parties prenantes.<\/p>\n\n\n\n<p>Vous avez besoin d\u2019aide pour cr\u00e9er ou mettre en place un design system ? D\u00e9couvrez la vid\u00e9o de notre expert Reynald Lemaire (co-managing partner d\u2019Anais Digital).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=hhh0vwamBLY\n<\/div><\/figure>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Le saviez-vous :  vous pouvez cr\u00e9er votre design system gr\u00e2ce \u00e0 des outils collaboratifs en ligne. Voici une liste non exhaustive de sites pour vous aider \u00e0 le cr\u00e9er.<\/p>\n","protected":false},"author":1,"featured_media":5257,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","rank_math_lock_modified_date":false,"footnotes":""},"categories":[74],"tags":[],"class_list":["post-3243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system-fr"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/posts\/3243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/comments?post=3243"}],"version-history":[{"count":0,"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/posts\/3243\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/media\/5257"}],"wp:attachment":[{"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/media?parent=3243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/categories?post=3243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.anais.digital\/fr\/wp-json\/wp\/v2\/tags?post=3243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}