Jerome Benoit is Lead Design Ops with Doctolib. He is an expert in the Design field and has worked there for more than fifteen years. In this article, he will discuss leveraging your design system with APIs.
A design system
A design system is an internal tool and methodology that enables you to create brand-aligned digital design at scale. When discussing design systems, we think of components, reusable components, UI kits, etc. A component is the smallest part of the design system. In a design, you start with foundations, which detail the logo, color palette, fonts, etc., and go up to components, like radio buttons, checkboxes, etc. This can be split into three main parts – assets, processes, and documentation.
Benefits of having a design system
Consistency – If you use reusable components, these can be used across platforms and will give the same user experience. The developer will not have to recreate it every time.
Cost – If the developer saves effort in recreation, and the designer can reuse the design, you save on the development cost.
Improved developer and designer relations – A design system helps in an improved understanding between developers and designers.
APIs in the Design System Eco-system
A token is a design decision distributed across design tools and coding languages. Say, we have a button with a specific color, padding, font styles, etc. This becomes a token that can be used across platforms. Over the past few years, there have been many plugins and tools that have been distributed.
An API helps two software or communities to connect to each other. Similarly, a design system connects designers and developers. Developers speak about code structure, while designers speak of emphasis and hierarchy.
Doctolib Design System – Oxygen
The Design System is called Oxygen. It is a public repository with UX, writing guidelines, components, foundations, and brand resources available to anyone.
Doctolib was launched in 2013. The Design System team was created in mid-2022. Before that, developers worked in silos; designers worked on sketches. We have a huge legacy and a large customer base of code. Our Design Tool is Figma. Our coding tool for developers is Storybook.
Figma is embedded in the Storybook. A developer can play with components and study the documentation and guidelines to improve code.
To capitalize on this for the future, Doctolib has identified three levers –
- Time
- Training
- Tools
Tools
We have created some tools to make the developers and designers more autonomous.
Oxyscan is a Figma plugin based on the Figma API and is used to measure the compliance of all the layouts shipped by our designers. By doing this, we limit the risk of creating code debt.
X-Ray is a Chrome extension that analyzes legacy code while browsing in production.
Component stage – It’s a Figma widget. It gives us confidence in our components, depending on different criteria, such as craft, documentation, and accessibility.
All these tools generate data. This gives us dashboards that we can study. We can see the coverage of our product; we can identify the population that needs training.
