Reaching 80% design system compliance in 3 months
I will tell you the story of a design team who managed to increase the design system compliance of their Figma files from 40% to over 80%, in just 3 months. It was quite a challenge, but spoiler alert: we had a secret weapon.
Part 1: The problem
At Doctolib, we work with an in-house and mature design system: Oxygen.
It is the key to our product’s coherence, and we use it everyday to create interfaces, experiences, branding and writing. Our Figma files are the source of truth for developers: we need to make sure that we deliver consistent designs so that they can deliver consistent code.
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Nielsen Norman Group
Using a design system seems easy enough. Just assemble the components as you would Lego bricks, and poof! Your design is ready.
But…
- We are a team of over 25 product designers and 300 developers.
- We have hundreds of Figma files and we work on different products.
- Our design system is made up of about 60 core components that are improved daily by a dedicated team.
As much as we love Oxygen and appreciate the benefits of using it, real life sometimes catches up with us.
Pitfall 1: Custom designs… that stay custom
Design systems are great tools, but they can sometimes be a bit too rigid for ideation phases. To explore multiple solutions and make sure we keep innovating, we sometimes craft custom elements or detach existing components to have more freedom. Which is totally fine…
But once the designs are final, we need to use validated components (existing ones or new ones) and not custom designs. It’s the only way to ensure consistency of reusable elements in all our files. If a custom design slips through the net, it becomes… custom code.
Pitfall 2: Reused old screens
Doctolib is now 10 years old. We have a lot of features. We reuse previous screens so we don’t have to recreate them each time. Those screens sometimes contain custom elements or legacy components.
Legacy components will not benefit from design system updates, and developers may create them as custom elements. That’s why we need to be careful and always use the latest version of components.
Pitfall 3: The innovation train is moving too fast
Our design system evolves very quickly. We have a dedicated team working on it, and we are all contributing to it, which makes component updates extremely frequent. Caught up in our own projects, it’s not always easy to catch up with all the news (dismissing the update prompt, on the other hand, is pretty easy).
Part 2: The solution
Our objective
We know that design compliance is one of the keys to improve code compliance. So we decided to reach a minimum of 80% design compliance on all the Figma files we produce and hand off to developers.
Why 80% and not… 100%?
We went with 80% because we think it’s a good compromise between quality and autonomy for each designer. We leave some space for creativity, but also for edge cases: our design system has some technical limits, and sometimes it’s not possible to craft what we need using only existing components.
We started by assessing the current state: the data showed that our Figma files were 40% compliant on average.
Having to check thousands of layers by hand every single day was not a realistic approach. This is when designers got equipped with their secret weapon: an automated tool to assess design system compliance.
OxyScan, a designer’s lifesaver
OxyScan is an in-house Figma plugin that allows us to scan a Figma page and flag non-compliant layers. We can then access those layers in 1 click and update them to make them compliant. This tool enables designers to perform a quick and easy check of their file before handing it over to the developers.
Adopting a new tool
OxyScan’s adoption by designers was not immediate. The tool was initially perceived as complex and technical. The learning curve was quite steep and required some dedication. Sure, now it was easy to spot problematic layers, but it wasn’t always obvious how to fix them.
I was also a bit skeptical at first, but the challenge of having compliant designs eventually got the best of me. Hunting down faulty layers quickly became a little game. It got a few other early adopters, but we needed to help other designers enjoy it and use it too.
I was convinced that gamification and visualization of progress could encourage everyone to get on board even more.
On the road to compliance
To improve and ease the process, we took a few actions.
- We improved the UI and UX of the plugin. It is now much more friendly-to-use, and key information is highlighted better.
- We created a “Resolution Guide”, to help troubleshoot the most common problems. This largely reduced the learning curve, as we don’t have to fumble around on Figma anymore to find how to fix a non-compliant layer.
- A global follow-up dashboard has been created so that we can easily identify the files with the lowest scores and act on them.
The Oxygen team (both design system designers and developers of the plugin) was very involved in the learning phase. Evangelization meetings, tutorials and individual coaching helped everyone learn to love OxyScan.
Part 3: The results
This strategy worked very well: the team reached more than 80% compliance in 3 months, and the quality of our designs has improved considerably. Thanks to OxyScan, designers also collectively developed their crafting skills on Figma and design system knowledge.
This concrete, quantified success created a very positive image of the design team throughout the company. The next step will be to improve the quality of the code in the same way. The design team has set the example, and now it’s up to developers to accept the challenge!
