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:   / ffoodd_fr  
https://www.ffoodd.fr/

Why you should use open-source component libraries in your Design System: https://backlight.dev/mastery/why-you...
Best Web Components libraries for Design Systems: https://backlight.dev/mastery/best-we...
Bootstrap Documentation: https://getbootstrap.com/docs/5.1/
Boosted design system made on Bootstrap: https://boosted.orange.com/docs/5.1/g...
"dockit-core", the ‹div›RIOTS documentation framework: https://studio.backlight.dev/edit/4Be...
Tailwind documentation: https://tailwindcss.com/docs/installa...

Web Components design systems with Thomas Allmer: https://backlight.dev/sessions/coding...
A11y in your design system with Ben Myers: https://backlight.dev/sessions/coding...

🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=s...
🐥 Georges Gomes:   / georges_gomes  
🐥 m4dz:   / m4d_z