Andrew's Digital Garden

Documenting components in a Design System - Content

Intros

Naming components is hard, and navigation usually relies on this name Considering adding in a 'also known as' to help demystify synonyms Intros need to cover: my name is x, and what I do is y. Keep it short, tweet-length. Too long and your delaying from other important content, like examples. Keep extra detail for later.

Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Examples

The most important part of effective documentation Show, don't tell. Pair code with examples when possible Consider depicting the component's anatomy too Don't go wild with combinations, keep those to testing environments. You don't have to show every single possibility Show states without requiring interaction If themes exist, demonstrate it

Design reference

To produce quality guidelines, you'll need content architecture, writing conventions, good visuals, etc. Consider categories such as: use when, visual style, behaviour, editorial, accessibility, dos/donts Pictures are good, but words are easier to compose and update. Consider the tradeoff

[[20211108131544-documenting-components-design-systems]]

[[components]] [[design]] [[designsystem]]

Documenting components in a Design System - Content