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
What I've learned building automated docs for Ansarada's design system
Search
Ciro Nunes
January 14, 2019
Technology
0
54
What I've learned building automated docs for Ansarada's design system
Ciro Nunes
January 14, 2019
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
36
Type safe CSS with Reason
cironunes
0
88
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
380
Sweet Angular, good forms never felt so good
cironunes
0
51
Sweet Angular, good forms never felt so good
cironunes
0
270
Progressive Angular apps
cironunes
3
860
Angular: Um framework. Mobile & desktop.
cironunes
1
560
Firebase & Angular
cironunes
0
280
Other Decks in Technology
See All in Technology
認知症フレンドリーテックとスタックチャン
naokiuc
0
310
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
開発パフォーマンスを最大化するための開発体制
ham0215
7
1.2k
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
190
M&A戦略を支えるデータマネジメント (MIDAS Tech Study #16 GENDA Komiyama)
kommy339
1
140
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
120
Next.js に疲れた私は Vue3 に癒やされた
akagire
0
140
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
440
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
170
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1.1k
Azureの基本的な権限管理の勉強会
yhana
1
2.2k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Scaling GitHub
holman
457
140k
Bash Introduction
62gerente
605
210k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Infographics Made Easy
chrislema
238
18k
Designing the Hi-DPI Web
ddemaree
276
33k
A Tale of Four Properties
chriscoyier
153
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Transcript
What I’ve learned building automated docs for ACE Ciro Nunes
DesignOps wizard
@cironunesdev
Alex Leon The people involved Anthony Muscat Chantelle Staples
None
Agenda 1. A bit of history 2. The journey towards
automated docs 3. What we built so far 4. Takeaways and next steps
Ansarada Common Elements a.k.a ACE
39 Components and best practices
130 Design tokens
None
None
None
None
The process of creating and documenting components was completely manual,
time consuming and error prone
None
None
Challenges
Challenges • Keep it up-to-date • Save time • Avoid
errors • Make it fun
Challenges • Keep it up-to-date • Save time • Avoid
errors • Make it fun Remedies
Challenges • Keep it up-to-date • Save time • Avoid
errors • Make it fun Remedies • Automation ✓ Generate docs from code • Code snippets
We decided to rebuild our docs from scratch thinking in
automation from day one
The journey towards an automatically documented design system
The Orbit project (automated docs)
The Orbit project (automated docs) 1 Survey & Research
The Orbit project (automated docs) 1 Survey & Research 2
Workshop
The Orbit project (automated docs) 1 Survey & Research 2
Workshop 3 Planning
The Orbit project (automated docs) 1 Survey & Research 2
Workshop 3 Planning 4 Execution (design & code)
The Orbit project (automated docs) 1 Survey & Research 2
Workshop 3 Planning 4 Execution (design & code) 5 Release MVP, gather feedback & Iterate
1 . Survey & Research
None
None
None
None
None
None
None
None
None
None
2 . Workshop
None
3 . Planning
MVP
MVP 1. Generate docs from code
MVP 1. Generate docs from code 2. Use existing documentation
MVP 1. Generate docs from code 2. Use existing documentation
3. Improve the look and feel
None
4. Design & code
None
None
None
None
5. Release & feedback
None
None
What we built so far
Demo time!
What I’ve learned
Design systems are more than just reusable components
Code comments are documentation
Types are documentation too !
Markdown is perfect to write documentation "
Takeaways & next steps
Takeaways
Takeaways 1. Reuse existing tools
Takeaways 1. Reuse existing tools 2. Design systems are more
than just components
Ciro Nunes Writing docs is boring and keep them up-to-
date is hard, time consuming and error prone. Don’t write it, generate it!
Next steps
Next steps 1. Include design tokens (Sass docs)
Next steps 1. Include design tokens (Sass docs) 2. Polish
and implement new features
Next steps 1. Include design tokens (Sass docs) 2. Polish
and implement new features 3. Make it a framework
Next steps 1. Include design tokens (Sass docs) 2. Polish
and implement new features 3. Make it a framework 4. Open source it
None
None
None
None
@cironunesdev
What if I use Vue?
None