France Télévisions | Design System Designer | Oct. 2023 - Sept. 2026
Structuration et évolution d'un design system scalable pour un écosystème multi-plateformes (11 codebases). Tokens, composants et gouvernance pour améliorer cohérence et scalabilité.
France Télévisions a lancé une refonte complète de toutes ses surfaces produit : Web, applications mobiles et TV. Aucun Design System n'existait, tout était à créer de zéro, avec une deadline de mise en production fixée à début 2025 : un calendrier très serré pour un périmètre aussi large.
J'ai rejoint en octobre 2023 une équipe constituée spécifiquement pour ce projet. La contrainte principale : le périmètre complet n'était pas encore défini au démarrage. Il fallait poser une architecture de tokens sémantiques suffisamment agile et scalable pour absorber les évolutions à venir, tout en permettant aux équipes de continuer à livrer en parallèle.
L'architecture repose sur deux niveaux : des tokens core (ex : color/gray/400 ou spacing/300) qui définissent les valeurs de base, et des tokens sémantiques reliés à ces valeurs core pour porter le sens (état, rôle, contexte). Les tokens couvrent couleurs, typographie, espacement, border (radius, width), gradients et sizing (icons, assets). Le système compte plus de 850 tokens à gérer, répartis entre des tokens core et des tokens sémantiques majoritairement communs à tous les supports, complétés par des tokens spécifiques à chaque plateforme.
La sémantique est fortement orientée états d'interaction, avec des règles différenciées par support :
Donner une cohérence systémique à des surfaces aussi différentes (mobile tenu en main, TV regardée à distance, interface web) est l'un des défis centraux du projet. Chaque support dispose de sa propre librairie Figma, tout en partageant la même base core. L'ensemble est décliné en dark mode.
Les tokens sont gérés via Tokens Studio et synchronisés avec les variables Figma, puis poussés sur GitLab via merge request. Un bot automatisé commente chaque MR en listant les changements par plateforme et en signalant les éventuels breaking changes, avant validation par le lead tech DS. Ce pipeline garantit que les 11 codebases reçoivent les mises à jour de façon contrôlée et traçable.
Près de 80 composants ont été conçus en Atomic Design, déclinés selon les contraintes de chaque support.
La documentation est centralisée dans Figma et Confluence et couvre l'ensemble du périmètre : onboarding, process et workflows, tokens, composants, principes d'interaction, layouts, etc. Un référentiel structuré pour être accessible à des profils très différents (designers, développeurs, PM/PO) au sein d'équipes nombreuses et dispersées.
L'accompagnement des équipes de développement est une part centrale du travail : livraisons, recettes, mise en place d'un Storybook et de showcases custom sur les environnements iOS et Android. Avec 11 codebases à gérer, les recettes sont fréquentes et traitées au cas par cas selon les besoins de chaque équipe.
Pour rendre le système réellement adopté, nous avons mis en place un cadre Design Ops structuré : ateliers de co-création, guildes design system et boards Jira repensés.
Au-delà des rituels, nous avons structuré l'ensemble des workflows et process autour du design system : RACI, Definitions of Done, formulaires de contribution, release notes, etc. L'enjeu était de donner à chaque contributeur, quel que soit son métier, les outils pour s'approprier le système et y contribuer activement.
Ce cadre s'adresse à plus de 100 contributeurs tous métiers confondus : designers, développeurs, PM/PO, au sein d'équipes nombreuses et dispersées.
Retour à l'accueil