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 A...
Search
Ciro Nunes
January 14, 2019
Technology
0
67
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
50
Type safe CSS with Reason
cironunes
0
110
Beyond ng new
cironunes
2
200
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
66
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
890
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Firebase & Angular
cironunes
0
290
Other Decks in Technology
See All in Technology
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
190
サンドボックス技術でAI利活用を促進する
koh_naga
0
140
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
1.1k
Kiroと学ぶコンテキストエンジニアリング
oikon48
5
3.9k
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
420
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
130
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
420
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
240
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
JavaScript 研修
recruitengineers
PRO
6
1.4k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
180
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
790
Thoughts on Productivity
jonyablonski
69
4.8k
Faster Mobile Websites
deanohume
309
31k
Unsuck your backbone
ammeep
671
58k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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