WordPress intègre son nouveau design system dans Figma : comment y accéder

L’équipe de design de WordPress a annoncé, le 7 novembre 2024, la sortie d’une toute nouvelle bibliothèque de design system sur Figma. Cette initiative vise à offrir aux concepteurs travaillant dans l’écosystème du CMS une gamme complète d’outils pour améliorer leur efficacité et la cohérence de leurs projets au sein du logiciel de prototypage. Ce nouvel ensemble de composants, accessible directement sur Figma, permet aux utilisateurs de créer des maquettes tout en respectant les normes esthétiques et fonctionnelles de WordPress.

Qu’est-ce que la bibliothèque de design system WordPress pour Figma ?

La nouvelle bibliothèque de design system pour WordPress est un ensemble complet de composants visuels et de styles, spécialement conçu pour simplifier le travail des designers de la communauté WordPress. Figma, devenu un standard pour la création de prototypes, permet à l’équipe de design de centraliser les composants et d’assurer une cohérence visuelle et fonctionnelle dans les projets.

Voici les principales caractéristiques de cet ensemble :

• Bibliothèque de composants étendue : elle inclut des éléments essentiels tels que les boutons, les formulaires, les icônes et les menus, organisés de manière à faciliter leur réutilisation dans les interfaces WordPress.
• Tokens de style : ils permettent de gérer des éléments visuels comme le rayon, l’élévation, la couleur et la typographie, assurant une uniformité dans les designs.
• Stickers pratiques : ils incluent des composants individuels, ainsi que des éléments plus complexes comme l’éditeur de plein écran et l’éditeur de site.

« L’objectif de cette ressource est de simplifier le processus de conception pour les personnes travaillant dans l’écosystème WordPress », explique James Koster, designer chez Automattic. En regroupant tous les éléments nécessaires en un seul endroit, les designers peuvent ainsi passer moins de temps sur les tâches répétitives et peuvent se concentrer davantage sur l’aspect créatif.

Pourquoi une bibliothèque WordPress sur Figma ?

Figma est un outil de conception particulièrement populaire, utilisé non seulement pour ses fonctionnalités de prototypage avancées, mais aussi pour ses capacités collaboratives en ligne. Avec cette nouvelle bibliothèque, WordPress souhaite rendre la conception plus fluide et intuitive pour les membres de sa communauté, qu’ils travaillent directement pour WordPress.org ou dans d’autres organisations. Cette nouvelle mouture doit donc permettre :

• L’optimisation des flux de travail : en centralisant les composants visuels dans Figma, les designers peuvent facilement accéder aux éléments dont ils ont besoin, les modifier ou les personnaliser en fonction de leurs besoins. Il est ainsi possible de créer des interfaces qui respectent les normes de WordPress sans avoir à repartir de zéro à chaque projet.
• La réflexion du code en place : la bibliothèque de design est alignée autant que possible avec le code de WordPress. Les éléments visuels que les concepteurs utilisent sont en cohérence avec ceux disponibles dans le code, ce qui réduit les écarts entre la conception et le développement.
• La facilité de personnalisation : Figma propose des options de personnalisation grâce aux propriétés et variantes intégrées aux composants, ce qui rend leur utilisation intuitive et rapide. La bibliothèque encourage ainsi les concepteurs à adapter les éléments sans avoir à maîtriser des outils complexes.

Comment accéder à la bibliothèque WordPress dans Figma ?

L’équipe de design de WordPress a parallèlement annoncé que cette bibliothèque serait régulièrement mise à jour. En effet, chaque nouvelle version de Gutenberg et chaque version majeure de WordPress après la 6.8 entraîneront l’évolution de la bibliothèque, alors que le CMS vient de déployer sa version 6.7. Cette approche doit assurer aux concepteurs de travailler sur un outil constamment actualisé avec les derniers composants et les styles les plus récents.

Les membres de l’équipe de design de WordPress auront un accès automatique à la bibliothèque dans leurs nouveaux fichiers Figma au sein de l’organisation WordPress.org. Cependant, les concepteurs travaillant pour d’autres structures peuvent également en profiter en dupliquant simplement le fichier depuis la page de la communauté WordPress sur Figma, puis en le publiant comme une bibliothèque.