What I've learned building automated docs for Ansarada's design system

Transcript

1. What I’ve learned building automated docs for ACE Ciro Nunes DesignOps wizard
2. @cironunesdev
3. Alex Leon The people involved Anthony Muscat Chantelle Staples
5. Agenda 1. A bit of history 2. The journey towards automated docs 3. What we built so far 4. Takeaways and next steps
6. Ansarada Common Elements a.k.a ACE
7. 39 Components and best practices
8. 130 Design tokens
13. The process of creating and documenting components was completely manual, time consuming and error prone
16. Challenges
17. Challenges • Keep it up-to-date • Save time • Avoid errors • Make it fun
18. Challenges • Keep it up-to-date • Save time • Avoid errors • Make it fun Remedies
19. Challenges • Keep it up-to-date • Save time • Avoid errors • Make it fun Remedies • Automation ✓ Generate docs from code • Code snippets
20. We decided to rebuild our docs from scratch thinking in automation from day one
21. The journey towards an automatically documented design system
22. The Orbit project (automated docs)
23. The Orbit project (automated docs) 1 Survey & Research
24. The Orbit project (automated docs) 1 Survey & Research 2 Workshop
25. The Orbit project (automated docs) 1 Survey & Research 2 Workshop 3 Planning
26. The Orbit project (automated docs) 1 Survey & Research 2 Workshop 3 Planning 4 Execution (design & code)
27. The Orbit project (automated docs) 1 Survey & Research 2 Workshop 3 Planning 4 Execution (design & code) 5 Release MVP, gather feedback & Iterate
28. 1 . Survey & Research
39. 2 . Workshop
41. 3 . Planning
42. MVP
43. MVP 1. Generate docs from code
44. MVP 1. Generate docs from code 2. Use existing documentation
45. MVP 1. Generate docs from code 2. Use existing documentation 3. Improve the look and feel
47. 4. Design & code
52. 5. Release & feedback
55. What we built so far
56. Demo time!
57. What I’ve learned
58. Design systems are more than just reusable components
59. Code comments are documentation
60. Types are documentation too !
61. Markdown is perfect to write documentation "
62. Takeaways & next steps
63. Takeaways
64. Takeaways 1. Reuse existing tools
65. Takeaways 1. Reuse existing tools 2. Design systems are more than just components
66. 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!
67. Next steps
68. Next steps 1. Include design tokens (Sass docs)
69. Next steps 1. Include design tokens (Sass docs) 2. Polish and implement new features
70. Next steps 1. Include design tokens (Sass docs) 2. Polish and implement new features 3. Make it a framework
71. Next steps 1. Include design tokens (Sass docs) 2. Polish and implement new features 3. Make it a framework 4. Open source it
76. @cironunesdev
77. What if I use Vue?