{"id":7248,"date":"2020-03-08T14:42:29","date_gmt":"2020-03-08T13:42:29","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7248"},"modified":"2020-03-15T11:49:37","modified_gmt":"2020-03-15T10:49:37","slug":"bons-outils-construire-design-system","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ux-experience-utilisateur\/bons-outils-construire-design-system","title":{"rendered":"Les bons outils pour construire un Design System"},"content":{"rendered":"

Vous savez d\u00e9j\u00e0 qu’un Design System n’est pas seulement un fichier CSS partag\u00e9 ou un ensemble de biblioth\u00e8ques Figma\/Sketch. Un syst\u00e8me de conception est compos\u00e9 \u00e0 80% d’humains (relations, partage, travail quotidien) et \u00e0 20% de documentation, d’outils et de biblioth\u00e8ques. Je souhaite vous aider pour ces 20%.<\/p>\n

<\/p>\n

Pour vous aider avec ces 20%, j’ai fait une petite liste d’outils qui m’ont aid\u00e9 et continuent \u00e0 m’aider au quotidien, et \u00e9galement quelques uns qui pourraient \u00eatre int\u00e9ressants pour vous m\u00eame si je n’utilise pas ces outils. C’est un tr\u00e8s bon ajout \u00e0 la liste des outils de Design UX\/UI<\/a> que j’ai faite pour vous plus t\u00f4t.<\/p>\n

Je vais d\u00e9tailler un peu l’usage que je fais de chaque outil que j’utilise, et pour ceux que j’ai essay\u00e9 une fois mais que je n’utilise pas au quotidien, je serai plus bref, m\u00eame s’ils ont attir\u00e9 mon attention \u00e0 un moment donn\u00e9.<\/p>\n

Je vais essayer de s\u00e9parer les outils de biblioth\u00e8que visuelle<\/a> des outils de Composant c\u00f4t\u00e9 code<\/a>, m\u00eame si, vous le verrez, la s\u00e9paration est parfois assez difficile.<\/p>\n

Design System – Biblioth\u00e8que visuelle<\/h2>\n

Lors de ma premi\u00e8re exp\u00e9rience de construction d’un Design System, j’ai commenc\u00e9 avec l’application Sketch mais au bout d’un moment, la biblioth\u00e8que \u00e9tait trop grande pour ce pauvre petit Sketch et elle commen\u00e7ait \u00e0 \u00eatre trop lente pour pouvoir fonctionner convenablement.
\nC’est pourquoi, apr\u00e8s quelques tests effectu\u00e9s par un de mes coll\u00e8gues, nous avons rejoint la communaut\u00e9 Figma.<\/p>\n

Figma – Un Design System \u00e9volutif<\/h3>\n

Figma est bien connu de la communaut\u00e9 de design, et il vous permet de construire un Design System efficace et de partager des biblioth\u00e8ques visuelles. J’ai test\u00e9 d’autres solutions comme Adobe XD ou Sketch, mais la compatibilit\u00e9 entre les syst\u00e8mes d’exploitation et la fa\u00e7on dont elle fonctionne correspondent \u00e0 ma fa\u00e7on de travailler sur un Design System.<\/p>\n

Les fonctions de \u00ab\u00a0Team\u00a0\u00bb sont vraiment utiles pour int\u00e9grer les personnes dans une \u00e9quipe de designers. Il existe des biblioth\u00e8ques partag\u00e9es<\/strong> qui peuvent \u00eatre activ\u00e9es dans l’ensemble de l’\u00e9quipe pour forcer les gens \u00e0 utiliser des composants principaux (symboles dans Sketch) dans la composition de leurs design.<\/p>\n

\"\"
Capture d’\u00e9cran du Design System de Foyer – Biblioth\u00e8que visuelle<\/figcaption><\/figure>\n

Ces diff\u00e9rentes biblioth\u00e8ques peuvent \u00eatre activ\u00e9es sur l’ensemble de l’\u00e9quipe, mais sont toutes facultatives. Cela signifie que lorsque vous cr\u00e9ez votre fichier pour travailler sur une interface en utilisant votre Design System, vous pouvez d\u00e9sactiver les biblioth\u00e8ques dont vous n’avez pas besoin. Je ne sais pas pourquoi vous voudriez faire cela, mais vous pouvez le faire \ud83d\ude00
\nNotre Design System actuel est assez gros, mais je n’ai jamais remarqu\u00e9 de latence dans son utilisation ou dans la recherche parmi la grande quantit\u00e9 de composants ma\u00eetres.<\/p>\n

Il existe \u00e9galement la Collaboration en direct<\/strong>, qui permet de travailler exactement sur le m\u00eame objet dans le m\u00eame fichier. C’est un moyen de sauver des vies lorsque vous devez vous pr\u00e9cipiter sur un design pour une raison quelconque.<\/p>\n

\"\"
Une d\u00e9mo de 3 personnes qui travaillent sur le m\u00eame fichier (source<\/a>)<\/figcaption><\/figure>\n

Les visiteurs et les contributeurs peuvent laisser des commentaires directement sur l’espace de travail, ajoutant ainsi plusieurs niveaux de contribution.<\/p>\n

\"\"
Un commentaire sur un composant de Design System<\/figcaption><\/figure>\n

Le fait que tous les fichiers soient dans le Cloud<\/strong>, vous ne pensez m\u00eame pas \u00e0 la sauvegarde ou au service de Cloud o\u00f9 vous devez sauvegarder votre travail r\u00e9guli\u00e8rement et penser \u00e0 un outil de versionning<\/em><\/span>. Tout est inclus dans Figma : contr\u00f4le de version, outil de bl\u00e2me, fichiers sauvegard\u00e9s dans le cloud. Et oui, vous pouvez travailler hors ligne<\/a> d\u00e8s que vous avez d\u00e9j\u00e0 charg\u00e9 votre travail, l’outil enregistrera localement votre travail et le poussera en ligne lorsque votre connexion sera r\u00e9tablie.
\nPour les entreprises, si vous avez besoin d’une s\u00e9curit\u00e9 renforc\u00e9e, Figma permet SAML SSO<\/a>.<\/p>\n

Figma est aussi une affaire de communaut\u00e9<\/strong> autour d’elle : Des plugins<\/strong> et des fichiers partag\u00e9s<\/strong> r\u00e9alis\u00e9s gratuitement par la communaut\u00e9 sont disponibles et peuvent \u00eatre facilement activ\u00e9s pour tous les membres de votre \u00e9quipe. L’int\u00e9gration pour construire un plugin est si simple que j’en ai fait un pour pr\u00e9parer vos exports d’ic\u00f4nes PWA<\/a>.<\/p>\n

\"\"
La page Communaut\u00e9 de Figma<\/figcaption><\/figure>\n

Figma est gratuit pour 2 \u00e9diteurs et 3 projets au maximum, ce qui est vraiment suffisant pour les \u00e9tudiants ou les petites \u00e9quipes de designers. Mais tant que vous aurez besoin de construire des biblioth\u00e8ques partag\u00e9es, vous devrez payer 12 $\/mois\/\u00e9diteur.<\/p>\n

D\u00e9couvrir Figma<\/a><\/p>\n

ZeroHeight – documentation Design et code<\/h3>\n

Zeroheight<\/a> est un CMS pour g\u00e9rer une documentation, un site web qui est disponible pour vous et vos collaborateurs. L’avantage de cet outil est que vous pouvez synchroniser vos fichiers de design<\/strong> pour maintenir la documentation \u00e0 jour. Il fonctionne \u00e0 merveille avec Figma<\/strong> qui offre une API puissante.<\/p>\n

https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/02\/designers.mp4<\/a><\/video><\/div>\n

Lorsque j’ai construit le site web du Foyer Design System<\/a>, je l’ai fait avec de simples fichiers HTML, il m’a fallu un peu de temps juste pour le mod\u00e8le et l’aspect\u00a0responsive<\/em><\/span> du site web. La structure \u00e9tait bas\u00e9e sur le\u00a0Design System<\/em><\/span> interne existant que nous avons au Foyer (c’est le nom de la soci\u00e9t\u00e9) pour notre documentation compl\u00e8te. Oui, le site web public ne repr\u00e9sente m\u00eame pas 5 % de la documentation compl\u00e8te.<\/p>\n

Lorsque j’ai commenc\u00e9 \u00e0 travailler sur le\u00a0Design System<\/em><\/span> CapitalatWork<\/a> pour nos besoins internes (applications internes), j’avais besoin de quelque chose d’efficace avec une configuration rapide.\u00a0Zeroheight<\/em><\/span> m’a permis de construire plusieurs pages de documentation en une matin\u00e9e.<\/p>\n

https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/02\/developers.mp4<\/a><\/video><\/div>\n

L’outil permet de construire une documentation visuelle<\/strong> ainsi qu’une documentation technique<\/strong>. Il synchronise votre fichier de design ; dans mon cas Figma avec les frames<\/em><\/span>, composants ou styles import\u00e9s que j’ai d\u00e9cid\u00e9 d’importer et de documenter. Il y a des blocs de contenu pr\u00e9-fabriqu\u00e9s qui peuvent facilement couvrir 90% de vos besoins pour une structure et un contenu de\u00a0Design System<\/em><\/span> de grande qualit\u00e9.<\/p>\n

Lorsque les designers ou les d\u00e9veloppeurs se joindront \u00e0 moi pour compl\u00e9ter la documentation, nous pourrons l’\u00e9crire en collaboration, en m\u00eame temps.<\/p>\n

https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2020\/02\/editors.mp4<\/a><\/video><\/div>\n

Zeroheight est gratuit pour un \u00e9diteur, suffisant pour commencer, et commence \u00e0 15 $\/mois\/\u00e9diteur pour une version premium collaborative. C’est aussi :<\/p>\n