Keeping track of all the components your team uses in its designs can be tricky, especially when your team is growing. The design component template helps you document each one, from the basics like what the component does and its anatomy, to specifics about how it looks and acts in different contexts. There’s even a section for additional guidance, where you can explain component-specific rules for content, accessibility, mobile, and more. Create an entire component library from scratch!
How to use the design component template
Step 1. Start with the basics
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.
Step 2. Lay out the specifications
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.
Step 3. Document tips, tricks, and best practices
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.
Lead Content Designer @ Atlassian
Tony is a Lead Content Designer at Atlassian. He’s a multi-disciplinary technical and content writer who loves setting standards and pushing the boundaries of where content guidance can live.
Content design glossary
Teach writers how to use product names, industry terms, and other content with an A-Z guide.
Create a content strategy plan and organize your editorial calendar.
Customer interview report
Turn customer interviews into insights with the customer interview report.