Design component template screenshot preview

Design component template

Created by:

Atlassian logo

Create a library of carefully documented design components

Categories

  • Design
  • Page Template

KEY FEATURES

  • Documentation

  • Requirements

  • Knowledge Base

Design component template screenshot preview

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

  1. 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.

  2. 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.

  3. 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.

Related templates

Design

Content design glossary

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

Design

Content strategy

Map out your content strategy and organize your editorial calendar

Product Management

Customer interview report

Turn customer interviews into insights with the customer interview report.