Design component template

Before you can get into the nitty-gritty of a component’s specifications, you need to have the basics down. Start by filling in the rows in Component basics: give your component a name, describe what it does, and upload an anatomy diagram with numbered callouts. Use those callouts to create a key and define each element of the component’s anatomy. The purpose of this section is to give the people who use the component an understanding of how everything fits together in it.

This is when you’ll start getting into the different ways to use a component as part of your designs for a larger feature. Describe how the component is used, including its purpose in your design as a whole, then get into how it appears and acts in different contexts. Use live code from the repo for your design system to display different variations. Finally, describe the visual style of the component. Make sure you include examples of what to do and what not to do.

Every component has its quirks. Record them in Additional guidance. Start with content: are there any punctuation rules that are specific to this component? What about standard labels? Write them down, along with any component-specific accessibility concerns and tips for applying the component to mobile environments. If there are industry-standard best practices for how the component gets used, list those, too. Finally, add links to any related components or patterns.