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
60
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
41
Type safe CSS with Reason
cironunes
0
100
Beyond ng new
cironunes
2
190
Animate your Angular apps
cironunes
0
400
Sweet Angular, good forms never felt so good
cironunes
0
62
Sweet Angular, good forms never felt so good
cironunes
0
280
Progressive Angular apps
cironunes
3
870
Angular: Um framework. Mobile & desktop.
cironunes
1
580
Firebase & Angular
cironunes
0
280
Other Decks in Technology
See All in Technology
アジャイル開発とスクラム
araihara
0
160
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
Bounded Context: Problem or Solution?
ewolff
1
210
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Being A Developer After 40
akosma
89
590k
Thoughts on Productivity
jonyablonski
69
4.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
GitHub's CSS Performance
jonrohan
1030
460k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
A designer walks into a library…
pauljervisheath
205
24k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
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