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
67
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
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
170
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
360
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
decksh object reference
ajstarks
2
1.3k
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
960
minpaku-community-scrum-patterns
norinity1103
1
460
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.6k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
130
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
860
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
450
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.9k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
It's Worth the Effort
3n
187
28k
The Language of Interfaces
destraynor
162
25k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
BBQ
matthewcrist
89
9.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
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 :)