Coding Design Systems - ep13 - Documenting design system, with Gaël Poupard

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro: Welcome Gaël Poupard, Bootstrap core maintainer and Lead design developer at Onepoint 02:34 - Inheritance in design systems 04:57 - Working with the French government design system 07:27 - Search in documentation, the best way 14:07 - Improving documentation discoverability 17:02 - Using an open source design system as a foundation 20:03 - Burning a11y into your design system 21:09 - Automating callouts to remind best practices in documentation 29:43 - Architecturing your design system documentation 37:48 - Using stories to document components 44:15 - Using custom components to power your documentation 47:08 - Every layout, the layouts’ framework 49:54 - Easter egg: making your documentation enjoyable 54:07 - Outro

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

In this episode, we scratch the surface of writing good documentation for your design system. Successful metrics, discoverability, searching, references, architecture, etc. We also discuss the best practices and how to nudge your people to work on and with your documentation using custom components dedicated to your documentation pages.

We go through documentation of open source design system projects like Bootstrap, Boosted, Tailwind, and the ‹div›RIOTS’ dockit-core framework.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• 🐥 @ffoodd_fr: https://twitter.com/ffoodd_fr

• https://www.ffoodd.fr/

• Why you should use open-source component libraries in your Design System: https://backlight.dev/mastery/why-you-should-use-open-source-component-libraries-in-your-design-system

• Best Web Components libraries for Design Systems: https://backlight.dev/mastery/best-web-components-libraries-for-design-systems

• Bootstrap Documentation: https://getbootstrap.com/docs/5.1/

• Boosted design system made on Bootstrap: https://boosted.orange.com/docs/5.1/getting-started/introduction/

• “dockit-core”, the ‹div›RIOTS documentation framework: https://studio.backlight.dev/edit/4BeMe20hqOWTkdUL2NuJ/introduction/doc/introduction.md?p=doc

• Tailwind documentation: https://tailwindcss.com/docs/installation

• Web Components design systems with Thomas Allmer: https://backlight.dev/sessions/coding-design-systems-web-components-design-system-with-thomas-allmer?utm_campaign=sessions%3Acds

• A11y in your design system with Ben Myers: https://backlight.dev/sessions/coding-design-systems-accessibility-(a11y)-for-your-design-systems-with-ben-myers?utm_campaign=sessions%3Acds

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 Georges Gomes: https://twitter.com/georges_gomes

• 🐥 m4dz: https://twitter.com/m4d_z