How Carrefour automatically versions tokens from design to code

Can you describe your role at Carrefour?

Romain (Developer)

I'm a front-end developer in charge of the technical part of our design system. More specifically, I create component libraries that get used by different tools of the Carrefour group in France and globally.

Jeremy (Designer)

I'm a design system designer, and I take care of everything that's happening in Figma. Like Romain, I'm one of the referrers of the design system but on the design side. I'll create component libraries in Figma and help other designers use them correctly.

What challenges did you face as a team before using Specify?

Romain (Developer)

We didn't speak the same language between designers and engineers. For instance, designers used to create and use design tokens like colors, spacing, or shadows that developers didn't have in their codebase. Thus, while inspecting the UIs, developers were a bit lost in translation and sometimes created new tokens, which eventually led us to be out-of-sync.

Our main challenge was that our design tokens were out of sync between design and code in our design system. We now have 50 developers who benefit from design tokens generated by Specify.

Jeremy (Designer)

On the design side, we also had issues communicating updates to developers, whether it was an updated color or a new icon.

Communication was the main challenge. We have around 60 designers consuming our design system. We used to keep everyone updated on our design tokens during meetings, and it was a very manual process that was both time-consuming and error-prone.

With Specify, this process is now automated. I'm sure developers will get the latest design tokens and assets in the right format for their respective platform. All of this in one click.

How does your team benefit from Specify?

Romain (Developer)

First of all, Specify helps us update our design system more efficiently. For instance, Jeremy and I work together daily on the design system. When Jeremy updates a token in Figma, I only have to execute a command in the CLI to get his final design decisions in my codebase. Being aligned with each other has become effortless.

Secondly, as the design system gets updated more regularly, teams consuming it can also benefit from it more rapidly. In short, it improves the adoption of the design system.

"Specify brought us confidence and ease of mind. Before, we used to be cautious and hesitant before updating our design tokens because of the potential impact it could have at scale. [...] We're now confident about updating a token, rolling back to a previous version, or even trying new ones."

Jeremy Dahan, Design System Designer, Carrefour

How would you describe the impact Specify had on your team?

Jeremy (Designer)

Specify brought us confidence and ease of mind. Before, we used to be cautious and hesitant before updating our design tokens because of the potential impact it could have at scale. This is why I'd say Specify positively impacted the speed with which we update our design language. We're now confident about updating a token, rolling back to a previous version, or even trying new ones.

Romain (Developer)

I agree with the impact Specify has on velocity. For instance, QA used to take a lot of time between deploying in different environments, checking names and values, and deploying in production. Now we can use this time for other tasks with more business value and are more enjoyable.

How do you use Specify?

Jeremy (Designer)

We use Specify to sync our design decisions from our Figma frames and libraries. Configuring all Sources in Specify was fast, and now it just works. I'd say Specify is now part of our daily workflow, and it feels natural to use it.

Romain (Developer)

I use Specify to generate our design tokens and assets as NPM packages used by different web applications consuming our design system.

I use the Specify CLI to automatically generate design tokens in 3 different NPM packages inside a Bitbucket Pipeline:

• Package #1: contains all our tokens as SCSS and CSS variables

• Package #2: includes all our icons as an icon font

• Package #3: includes all our images

We have 3 Specify configuration files, each targeting the same Specify repository. Thanks to a custom script I created, I optimized how we transform our design tokens and assets without repeating myself in these three configuration files. This script helps me generate all the configuration files depending on the types of design tokens we need to support and their respective transformations.

1. Each configuration file generates a PR in Bitbucket I can review

2. Once the PR is merged, a release script gets executed in our CI, and the corresponding NPM package is updated and deployed. We use Lerna to bump our NPM packages version automatically.

How Carrefour use Specify to generate design tokens and assets, and version them as NPM packages

What made you choose Specify over other solutions?

Romain (Developer)

Your pricing played a significant role in our decision. In terms of support, we appreciated your ability to respond quickly, and the fact you're a French team was also important. We've had a good feeling with your team since day one during our demo call. Also, I found your documentation straightforward and easy to use. And finally, we initially thought about building our own system based on the Figma REST API. But spending even a week on a project like this we would have had to maintain was not worth it.

Jeremy (Designer)

I would also add that among all the solutions we investigated on, Specify was the one that was the most user-friendly, especially on the design side. The fact that Specify had an overall better UX played an important role in making our final decision.