Context

In we started migrating to a brand new design system and as you all can imagine the process of migrating an existing product to a new design system is a long and involved process.

There are a few ways you can do it.

You could either build your product from scratch using the new design system or you could choose to evolve your existing product by incrementally migrating to the new design system.

We choose to do the latter. since building a product like ours from scratch would just not be feasible.

Problem

The problem was that doing so would mean translating the existing product as is into the new design system as a first step.

Now, this first step of 1:1 conversion may seem like an easy task (and it is in terms of execution), but the thing is, it comes with some major cons.

It is a slow and tedious task. It takes away time which you can otherwise be used for things more important than just changing the design language. It is repetitive & prone to human errors. The solution was simple we could automate it.

Solution

I created a Figma plugin which would take any existing design and replace the styles with the closest matching styles in the new design system.

Like in the video below the colours are matched with the colours defined in the Design system and the closest match is applied as a style.

Similarly for the type styles, the closest font style and weight is applied along with any font family changes if required.

For Example, A text layer of size 22 regular of font-family X is converted to size 24 regular of font Family Y. The standard we use for our Design system.

See it in action

Impact

The Impact was massive

I did approx 3 weeks worth of work in a day.

Additionally, Designers from other teams have started picking it up and they are using it as a design auto corrector / Linter which fixes all their designs by applying the right text and colour styles.

It's a big win for 2 nights of late-night coding.

So what's next?

I will be open-sourcing the plugin and making a tutorial for those who want to try to do this for their own projects.