Le Processus « Gutenberg-First » est une méthodologie de conception UX et UI où les designers basent explicitement leur travail dans Figma sur les contraintes et les capacités natives de l’éditeur de blocs WordPress (Gutenberg) et du système Full Site Editing (FSE).
L’objectif principal est d’assurer une traduction fidèle, efficace et économique du design dans l’environnement du CMS, en maximisant l’utilisation des fonctionnalités standard de WordPress et en minimisant le besoin de codage personnalisé coûteux ou d’une architecture Headless complexe.
Caractéristiques clés du processus
| Axe | Description de l’Action | Objectif Atteint |
| Conception Contrainte | Les designers limitent les variantes de leurs composants Figma (tailles, espacements, couleurs) aux Design Tokens définis dans le fichier theme.json de WordPress. | Garantit que toutes les options de design sont éditables par l’utilisateur final via l’interface de l’éditeur Gutenberg sans code supplémentaire. |
| Décomposition en Blocs | Le design de chaque page est décomposé en unités modulaires (Blocs et Patterns) dans Figma, qui correspondent directement à des Blocs Gutenberg existants (ex: core/group, core/button) ou à des blocs customisés planifiés. | Assure la composabilité du design, ce qui est essentiel pour la flexibilité et la maintenabilité d’un thème FSE. |
| Documentation de Handoff | Le designer documente, à côté de chaque composant Figma, le nom exact du Bloc WordPress à utiliser et les réglages spécifiques (couleur, padding, classes CSS) requis. | Facilite le Handoff aux développeurs et aux intégrateurs en leur fournissant une feuille de route claire et en évitant les ambiguïtés d’implémentation. |
| Évite l’Abstraction Inutile | Le processus décourage les solutions de design trop spécifiques ou trop rigides qui nécessiteraient obligatoirement une implémentation Headless coûteuse, favorisant l’efficacité économique. | Optimisation des Coûts et de la Complexité du projet, en tirant pleinement parti du CMS couplé. |