Documentation

Je conçois une "carte avec des repères" et des instructions détaillées sur l'emplacement des ressources dans la documentation, afin d'aider les utilisateurs à trouver les éléments essentiels tels que les actifs, les fichiers sources, le code, les principes de conception, les styles d'animation et les directives d'utilisation des composants. Je veille à ce que les consommateurs du système de conception sachent où trouver la structure détaillée des éléments, les variantes, les astuces pour un travail optimisé et les plugins recommandés, en choisissant une plateforme appropriée et en rédigeant des instructions claires.

Mes objectifs

La logique

Avant de commencer à télécharger mes éléments et mon code, je pense à la structure et au langage que j'utilise. Je m'assure de rendre le contenu prévisible et facile à découvrir. Je veille à ce que tout le monde comprenne de quoi je parle.

L'itération

J'expérimente différentes approches, je les mets en situation réelle, je recueille des retours et j'adapte rapidement. La boucle de rétroaction est importante, car les besoins de l'organisation évolueront et se développeront au fil du temps.

La pertinence

Je rédige les instructions dans un langage humain compréhensible par tous.

Facilement recherchable

J'économise le temps de l'utilisateur et je rends la consultation des documents facile à parcourir en les organisant de manière à ce qu'ils puissent être facilement parcourus.

Mes outils

Je travaille principalement sur Figma avec Figma Studio en raison de son aspect collaboratif, de sa facilité d'utilisation et de sa multitude de plugins disponibles. Cependant, lorsque j'ai besoin de fonctionnalités supplémentaires telles que l'inclusion de bouts de code, j'utilise Zeroheight. Son éditeur me permet d'ajouter ou de modifier des pages facilement. De plus, les modèles prédéfinis de Zeroheight sont d'une grande aide pour configurer la documentation de conception dès le début. Ils fournissent des guides sur les bonnes pratiques, les erreurs à éviter, l'ajout de liens Storybook pour le code, l'ajout de liens Figma et la description des composants, entre autres. Une fois que tout est prêt, je peux publier le site et le partager avec d'autres personnes, qu'elles soient internes ou externes à l'équipe.

Mes composants

Pour fournir des détails sur l'endroit, le moment et la raison de choisir un composant, je m'assure d'inclure les éléments suivants dans la documentation :

Explication brève : Une description concise du composant et de son objectif.
Emplacement dans le flux de l'utilisateur : J'explique où le composant se situe dans le flux de l'utilisateur, à quel moment il est utilisé et comment il contribue à l'expérience globale.
Exemples concrets : J'inclus des exemples vivants du composant en action, illustrant son utilisation dans différentes situations.
Extraits de code : Je fournis des extraits de code pertinents pour aider les développeurs à implémenter le composant correctement.
Liens Figma : J'intègre des liens Figma pour permettre aux utilisateurs de visualiser et d'accéder directement aux fichiers de conception liés au composant.
Bonnes pratiques et erreurs à éviter : J'inclus des conseils sur les bonnes pratiques d'utilisation du composant, ainsi que les erreurs courantes à éviter.
Combinaisons avec d'autres composants : J'explique comment le composant peut être combiné avec d'autres éléments pour créer un flux utilisateur fluide et cohérent.
Règles spécifiques : J'indique toute règle spécifique ou restriction à prendre en compte lors de l'utilisation du composant.
Statut du composant : Je précise l'état actuel du composant, par exemple s'il est en cours de développement, approuvé ou déprécié.
Personne responsable : J'indique la personne ou l'équipe responsable du composant, afin que les utilisateurs sachent vers qui se tourner en cas de questions ou de problèmes.

En incluant ces détails dans la documentation, je m'assure que les utilisateurs disposent de toutes les informations nécessaires pour comprendre, utiliser et combiner le composant de manière efficace et cohérente.