We have a custom built app/website that contains a showcase (or “style guide”) of all the components available in the design system.
The documentation for each component is quite simple: we have a “tab” where we show all the different variants of the component, a tab with the classic list of props (generated via comments in the PropTypes declarations) and a tab containing a “playground” where the user can see an example of a component, change its properties and see it update live in the browser. Now we are in the process of adding a new tab, where the designers can write their own specific documentation for each component (eg. DOs/DONTs, when/how to use a component in a UI design, etc). For this one we are probably going to use MDX (https://github.com/mdx-js/mdx) to allow them to use Markdown but also add real code for components.

If you need more details, just ping me and I can be more specific :)

Written by

Passionate web designer & developer. In love with Atomic Design, Design Systems & CSS architecture. Attendee/speaker/organiser of tech conferences and meetups.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store