Xavier Bellion
ProjetsDesign System
Design System

SaaS Component Library — Fintech

Architecture unifiée d'une librairie Figma multimarques pour une équipe de 15 designers — tokens natifs, gouvernance, documentation interactive.

Année
2024
Durée
4 mois
Rôle
Lead Designer / Figma Architect
Client
Fintech SaaS (confidentiel)

Le défi

Trois produits, trois librairies Figma divergentes, quinze designers qui tirent à hue et à dia. Aucune convention de nommage commune, 1 200+ composants en doublon, et une dette de design qui ralentit chaque sprint. L'objectif : remettre tout le monde au même niveau sans tout casser.

Résultats clés

400+
composants unifiés
3
thèmes / marques
0
composants en doublon

Processus

De l’audit au déploiement.

1

Découverte & Audit

Inventaire complet des trois librairies — 1 200+ composants analysés, patterns identifiés, dette documentée. Interviews avec 8 designers pour cartographier les pain points réels.

2

Architecture & Tokens

Conception de l'arborescence de tokens sémantiques (primitives → sémantiques → composants). Définition des 3 thèmes marque avec Figma Variables natives. Validation par workshop avec les tech leads.

3

Build & Documentation

Construction de la librairie unifiée — 400+ composants, variants exhaustifs, auto-layout strict. Rédaction de la documentation interactive avec exemples d'usage et règles d'utilisation.

4

Déploiement & Formation

Migration progressive des équipes product. Deux ateliers de formation (4h chacun). Mise en place du comité de gouvernance mensuel. Handoff aux design leads de chaque produit.

La solution

Architecture pensée pour durer.

Architecture des tokens

Trois niveaux de tokens : primitives (valeurs brutes), sémantiques (rôles) et composants (contextes précis). Figma Variables pour les modes light/dark et les trois marques en un seul toggle.

Système de composants

400+ composants organisés en atomes, molécules et organismes. Chaque composant dispose de variants exhaustifs, d'états interactifs complets et d'une documentation inline directement dans Figma.

Documentation vivante

Une documentation Notion connectée à la librairie Figma — exemples embarqués, règles d'usage, do & don'ts. Mise à jour automatique à chaque release via un workflow Figma → Notion.

Résultats

Impact mesuré.

400+
composants livrés
-78%
de duplication
plus rapide

Xavier a transformé notre chaos en système. En quatre mois, on est passé de trois librairies incompatibles à une source de vérité que toute l'équipe utilise avec plaisir. La gouvernance qu'il a mise en place tient encore un an après.

Head of Design, Fintech SaaS

Projet suivant →STS Nissan