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
70
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
51
Type safe CSS with Reason
cironunes
0
110
Beyond ng new
cironunes
2
210
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
67
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
900
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Firebase & Angular
cironunes
0
290
Other Decks in Technology
See All in Technology
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
160
OCIjp_Oracle AI World_Recap
shinpy
1
160
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
420
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
110
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
330
事業開発におけるDify活用事例
kentarofujii
5
1.3k
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
250
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
370
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
260
Wasmの気になる最新情報
askua
0
180
Featured
See All Featured
Scaling GitHub
holman
463
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Context Engineering - Making Every Token Count
addyosmani
8
300
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