Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Documenter vos composants de Design System
Search
DesignSystems44
May 20, 2020
Design
2
68
Documenter vos composants de Design System
DesignSystems44
May 20, 2020
Tweet
Share
More Decks by DesignSystems44
See All by DesignSystems44
Louis_Chenais____Design_Systems_Nantes__1_Bien_initier_son_Design_System___2020.pdf
ds44
3
130
Clement_Lalande_-_Design_System_Nantes.pdf
ds44
1
63
Other Decks in Design
See All in Design
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
520
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
220
Yumika Yamada Portfolio
yumii
0
2.1k
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.6k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
710
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
380
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
SAMSUL KAMAR ABDUL RAHMAN
samsulrahman32
0
170
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜(Scrum Fest Mikawa 2025)
tadashiinoue
0
560
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
We Have a Design System, Now What?
morganepeng
53
7.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Pragmatic Product Professional
lauravandoore
36
7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Automating Front-end Workflow
addyosmani
1371
200k
Why Our Code Smells
bkeepers
PRO
340
57k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Become a Pro
speakerdeck
PRO
29
5.6k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
Monia Huet UX Designer @Talend
[email protected]
Fabien Rassinier Frontend Dev
@Talend
[email protected]
Comment bien initier son Design System ? Documenter vos composants
Talend Éditeur logiciel permettant de manipuler et gouverner la donnée.
8 produits sur le Cloud. Une équipe R&D de plus de 400 personnes. Équipe UX sur Sketch, composants implémentés avec React sur Storybook.
Plan Introduction Zoning Style États Contenu éditorial Code Interactions Accessibilité
Changelog
Nom du composant Vecteur de communication principal Décision commune Consensus
entre les différents acteurs Concis et générique Il faut que ce soit parlant pour tous Titre Introduction
Description Doit rester la plus succincte possible et répondre aux
5w. What? Why? Who? Where? When? Introduction
Zoning Permet de se rendre compte de la composition Permet
d’identifier les dépendances et ce qui est optionnel ou non
Style Illustre tous les cas limites Composé de Design tokens
Définit ce qui est customisable ou non pour les thèmes
Etats Squelette animé Liste vide Cas d’erreur Chaque élément HTML
interactif a une liste d’états connus, ils doivent être illustrés. ...
Contenu éditorial Précise les règles de terminologies à utiliser ainsi
que le ton.
Code Les valeurs par défaut Les descriptions pour chacune des
propriétés Le type de valeur accepté
Interactions Pour garantir une UX cohérente
Accessibilité Interactions avec le clavier Zoom texte Contraste de couleurs
Indicateurs autres que la couleur Texte ou description alternatifs
Changelog Ne concerne que la partie documentation.
Qu’est-ce qu’on retient ? Ce modèle de contenu ne fonctionne
que si vous avez des garants du Design System. On a fait le choix d’appliquer ce modèle à tous nos composants. Même si certaines parties sont non-applicables. Chacun doit trouver son organisation, c’est avant tout une histoire de consensus.
Merci :)