2024 — Product design · Design system

2024 — Product design · Design system

Designing a design system with motion language and AI-assisted workflows for enterprise platforms

Designing a design system with motion language and AI-assisted workflows for enterprise platforms

Designing a design system with motion language and AI-assisted workflows for enterprise platforms

Présentation

Pluxee (plateforme d’avantages salariés, plus de 5 produits) disposait déjà d’un design system, mais son adoption restait difficile. J’ai rejoint l’équipe Design System (Akim : lead UI, Marie‑Noémie : PM design system, Emmanuel Potdevin : lead product designer) en tant que Product Designer pendant 2 ans.

Mon rôle : améliorer la collaboration design/dev, construire le langage motion et faire monter en échelle le système de tokens.

Défis

Le design system existait déjà, mais il était peu utilisé par les développeurs. Les handoffs étaient lents et il n’y avait pas de workflow clair entre le design et le code. L’équipe manquait aussi d’expertise en motion, ce qui rendait les animations incohérentes. Enfin, la gestion des tokens était éclatée entre plusieurs outils (Token Studio), ce qui compliquait la synchronisation sur trois stacks différentes (React, Flutter, Drupal).

Objectif : rendre le design system réellement utile pour les devs, structurer le langage motion et consolider l’infrastructure de tokens.

Approche

Infrastructure de tokens migrée : passage de Token Studio à Supernova pour synchroniser les tokens sur 3 langages de dev (React, Flutter, Drupal), avec de l’IA pour valider les exports et détecter les incohérences.

Création d’assets motion : composants animés réutilisables dans After Effects, documentés (timing, easing, nombre d’images) pour une intégration directe par les développeurs.

Handoffs design/dev optimisés : workflows rationalisés avec les tokens Supernova et une documentation assistée par IA, faisant passer le handoff de 48 h à 18 h.

Équipe alignée : premier webinar Design System et schémas de flux montrant le rôle de chaque partie prenante, rendant le système visible et utile même pour les non‑designers.

Automatisation par l’IA : workflows testés pour vérifier la cohérence des tokens, générer la documentation et repérer les tokens inutilisés (environ 40 % de travail manuel économisé).

Apprentissage

©Adrien Schaefers

©Adrien S

©Adrien.S