ModèleCraft2 min de lecture
À quoi ça sert
Faire lire le même fichier Figma de la même façon aux designers, aux PO et aux développeurs.
Les questions que ça aide à trancher
Où dans le cycle de design
Un fichier Figma partagé entre designers, PO et développeurs a besoin d’une signalétique lisible par tous : ce qui est en exploration, ce qui peut être discuté, ce qui est gravé pour le développement.
Quatre statuts, une convention de nommage des pages, et quelques règles de publication et de partage. Les icônes font partie du nom des pages : elles se lisent dans la liste des pages avant même d’ouvrir le contenu.
| Signalétique | Statut |
|---|---|
🔍 [Explo] | Sujet en cours d’exploration par les designers. Pas prêt à être présenté. |
🚧 [WIP] | Conception d’une fonctionnalité en cours. Le travail peut être vu et discuté avec les designers, les PO et les développeurs. |
✅ [Ready to dev] | Le prototype est finalisé et peut être livré dans un ticket pour être implémenté pendant un sprint. |
📦 [Archive] | Section qui regroupe les archives d’écrans ou de parcours non utilisés sur le projet. |
Créer un espace de travail WIP (work in progress) dans une nouvelle page, nommée ainsi, icône incluse :
🚧 [Design-WIP] N° ticket US - Scénario - Écrans
Dans cette page, on peut créer tous ses écrans, tests et recherches. Les sous-parties suivent le titre « Scénario X ».
Aucun élément de la page WIP ne sera utilisé pour le développement. Pour cela, on crée une page « Ready to dev », étape suivante.
Cet espace est réservé au travail validé par l’équipe, gravé dans le marbre pour l’implémentation par les développeurs. Les écrans seront utilisés tels quels : ils doivent être validés et documentés pour la livraison.
S’il faut ajuster un flux déjà en Ready to dev, dupliquer la page Figma et faire les modifications sur la copie. L’intégrité du parcours validé ne se touche pas.
Il existe deux catégories de pages Ready to dev : le prototype et la spécification.
Cette page contient le prototype interactif. Tous les écrans ont été validés en amont avec le PO, et le prototype peut servir à une démonstration. Créer une nouvelle page nommée ainsi, icône incluse :
✅ ▶️ [Ready-to-Dev] - N° de ticket - fonctionnalité
Cette page contient les écrans avec leurs spécifications. C’est l’étape finale : tous les écrans et le prototype ont été validés. Les spécifications donnent à l’équipe front des informations brèves : taille d’écran, marges internes et externes, taille de police, couleurs, zones interactives, règles d’affichage. Rester simple : la spécification complète les écrans, elle ne les remplace pas.
✅ 📐 [Ready-to-Dev] - N° ticket - fonctionnalité
Pour faciliter la publication d’une section passée en Ready to dev, utiliser le plugin Trello dans Figma : il publie automatiquement la maquette dans le ticket Trello.
Pour partager le travail avec l’équipe, utiliser l’adresse de la page ou le bouton « Partager ». Raccourci clavier : Cmd + L copie le lien vers la frame sélectionnée. Les adresses de partage se mettent à jour d’elles-mêmes, et tout le monde peut commenter les écrans pour une question ou une suggestion ; le commentaire en garde une trace.
Après validation des écrans Ready to dev, documenter le travail dans l’outil de documentation de l’équipe, à côté du ticket.
