← Back

Booking.com: Design system Figma library

Created and maintaned the design system figma libraries, advocated for the design system, trained product teams.
Booking figma case study cover

Overview

Booking.com is the largest accommodations platform in the world. Its tech team is made of 1.2K+ employees split into product teams. My team, the Design System team, had a main goal: to enable product teams of Booking.com to deliver higher quality work faster by creating and maintaining tools, guidelines and libraries of the Design System.

My role

In this project, I created the design system libraries in Figma, I was the design system advocate, maintainer of the Figma libraries and a training instructor

Target audience

This project’s target audience was the designers at Booking.com who use the Booking Design System.


Problem statement

Historically, the tech department has been using Sketch as a primary design tool. Over the years, we have noticed challenges with our design process. In the design system we used to store Sketch file on the cloud: for each component, we had a Sketch file for each different platform.

Sketch folders for each component

This had many problems in the process:

Lack of collaboration
Storing Sketch files on the cloud wasn’t the perfect process to update designs and work together on the same file. We had to create document files and have many calls to be able to collaborate on designs. Designers were not able to easily contribute to the design system.

No visibility and sense of community
Having different files being stored in different personal cloud made it difficult to have a visibility on what others are working on in the company and that disconnected us from each other

Lack of platform unity
The design system stored different files per platform for each component. This made it difficult for us to update a component for every platform as they were not linked in any way. Because of these challenges, we decided to start using Figma as a primary design tool.


The process

Test Figma trial and success

The first stage was to try out Figma across the company and assess whether that’s the right tool for us. Other designers were involved in the process and after 3 months of testing, it was a successful trial

Creation of libraries

I started by creating a library for each platform (iOS, Android, Mobile Web and Desktop Web). Then, I migrated each component from Sketch to Figma, made some adjustments and turned them into components.

Design system library in Figma
Community support

I created a dedicated Figma channel on our communication tool so that designers can reach out for any inquiries, I also advised for and received regular comments on the Figma library with requests to improve the component’s flexibility.

Design system library in Figma
Trainings

I created and gave trainings about the design system and its usage to increase awareness across the company. I also created a training about a recent feature on Figma called Variants which enabled us to have a sync between design and development through configuration of properties for each component. I gave this training to teach about the feature as well as teach product designers how to create variants for their own product team library.

Presentation on the design system
Getting started guide

To explain to designers how to use the design system in Figma, I created a tutorial in our Design System documentation platform explaining step-by-step how to create components, how to use System colors and how to create patterns and contribute back to the design system.

Getting started guide
Library maintenance and updates

I worked on regular library updates to improve component’s flexibility, add auto-layout and convert components to variants. To make sure our users are aware of our team’s updates, I created a weekly Figma log release where I list the changes I did on the components and what they mean to our users.

Figma changelog

Outcome

The outcome of this project was highly impactful on the design organization. Using Figma helped create collaboration between designers and specifically between the Design System team and the product designers. My work in creating and maintaining the Figma libraries as well as using Variants has made it possible to create more consistent product experiences across the organization.