Start designing

Designing with Canopy : the reference Figma file, the project validation cycle, and how to evolve the system.

Figma file

Request access to the "RAGT Design System" Figma file from the Group digital program : palette, typography, components and templates are kept up to date there, and it's the source this documentation is generated from.

Websites Canopy design assets Tools & Applications Canopy design assets Internal Portals Canopy design assets

The project cycle

01Before you startContact the Group digital program before the first mockups or agency consultation. Together we check what already exists, the available templates and the rules to apply to the project.
02During designThe project builds on the existing design system. If a need isn't covered, flag it : we'll see whether to use what exists, evolve the system or plan an exception.
03Before launchThe Group digital program checks with the project team that the system is properly applied before going live : visual consistency, components, templates, responsiveness and accessibility.

See these processes in practice

UI kit organization

To stay legible, the Canopy library is organized in two tiers, each with a precise role.

UI Kit Description
Canopy design language The source of truth for style decisions : color, stroke width, radius, spacing and icon sizing.
Canopy Websites UI Kit Code-aligned building blocks for websites, for a seamless design-to-development handoff.
Canopy Tools & Applications UI Kit Code-aligned building blocks for internal tools and applications, for a seamless design-to-development handoff.
Canopy Internal Portals UI Kit Code-aligned building blocks for internal portals, for a seamless design-to-development handoff.
Canopy diagram: design language, style decisions, then Websites, Tools & applications, Internal portals

Enabling the libraries

Enable the Canopy Web kit from Figma's Assets panel. To keep it always available in your files, turn it on once in your account settings.

The RAGT Design System Figma file’s "Manage libraries" panel, listing the Websites, Tools & Applications, Internal portal, Icons, Illustrations and Data Viz Kit libraries

Designing with Canopy

Components are organized in the Assets panel. Most stay close to the surface, rarely nested more than two levels deep.

Visual to add — component organization

Variants and component properties let you tailor each configuration to your need. The properties available in the UI kit map to the code.

Styling with Figma variables

The Canopy design language file hosts global and alias style variables — color, stroke width, radius, spacing, size — for web and mobile. Designed for ease of use, they make it easy to switch between light and dark mode, and support the styling specific to each Group brand.

Device Desktop Tablet Mobile
Brand RAGT Groupe RAGT Énergie RAGT Plateau Central RAGT Semences
→
Action Create Edit Save to collection

Evolving the system

The design system isn't fixed. It's updated in collaboration with the Group digital program team, at the pace of projects : a missing component, a forgotten state, a usage pattern repeating across sites are all reasons to evolve the library.

Request

Describe the need to solve, the project context and, if possible, the screen involved. A screenshot or a mockup is enough.

Arbitrate

The digital program checks whether an existing component covers the need, or whether an update is justified across all sites.

Integrate

The component is designed, versioned in the Figma library and documented here, then made available to every project.

Use cases

Share the project with the Group digital program before the first mockups or agency consultation. Together we review the available templates and components, then set the validation checkpoints.Design starts from a known foundation, and the pre-launch review no longer brings surprises.
A redesign follows the same process as a new project, with one extra step : an inventory of what already exists.We identify what gets replaced by a system component, what gets dropped, and what requires a library update. This inventory happens during scoping, never mid-development.
Flag it instead of designing it on your own. Describe the need, the context and the screen involved — a screenshot is enough.The digital program checks whether an existing component covers the case ; if not, the update is arbitrated, designed, versioned in Figma and documented here for every project.
Share this page and the library from the brief or consultation stage, and make use of the design system part of the project spec.The agency works from the existing system and doesn't build its own parallel graphic library. Any uncovered need goes to the Group digital program before being produced. The design system is an input to the project, not a reference to check against at the end.
A team, subsidiary or country may naturally have a specific digital need. Before starting a consultation, a mockup or development, share the project with the Group digital program.We check whether a solution already exists within the Group, whether the design system covers the need, and whether the project can reuse elements already built elsewhere. A local initiative is possible. A digital project isolated from the shared system is not.
A project in mind? Contact the Group digital program

An early conversation beats a rework at the end of the project. The right time to reach us : before the first mockups or before consulting an agency.

canopy@ragt.com