DX, API Design & Documentation

How to leverage your Design System with APIs

312views

 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.

Jérôme Benoit

Jérôme Benoit

Lead DesignOps at Doctolib
As a seasoned designer with extensive experience in branding and communication, I'm passionate about the power of Design Systems to create meaningful impact. At Doctolib, I'm proud to be part of an european team that is improving access to healthcare, while enabling hundreds of developers and designers using Oxygen, our Design System, and pushing its boundaries. I believe that by learning, sharing my knowledge and collaborating with other designers, we can make a real difference in the world and create a real supportive design community that uplifts us all.

APIdays | Events | News | Intelligence

Attend APIdays conferences

The Worlds leading API Conferences:

Singapore, Zurich, Helsinki, Amsterdam, San Francisco, Sydney, Barcelona, London, Paris.

Get the API Landscape

The essential 1,000+ companies

Get the API Landscape
Industry Reports

Download our free reports

The State Of Api Documentation: 2017 Edition
  • State of API Documentation
  • The State of Banking APIs
  • GraphQL: all your queries answered
  • APIE Serverless Architecture