Le Workflow se concentre sur les tâches ou les processus internes de l’équipe, du système, ou de l’entreprise, souvent sans interaction directe de l’utilisateur final.
- Portée: Il décrit la séquence d’étapes et de conditions nécessaires pour qu’une tâche spécifique soit accomplie ou qu’un système fonctionne.
- Focus: Il est souvent orienté vers le système, les données, les règles métier, ou le processus d’équipe (par exemple, un workflow de validation de contenu, un workflow de paiement côté serveur, ou un workflow de design/développement).
- Exemple dans Figma: Le processus qu’un designer doit suivre pour livrer un composant (Design > Révision PM > Approuvé > Dev prêt).
Workflow de livraison d’un design
| Étape | Rôle Principal | Action Clé | Focus et Justification |
| 0. Architecture de l’Information (AI) | Architecte d’Information / UX Designer | Définition de la structure : cartographie des données, arborescence, navigation, taxonomie, organisation du contenu et des composants. | (Nouvelle Étape) : Cette phase garantit que la structure est logique et que les noms des composants et des champs sont standardisés avant le design visuel. |
| 1. Design | Designer | Création des maquettes, itération UI/UX sur la base des travaux d’AI et des spécifications PM. | Le designer travaille dans le cadre défini par l’AI. |
| 2. Révision PM | Chef de Produit (PM) | Validation que le design atteint les objectifs métier et répond aux spécifications fonctionnelles. | Vérification de l’alignement stratégique. |
| 3. Approuvé | Designer / PM | Accord sur la solution finale. | Le design est stable et validé. |
| 4. Documentation | Designer / Documentaliste Technique | Nettoyage et spécifications détaillées : Ajout de la documentation des variantes, de l’accessibilité (WCAG), de la sémantique et des cas d’usage. | (Nouvelle Étape) : Essentielle pour le Handoff. Elle assure que les développeurs et les autres designers comprennent comment et quand utiliser le composant. |
| 5. Dev Prêt | Designer / Développeur | Le Designer publie le composant dans la bibliothèque. Le Développeur valide que le design, l’AI et la documentation sont complets et réalisables. | Le package final est prêt pour la construction. |
AI et Documentation dans le Workflow d’un Composant
1. L’étape de l’Architecture de l’Information (AI)
Pour un composant, l’AI est fondamentale et se déroule en amont. Elle consiste à définir le modèle mental du composant pour les designers et les développeurs.
- Nomination Canonique : Déterminer le nom unique et standard du composant (ex:
Bouton,Carte de Profil,Champ de Saisie). Ce nom doit être cohérent dans Figma, le code, et la documentation. - Structure et Propriétés : Définir la structure interne (les sous-éléments) et les propriétés (variables) qui vont gouverner le composant.
- Exemple (Bouton) : Propriétés comme
État (Défaut/Hover/Désactivé),Taille (Petit/Moyen/Grand),Type (Primaire/Secondaire), et la propriété de contenuTexte du Bouton.
- Exemple (Bouton) : Propriétés comme
- Emplacement (Taxonomie) : Décider où ce composant s’inscrit dans l’arborescence du Design System (ex: Composants de base, Navigation, Conteneurs).
Application dans Figma : L’AI se traduit par le nommage des composants et des variants dans Figma (ex: Button/Primary/Large/Hover) et la définition des variables et des modes pour les thèmes et les états.
2. L’étape de la documentation
Une fois que le design du composant est approuvé, la documentation permet de transformer une simple maquette en un artefact réutilisable et maintenable.
- Directives d’Utilisation (Do’s & Don’ts) : Expliquer quand utiliser le composant (cas d’usage appropriés) et quand ne pas l’utiliser, souvent avec des exemples visuels.
- Accessibilité (A11Y) : Spécifier les exigences d’accessibilité (ex: contrastes de couleur minimum, comportement de focus clavier, rôle ARIA sémantique pour le développeur).
- Comportement Dynamique : Documenter les interactions et les états non évidents (animation de chargement, gestion des erreurs, comportement de truncate du texte).
- Spécifications Techniques : Fournir les noms de tokens de design utilisés (couleur, espacement) et le snippet de code (souvent lié à l’outil de documentation externe comme Storybook).
Application dans Figma : Le designer ajoute une page dédiée dans Figma pour le composant, ou des « Cover Pages » contenant les règles d’utilisation, des annotations détaillées sur les Frames des variantes, et le lien vers la documentation externe.
Le cycle de vie du Composant
L’intégration de l’AI et de la Documentation assure que lorsque le composant passe à l’état « Dev Prêt », il est accompagné de toutes les informations nécessaires, rendant le Handoff (passage de relais) aux développeurs beaucoup plus fluide et précis.
C’est cet ajout de contexte et de règles (AI et Documentation) qui distingue un simple calque de design d’un véritable composant de système de design.