Rôle : Product Designer (en binôme avec le Lead Product Designer / PM gestion autonome de la squad produit)
Entreprise : MONI (ex-Monisnap)
Contexte : Web & Mobile — Migration Vue.js $\rightarrow$ React (Librairie Radix)
Impact clé : Production d’une maquette prospect personnalisée en ~30 minutes (et 2h à une demi-journée pour un partenaire signé).
Bascule dynamique des tokens et variables Figma : déclinaison instantanée de la charte MONI vers Libon
Au sein d'un binôme design resserré, j'ai assuré la gestion autonome de la squad produit tout en co-construisant l'architecture globale du Design System V3 :
Recherche & Benchmark : Analyse approfondie des Design Systems de référence afin d'identifier les standards de l'industrie en matière de tokenisation, de hiérarchie des composants et de séparation Fondations / Composants / Templates.
Rituels Design-Dev bi-hebdomadaires : Co-animation de deux sessions hebdomadaires avec les développeurs pour présenter les composants, lever les blocages d'intégration en amont et valider conjointement la conformité Design & Code.
Contraintes d'intégration & Naming : Alignement des structures de composants sur les exigences fonctionnelles de Radix, tout en préservant les habitudes de nommage historiques de l'équipe Tech (notamment le maintien de termes établis comme
infobox).
Pour rendre le système entièrement agnostique de la marque, chaque valeur de design a été tokenisée sur 4 niveaux d'abstraction :
Raw Data : Valeurs brutes (codes HEX, valeurs en pixels).
Primitive Tokens : Valeurs fondamentales contextualisées sans rôle précis (ex.
pink/400,spacing-1 = 6px).Semantic Tokens : Attribution d'un rôle fonctionnel explicite (ex.
surface/brand-contrast,text-primary).Component Tokens : Variables spécifiques appliquées directement à un composant (ex.
button-primary-background-default).
Les Fondations
Les fondations (couleurs, typographies, grilles, bordures, élévations) centralisent les règles visuelles communes tout en permettant l'injection de thèmes partenaires distincts via des fichiers de tokens interchangeables.
Les fondations (couleurs, typographies, grilles, bordures, élévations) centralisent les règles visuelles communes tout en permettant l'injection de thèmes partenaires distincts via des fichiers de tokens interchangeables.
