Accueil / Réalisations / Migration et structuration d’un Design System sur Figma

Migration et structuration d’un Design System sur Figma

Sur la plateforme SaaS UBSTREAM, on commençait à sentir que le système de conception actuel atteignait ses limites. Entre le manque de cohérence, la complexité de maintenance et les difficultés de collaboration entre les équipes Design et Développement, il devenait urgent d’agir. L’objectif du projet était clair : repenser l’organisation du Design System et faire de Figma l’outil central pour fluidifier la conception, accélérer les allers-retours et offrir une expérience utilisateur bien plus homogène.

Contexte & problématique Au fur et à mesure que le produit prenait de l’ampleur, les interfaces commençaient à devenir vraiment galères à maintenir : les composants se multipliaient, les variations partaient dans tous les sens, la documentation était absente, et il y avait un vrai décalage entre les maquettes et ce qui était développé. Du coup, le besoin était clair : mettre en place un système plus solide, capable de monter en charge, où designers et développeurs pourraient s’appuyer sur une seule et même source de référence.

Client

Ubstream (digital product publishing, SaaS)

Type

Migration

Objectif

• d’harmoniser les interfaces de la plateforme,
• d’améliorer la collaboration entre Design, Product et Tech,
• de réduire le temps de conception grâce à des composants réutilisables,
• de faciliter l’évolution future du produit.

Mon rôle

J’ai piloté la migration complète du Design System vers Figma : audit de l’existant, réorganisation des composants, et création d’une bibliothèque UI structurée avec variantes, propriétés et patterns réutilisables. J’ai aussi géré les thèmes clair/sombre, réalisé des prototypes haute-fidélité, documenté les règles d’utilisation, et accompagné les équipes pour faciliter l’adoption du nouveau système.

En parallèle, j’ai travaillé main dans la main avec les équipes Produit et Développement pour garantir une cohérence entre les besoins utilisateurs, les contraintes techniques et les choix de conception.

Pourquoi cette migration ?

Gain de temps significatif sur la réalisation des écrans

Utiliser des variantes et des auto-layouts avancés pour accélérer l’assemblage des interfaces et simplifier leur adaptation aux différents breakpoints et devices.

Gain en maintenabilité et évolutivité

Grâce aux bibliothèques partagées et à la gestion des composants avancée, l’équipe design a pu renforcer la cohérence UI et simplifier les mises à jour futures.

Une meilleure projection grâce à des prototypes interactifs fidèles

Une immersion plus proche de l’expérience finale, facilitant la prise de décision des parties prenantes et réduisant le besoin d’ajustements tardifs.

Une collaboration renforcée entre designers, développeurs et product owners

Les développeurs ont pu accéder instantanément aux spécifications des composants et extraire les assets sans avoir à attendre des exports manuels.
Les feedbacks des parties prenantes ont été intégrés plus rapidement, accélérant les itérations et améliorant la qualité finale du produit.

Administration des composants

Grâce aux propriétés de composants, il est possible d’adapter un composant principal à différentes variantes sans dupliquer inutilement les éléments, optimisant ainsi la conception et la maintenance du Design System.

Chaque composant peut contenir des sous-composants, qui possèdent leurs propres propriétés configurables. Ces propriétés permettent d’ajuster dynamiquement l’apparence et le comportement d’un composant sans le détacher de son instance principale.

Utilisation des variables de couleurs

Palette de couleurs principale

Chaque couleur a une version claire et une version sombre, stockées sous forme de variables.
On organise ces variables en collections, ce qui permet de regrouper toutes les couleurs d’un même thème.

Application aux composants

Au lieu d’utiliser une couleur hexadécimale statique, on applique une variable de couleur à chaque élément (ex. : le texte dans un bouton utilise --BU__txt, le fond d’un bouton --BU_bgNeutral).
Lorsqu’on bascule entre le thème clair et sombre, toutes les instances des composants mettent automatiquement à jour leurs couleurs selon les variables définies.

Assets pour l’aide à l’intégration des écrans

Annotations et documentation visuelle

Mise en avant des zones clés d’un écran pour indiquer les éléments à intégrer.

Prototypes interactifs

Aide aux développeurs via des maquettes navigables pour mieux comprendre l’enchaînement des écrans.

Référencement des assets

Indication des icônes, illustrations et fichiers à utiliser avec leurs formats et résolutions.

Feedback en temps réel

Suivi des intégrations, validation des implémentations et ajustements si nécessaire.

Résultats & impact

Nous avons mis en place un Design System plus solide, facile à maintenir et à faire évoluer. Résultat : une meilleure cohérence visuelle sur l’ensemble de la plateforme, moins de frictions entre designers et développeurs, et un processus de conception bien plus rapide grâce à des composants réutilisables. Du coup, les équipes peuvent itérer plus vite sur le produit.