Avant de pouvoir entrer dans le vif du sujet, il faut connaître les caractéristiques de base d'un composant. Commencez par remplir les lignes de la section Bases du composant : donnez un nom à votre composant, décrivez ce qu'il fait et téléchargez un diagramme anatomique avec des légendes numérotées. Utilisez ces légendes pour créer une clé et définir chaque élément de l'anatomie du composant. L'objectif de cette section est de permettre aux personnes qui utilisent le composant de comprendre comment tout s'y assemble.

C'est à ce moment que vous commencerez à vous intéresser aux différentes façons d'utiliser un composant dans le cadre de vos designs pour une fonctionnalité plus importante. Décrivez comment le composant est utilisé, y compris sa fonction dans votre design dans son ensemble, puis expliquez comment il apparaît et agit dans différents contextes. Utilisez le code en direct du dépôt pour votre système de design afin d'afficher différentes variantes. Enfin, décrivez le style visuel du composant. Veillez à inclure des exemples de ce qu'il faut faire et ne pas faire.

Chaque composant a ses singularités. Enregistrez-les dans Conseils supplémentaires. Commencez par le contenu : y a-t-il des règles de ponctuation spécifiques de ce composant ? Qu'en est-il des étiquettes standard ? Notez-les, ainsi que les problèmes d'accessibilité spécifiques de ce composant et les conseils pour l'appliquer aux environnements mobiles. S'il existe de bonnes pratiques standard pour l'utilisation du composant, indiquez-les également. Enfin, ajoutez des liens vers tout composant ou modèle connexe.