Retour

Design System - 2025



Contexte

Suite à des difficultés d'utilisation de deux Design Systems différents, les équipes designers et développeurs ont discuté d'une fusion des 2 Design Systems des marques du groupe Figaro (Le Figaro et Madame Figaro) en 1 seul Design System "web". Ce projet a été réalisé avec l'aide de 2 designers et de 2 développeurs.



Réalisations et méthodologie
  • Comparaison des noms des composants entre le design et la prod (collaboration avec les développeurs)
  • Mise en commun et réorganisation des composants côté design
  • Création d'une page par composant, avec les correspondances pour chaque marque du groupe (Le Figaro, Madame Figaro et Gala)
  • Ajout des états de hover et de focus sur la page de chaque composant


Difficultés et contraintes
  • Beaucoup de différences entre design et production remise au propre des composants
  • Des composants non existants pour certaines marques ajout des composants manquants
  • Éviter de "casser" les Design Systems existants déplacement des composants par petits groupes


Impacts finaux
  • Meilleure organisation des composants
  • Facilitation d'utilisation du Design System par les PO, développeurs et designers
  • Réduction du nombres de fichiers à utiliser
  • Simplification de l'ajout de nouveaux composants pour toutes les marques
  • Intégration des composants de la refonte du site Gala.fr


Améliorations futures
  • Ajouter et utiliser les tokens Figma

Exemple composant

Le composant Ranking profile magazine correspond au profil magazine rencontré dans les listings des sites des marques.
Chaque variant correspond à un emplacement différent dans le listing. Il sont constitués des propriétés :

Exemple composant

Le composant Buttons correspond au différents styles de boutons que l'on peut rencontrer sur les sites des marques.
Il existe aussi, pour certains sites, des versions sombres pour certaines pages.
Il sont constitués des propriétés :

Affichage des états

Les états des composants sont présentés directement sur la page du composant. Dans cet exemple, le composant étant un Organisme, on précise les liens des autres composants (molécules) où se situe leurs états.

Pour l'état focus, on liste également l'ordre de navigation au clavier (tabulation)