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.
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
This project’s target audience was the designers at Booking.com who use the Booking Design System.
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.
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 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
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.
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.
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.
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.
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.
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.