Migrating from Sketch to Figma
    • Role: Project Lead
      Duration: 3 months
      Year: 2020
      Collaborations: Design Systems team, Head of Design, Director of Product Design, Developers, Product Designers
  • Joining the Design Systems team

    When I started working at my first large tech company, I was already firmly rooted in Sketch design tool. A short while later, the company transitioned to Figma and I immediately started worrying about the effort in learning a new tool. I quickly realised that it was a good decision to switch to Figma.

    When I joined Bumble, the product design team was already rooted in Sketch. The design system was built as multiple, interdependent Sketch Libraries managed with Dropbox. It was decided by the team to migrate to Figma. This was my first task at Bumble working in the design systems team—to migrate to Figma and improve the collaboration between designers and developers.

    Problem - Issues with developer handoff process and inconsistencies in design system

    Having a collaborative design tool which brings designers, engineers and others on your journey is really helpful, but that doesn’t automatically lead to better collaboration. I wanted to make sure that all our files are well organised and design components are aligned with components we have in production. The Sketch files had a lot of missing components, and the ones added, had a lot of missing variants. There was also no process of adding new assets and components.

    In my previous company, when we transitioned to Figma, I was only worrying about the new skills that I had to learn. When I joined Bumble, since my responsibilities were different, I was more worried about:

    1. The cost involved in switching tools. Bumble is not a one-person team, and it is quite a task transitioning multiple designers to a different tool.
    2. The effort involved in training and moving the entire design team onto a new tool whilst simultaneously doing actual work.
    3. Training the engineers. Figma is above everything, a collaboration tool, so we knew we had to train engineers as well.

    Spoiler alert, a quarter later, the entire product design team now uses Figma.

    Cosmos

    Bumble's design system—which we call Cosmos—now supports both design systems (Bumble & Badoo) and covers web, and native platforms (iOS and Android). We re-organised all the assets (client and SRV) and split components to specific libraries. This has allowed us to create a chain of libraries, in which any changes to higher-level libraries will cascade through libraries below.

    The below is a visual reference to show how we have structured the libraries for both products (Bumble and Badoo):

    Our first step was to build the Core library with the colours and typography styles. Colours and typography styles are quite straightforward and we haven’t done anything new from that aspect.

    For the Asset libraries, we split the client side icons and the server side icons into two libraries, Client Assets and SRV Assets. The Cosmos team built a plugin for the asset libraries where we are able to link the actual assets we have in Figma with the assets we have in production. If we decide to tweak or add a new asset, we can apply the changes directly in Figma, run the plugin, and wallah! Changes are reflected in production. To avoid the risk of designers changing assets by mistake, we have the exact clone for these libraries which are used only by the design systems team.

    In Figma we use the term ‘main’ component which allows us to create multiple instances of the component. The Root Components library acts as the single source of truth for all the variants and components. The purpose of this file is to be accessed and maintained only by the Cosmos team. In other words, this file is used to build other Figma components, that are in turn used by the designers to design the UI of the applications.

    Lastly, we have the Components library. In this library, one will find all the variants of all our components. All the instances are powered by the main component found in the Root library. The library is split into pages for multiple components.

    Process

    Migrating all of our components to Figma was not an easy task. We had to make sure that designers were able to keep working on other projects required by their pod, and unfortunately, for us, it wasn’t as easy as “drag and drop” from Sketch to Figma.

    Gathering feedback from designers on the design tool (Sketch) and overall approach, was a crucial step before planning. The general idea was to test out the migration with Badoo, and then work on Bumble afterwards. This helped us to start gathering feedback quickly and learn from the initial mistakes. The whole project was split into several sprints.

    Survey sent out to Product Designers, Developers, QA Developers, and Product Managers

    Since I was relatively new to the company, I wanted to make sure that I get a clear understanding of all the components. I worked closely with engineers to understand all the properties and limitations. The team also planned out sessions with multiple companies to get an understanding of how they approached the design system.

    Chat with Shaun Bent from Spotify discussing the best approach for the design system

    Chat with Cristiano Rastelli (Design Systems Lead) on structure of components in code

    Educating

    The Cosmos team conducted a series of workshops with engineers and designers to help them understand the design system. I didn’t want to take the approach of announcing the design systems by saying “here’s the new design system, make sure you use it”. I wanted designers and developers to really understand it and feel involved.

    I held tailored workshops and documentation on topics like how the design system is organised, structuring and managing files, and using components. I also made sure to have screen recordings of myself using the components in Figma to help designers follow through when they are struggling. For new joiners, I have also worked on onboarding videos to help designers onboard to Cosmos properly.

    For developers, we made sure to walk them through the design tool and how to inspect design elements. Since all the components and styles in Figma are using the same naming convention we have in code, this made the developers’ life much easier when inspecting the design.

    Final thoughts

    We are still finding, learning, and understanding as we go along. We make sure to keep getting feedback from the end users and keep iterating and improving the system to make it a pleasant experience for the consumers. This project marks the start of a new journey for Bumble, where we build more consistently and speak the same language across every part of our products.

    At the same time, to make things easier for everyone, we’re transitioning all the documentation to Cosmos. It’s no small task, but in the long run, will make our documentation far more fresh and accessible. Given that the design team is growing rapidly, we plan to recruit a design advocate from each team (Bumble and Badoo) to promote the design system within the company and improve adoption by sharing best practices.