Close

Categories

Design component template

by Tony Starr, Lead Content Designer @ Atlassian

Create a library of carefully documented design components

Use template
Design component template

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.

Step 3. Document tips, tricks, and best practices
Atlassian

Tony Starr

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

    Atlassian

    Content design glossary

    Teach writers how to use product names, industry terms, and other content with an A-Z guide.

    Use template Learn more
  • Content strategy

    Atlassian

    Content strategy

    Create a content strategy plan and organize your editorial calendar.

    Use template Learn more
  • Customer interview report

    Atlassian

    Customer interview report

    Turn customer interviews into insights with the customer interview report.

    Use template Learn more