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!
Come usare questo il modello design component
Passaggio 1. Inizia dagli elementi di base
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 è un Lead Content Designer di Atlassian. È un tecnico multidisciplinare e un content writer che adora fissare degli standard e spingersi oltre i limiti delle guide di stile redazionali.
Content design glossary
Teach writers how to use product names, industry terms, and other content with an A-Z guide.
Report su intervista con il cliente
Trasforma le interviste con i clienti in informazioni utili con il report sull'intervista con il cliente.
Use our design decision template to review design options, present design examples, and log design decisions.