Develop
Cette page s'adresse aux développeurs qui intègrent Canopy dans un projet de code : équipes internes RAGT comme prestataires et agences partenaires. Elle explique comment s'appuyer techniquement sur le design system, et comment initier la connexion avec le programme digital Groupe.
Deux façons de s’appuyer sur Canopy
Techniquement, un projet peut s'appuyer sur Canopy de deux manières. Le choix change tout pour la suite : c'est lui qui détermine si le projet reste synchronisé avec le design system dans la durée, ou s'il s'en détache au premier changement.
Les feuilles de style et tokens sont récupérés une seule fois, puis copiés dans le projet. Aucune dépendance externe : le projet fonctionne de façon autonome, hors ligne compris.
Revers de la médaille : rien ne prévient le projet qu'une évolution a eu lieu côté design system. La resynchronisation est manuelle, et sans elle, chaque site dérive un peu plus de la référence au fil du temps.
Le projet charge les feuilles de style directement depuis un CDN qui héberge la distribution Canopy à jour, plutôt que d'en garder une copie locale. Les feuilles restent dissociées par rôle : chaque projet ne charge que ce dont il a besoin.
L'intérêt : toute évolution validée dans Figma se propage automatiquement à tous les projets connectés, sans reprise manuelle de leur côté. Une seule source de vérité, plus de dérive entre les sites du Groupe.
Structure
Quelle que soit la façon dont un projet s’appuie sur Canopy, la distribution garde la même structure.
styles.css point d'entrée unique _ds_bundle.js tous les composants, compilés tokens/ fonts.css polices et graisses semantic.css alias de rôle, rayons, espacements, mise en page typography.css classes .ragt-* (30 styles × 3 modes) elevation.css ombres, .ragt-card, .ragt-stripe brand.css logotype et lockup components/ fig/ composants extraits, fig-tokens.css icons/ icon-data.js, Icon.jsx templates/ gabarits de pages assets/ logotype, texture rayée, photographies
fig-tokens.css porte les variables générées depuis Figma ; semantic.css les alias de rôle. Un seul point d'entrée est également disponible : styles.css.
Un repo dédié
Tokens et composants vivent dans un dépôt Git dédié à Canopy, distinct des projets qui les consomment. C'est la source de vérité unique : c'est de là que part la distribution mise à disposition en CDN, et c'est là que chaque évolution validée est versionnée avant d'être publiée.
Se connecter au design system
La connexion au CDN ne s'improvise pas projet par projet : elle se cadre avec le programme digital Groupe, pour rester cohérente avec les autres sites déjà connectés.
Décrivez votre projet au programme digital Groupe : stack technique, hébergement, équipe interne ou agence partenaire.
Le programme définit avec vous l'accès au CDN, les modules de style nécessaires au projet, et si besoin l'accès au repo.
Vous connectez les feuilles de style depuis le CDN dans le projet, avec l’accompagnement du programme pour valider le rendu.
Contribuer
Un composant manquant ou un token à corriger ? Décrivez le besoin au programme digital Groupe (voir Design → Faire évoluer le système) : la modification est faite côté Figma puis régénérée en CSS, jamais l'inverse — une valeur ne se réécrit jamais en dur dans un projet.