Converting your design system from Figma to Sketch is easy — but how?
By: Sebastian Tan
Tags: UX Design, UI Design, Design Systems, Graphic Design, UI

Converting from Figma to Sketch is a difficult process with a limited number of options. Even for a basic file, the conversion process can be painful. But what about a much more complicated file like a design system with components, text styles, overrides, and colour styles.

I wondered how you could convert your design system from Figma to Sketch or how well you can do this. When I wrote my last article about this topic, there was only one third party converter on the market.

Since then I noticed that a new player has come to the table and I wanted to compare the two tools to see which one would be best for converting complicated files. Are the two tools as good as one another? Is there a difference between them?

The converters

The two players that we will compare today are:

XD2Sketch — More specifically their Figma to Sketch converter .

— More specifically their . Figmatic

Both claim an easy conversion of Figma files into Sketch. The two converters are paid tools, but have different pricing options available. I don’t want to focus much on this because I want to look at quality of conversion and see which one would be worth it when using a design system. Price is an afterthought if you are using this for critical files.

Let’s see how they do when they go head to head

The Benchmarks

I wanted to define a way that we could measure success when comparing the two converters.

I narrowed it down to the following:

Factor 1: Converted Result Quality — Are the files complete? Was everything converted?

— Are the files complete? Was everything converted? Factor 2: Feature Support — Usability of the design system after the conversion process. Are all component-based elements intact and would you be able to work with the file immediately? Such as colours, text styles, symbols/components, etc.

— Usability of the design system after the conversion process. Are all component-based elements intact and would you be able to work with the file immediately? Such as colours, text styles, symbols/components, etc. Factor 3: Additional work required — Minimal amount (or no) rework to the converted files. Are there any errors that don’t relate to things missing? ie any bugs that may occur

Now that we have our success criteria, let’s define our test.

The test

To test this out, we will take a design system and convert it from Figma to Sketch. I chose the Pulse Design System, which was created by Heartbeat Agency. You can download it here if you would like to use it yourself.

The system is not large, but it has enough elements to allow us to compare XD2Sketch and Figmatic.

The Pulse Design System has:

Symbols/components

Colour styles

Text styles

A look at some of the elements:

A number of inputs are present in the design system.

Symbol overrides are missing from the design system. This is because it is a pure design system and has no actual screens/instances of the components, colours, etc.

XD2Sketch

Now let’s start things off with XD2Sketch’s converter. The XD2Sketch converter has a simple and easy to use interface. You paste your link into the Figma to Sketch converter and go through the checkout process.

The simple XD2Sketch interface

After this you can download the file:

Now let’s take a first glance at the files one to one.