/
The process to revise a feature specification

​Emoji :seedling: Feature specification

Table of Contents

Title

Give the component a name.

Description

Briefly explain what the compoennt does, e.g., “An avatar is an image that reperesnts a user or entity.”


Benefit

List the benefits this feature will provide.

Anatomy diagram

Type / image to uplaod a diagram of the compoennt with numberer callouts. Use the basic verison of the component and make sure the example has good copy.


Key to anatomy diagram

  1. Define each of the callouts in your anatomy diagram.



Mockups

Provide a link to mockups for this feature.


​Emoji :face_with_monocle: Specifications

Usage

Give an overview of the component an dhow it’s used, e.g., “Use avatars to identify a user or entity in a product. Typically, users will uplaod their own image, but they may also stick to the deafult image.”


Variations

Provide examples for standard arioations that appear in your product. If possible, these exampels should be cerated with live code for your design system’s repo.


Behavior

Describe how the component behaves in different contexts.


Style

  • describe how the component should be styled, visually. Include informaiton baout alignment, padding, etc., as well as “do” and “don’t” examples.



​Emoji :triangular_ruler: Additional guidance

Content

  • Provide component-specific guidance on content, such as punctuation rules, standard labels, etc.


Accessibility

  • Provide component-specific best practices for accessibilty.


Mobile

  • Provide guidance on how to apply this component in mobile environments.


Best practices

  • if there are industry standars fo this component, list them in this section. Include “do” and “don’t” examples to illustrate each point.


Related

  • List related components or patterns. Include links whenever possible.