Créez de superbes expériences RAGT cohérentes grâce aux kits d'interface utilisateur Canopy. Conçus dans Figma, les kits d'interface utilisateur Canopy contiennent des ressources graphiques qui correspondent aux bibliothèques de code. Cela garantit une transition fluide entre la conception et le développement.
Canopy dans Figma
Demandez l'accès au fichier Figma « RAGT Design System » auprès du programme digital Groupe : palette, typographie, composants et gabarits y sont maintenus à jour, et c'est la source à partir de laquelle cette documentation est générée.
01Avant de démarrerNous vérifions ensemble avant consultation ce qui existe déjà et les règles à appliquer au projet.
02Pendant la conceptionLe projet s'appuie sur le design system. Si un besoin n'est pas couvert, nous voyons s'il faut faire évoluer ou prévoir une exception.
03Avant la mise en ligneLe programme digital Groupe vérifie avec l'équipe projet la bonne application du système avant la mise en production.
Pour rester lisible, la bibliothèque Canopy est organisée en deux niveaux, chacun avec un rôle précis.
Kit UIDescription
Langage design CanopyLa source de vérité des décisions de style : couleur, épaisseur de trait, rayon, espacement et taille des icônes.
Canopy Websites UI KitLes blocs de construction alignés code pour les sites web, pour un passage design → développement sans couture.
Canopy Tools & Applications UI KitLes blocs de construction alignés code pour les outils et applications internes, pour un passage design → développement sans couture.
Canopy Internal Portals UI KitLes blocs de construction alignés code pour les portails internes, pour un passage design → développement sans couture.
Activer les bibliothèques
Activez le kit Canopy Web depuis le panneau Assets de Figma. Pour qu'il soit toujours disponible dans vos maquettes, activez-le une fois pour toutes dans les paramètres de votre compte.
Concevoir avec Canopy
Les composants sont organisés dans le panneau Assets. La plupart restent proches de la surface, rarement imbriqués sur plus de deux niveaux.
Visuel à ajouter — organisation des composants
Les variantes et les propriétés de composants permettent d'adapter chaque configuration à votre besoin. Les propriétés disponibles dans le kit UI correspondent au code.
Mettre en forme avec les variables Figma
Le fichier de langage design Canopy héberge les variables de style globales et d'alias — couleur, épaisseur de trait, rayon, espacement, taille — pour le web et le mobile. Pensées pour un usage designer, elles permettent de basculer facilement entre mode clair et sombre, et prennent en charge les styles propres à chaque marque du Groupe.
Le design system n'est pas figé. Il se met à jour en collaboration avec l'équipe du programme digital Groupe, au rythme des projets : un composant manquant, un état oublié, un usage qui se répète d'un site à l'autre sont autant de raisons de faire évoluer la bibliothèque.
Demander
Décrire le besoin à résoudre, le contexte du projet et, si possible, l'écran concerné. Une capture ou une maquette suffit.
Arbitrer
Le programme digital vérifie si un composant existant couvre le besoin, ou si une évolution est justifiée pour l'ensemble des sites.
Intégrer
Le composant est dessiné, versionné dans la bibliothèque Figma et documenté ici, puis mis à disposition de tous les projets.
Cas pratiques
Partagez le projet avec le programme digital Groupe avant les premières maquettes ou la consultation d'une agence. Nous faisons ensemble le tour des modèles et des composants disponibles, puis nous fixons les points de validation.La conception démarre sur une base connue, et la vérification avant mise en ligne n'apporte plus de surprise.
Une refonte suit le même circuit qu'un nouveau projet, avec une étape en plus : l'inventaire de l'existant.Nous identifions ce qui se remplace par un composant du système, ce qui disparaît et ce qui demande une évolution de la bibliothèque. Cet inventaire se fait au cadrage, jamais en cours de développement.
Signalez-le plutôt que de le dessiner dans votre coin. Décrivez le besoin, le contexte et l'écran concerné — une capture suffit.Le programme digital vérifie si un composant existant couvre le cas ; sinon l'évolution est arbitrée, dessinée, versionnée dans Figma et documentée ici pour tous les projets.
Transmettez cette page et la bibliothèque dès le brief ou la consultation, et inscrivez l'utilisation du design system dans le cahier des charges.L'agence travaille à partir du système existant et ne crée pas sa propre bibliothèque graphique en parallèle. Un besoin non couvert remonte au programme digital Groupe avant d'être produit.Le design system est une donnée d’entrée du projet, pas une référence à vérifier en fin de projet.
Une équipe, une filiale ou un pays peut naturellement avoir un besoin digital spécifique. Avant de lancer une consultation, une maquette ou un développement, partagez le projet avec le programme digital Groupe.Nous vérifions si une solution existe déjà dans le Groupe, si le design system couvre le besoin et si le projet peut réutiliser des éléments déjà développés ailleurs.Une initiative locale est possible. Un projet digital isolé du système commun ne l'est pas.
Un projet en vue ?Contacter le programme digital Groupe
Mieux vaut un échange en amont qu'une reprise en fin de projet. Le bon moment pour nous contacter : avant les premières maquettes ou avant de consulter une agence.
