Loris
Olivier
CV

Coup de projecteur · Digital Brains

Un design system pour les scientifiques-bâtisseurs

Notre design system vivait dans Figma, où seuls les designers pouvaient l'utiliser. Nous l'avons reconstruit comme une application web où les product owners scientifiques, les scientifiques et les ingénieurs peuvent construire eux-mêmes de nouveaux workflows, validés automatiquement par rapport à ce qui tourne en production.

01

Introduction

Les product owners scientifiques doivent construire plus vite de nouvelles features dans leur produit. Cela passe par la création de nouveaux workflows, qui doivent être présentés au meeting scientifique hebdomadaire. Une partie de l'équipe réalise aussi des POC et voulait des prototypes plus proches de la réalité.

Nous avons donc construit le design system comme une application, pas comme un fichier : un lieu où ils peuvent assembler, tester et montrer de vraies pièces d'interface sans être designers.

Tokens — couleurs nommées par fonction, copiables en HEX, RGB ou RGBA

Tokens — couleurs nommées par fonction, copiables en HEX, RGB ou RGBA

02

Défi

Le design system était d'abord maintenu dans Figma, avec de nombreux composants et variantes. L'utiliser demandait de comprendre les méthodes propres à Figma, le CSS et le développement frontend. Nous ne voulions pas d'une boîte en carton poussiéreuse remplie de photos jaunies de ce qui avait été fait dans l'application. Il fallait que 1) ce ne soit pas en lecture seule, et 2) que ce ne soit pas l'affaire de la seule équipe design.

Il devait aussi fonctionner pour quatre publics à la fois : les product owners, les scientifiques, les ingénieurs logiciel et l'agent IA. Aucun compromis n'était possible, sinon il ne servirait à personne. Et avec la dette technique et les incohérences entre Figma et la production, il fallait aussi un validateur capable d'indiquer au design system quand un composant, un segment ou une molécule n'était pas à jour dans l'application déployée.

03

Ce que nous avons changé

Nous avons adapté les composants React à une méthodologie commune, puis reconstruit cette méthodologie dans le design system. Chaque nouvel élément, en production ou dans le design system, passe par un validateur automatique. Dans le Component builder, on part d'une molécule ou d'un composant, on le configure, on le fait valider et on le publie.

Nous avons rendu les tokens et la typographie plus agnostiques du vocabulaire du design : les couleurs sont nommées par ce qu'elles font, pas par ce qu'elles sont, et un dictionnaire explique chaque terme de design et de frontend. Les contraintes soulevées par les scientifiques, comme l'accessibilité et l'affordance transmise par les tokens, les molécules et les composants, sont issues de discussions communes sur des cas concrets.

Typographie — police, taille, interlignage et tracking de chaque style

01 / 06

Typographie — police, taille, interlignage et tracking de chaque style

04

Impact réel

Nous avons accéléré de plus de 60 % la validation des nouvelles features et des nouveaux workflows de neuroscience. Tous ceux qui valident ces changements pouvaient ouvrir directement le POC ou le prototype, sans se soucier de la validité des éléments avec lesquels il était construit. Les ingénieurs implémentaient aussi plus vite, grâce aux librairies développées sur le design system.

Avec le recul, nous l'aurions fait bien plus tôt, et nous aurions utilisé Figma comme un pont plutôt que comme source de vérité.

Assistant IA — réponses sur les tokens, composants et termes

Assistant IA — réponses sur les tokens, composants et termes

Coups de projecteur