Converting your design system from Figma to Sketch is easy — but how?

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:

• Magicul — More specifically their Figma to Sketch converter.
• 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?
• 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.
• 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 Magicul 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.

Magicul

Now let’s start things off with Magicul’s converter. The Magicul 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 Magicul interface

After this you can download the file:

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

The original file in Figma on the left and the converted Sketch file on the right

Everything looks good so far, but let’s have a closer look to really see how the converter performed.

Magicul — Pages 📄

All the pages are there in the Sketch file:

It’s interesting to note that they even added an extra page with all symbols.

This is a good first sign as everything looks like it is there.

Rating - Pages: 🤩

Magicul — Components 🧱

As we already saw, the components have all been added to a separate page. My only real criticism here is that they are in one long column. But this can be easily fixed. Let’s just double-check them in the components panel.

Checking the Symbols panel in Sketch

Everything is there and you can already start using the file to create your favourite UI. Things are already looking good in terms of the criteria we set.

Rating — Symbols/Components: 🤩

Magicul — Colours 🎨

Now let’s have a look at the colours to see if they were converted.

The colour styles from Figma are also there in the Sketch file.

Rating — Colours: 🤩

Magicul — Text Styles 🔠

Now we can check for the text styles.

Checking the Sketch file for Text styles

Everything seems to be there and this means that we have been able to successfully convert an entire design system!

Rating —Text Styles:🤩

Figmatic

Now let’s move on to Figmatic and see how it goes converting the design system. Conversion is simple. You start by installing the Figma plugin.

You can find the Figma plugin in the Figma Community plugins page

Then you simply open the plugin in the appropriate Figma file and you are prompted with a one-click interface.

The file converts quickly and you can then download it as a Sketch file.

Figmatic to Sketch

Firstly let’s have a look at how the file looks in Sketch compared to the original file.

Everything seems to be there on first glance. But you can already see that there are issues.

Now let’s look at the finer details.

Figmatic — Pages 📄

In the original file we had four different pages.

The pages for the design system in Figma

But it seems that they are missing in the converted Sketch file.

Most designers will use pages to separate their files. So already the converted file has issues.

You would need to convert each Figma page into Sketch using Figmatic. Then you would need to splice them together to have all pages.

The file is already not complete and already requires work to make it complete.

Rating — Pages: 😐

Figmatic — Components 🧱

Now, let’s have a look at the components in the converted file.

We can see this in the components panel in Sketch.

The original symbols have not been converted in Sketch

No components/symbols have converted from Figma to Sketch. This means that building things with components will not be immediately possible. The components need to be created when using Figmatic. This is an absolutely crucial feature that is missing in Figmatic. This converter would be fine for a smaller file with no components, but not for any kind of design system.

Rating — Components: 😭

Figmatic — Text styles 🔠

There were quite a few defined text files in the original Figma file. So let’s see if these are still there after conversion.

The text styles are missing from the conversion.

Unfortunately, there doesn’t appear to be any text styles in the Figmatic conversion.

Rating — Text Styles: 😭

Figmatic — Colours 🎨

In the original document there were a number of colours in the design system:

The colour styles in the original Figma file

Let’s check this in the Sketch file, but given the other things we have seen above, I am not hopeful.

As we can see, there are also no Colour Variables that have been converted to Sketch. Again, this means a lot of rework by adding everything from the document back. This would be a tedious process.

Rating — Colours: 😭

Conclusion

I think the results speak for themselves.

Comparison of Magicul and Figmatic

Magicul Final Rating:🤩

Figmatic Final Rating:😐

Magicul is obviously the far superior tool when it comes to converting a design system. It can take complicated files and design systems and convert them very accurately. This is exciting as it opens up a number of use cases. It will allow people to switch from Figma to Sketch very easily, giving designers more freedom than before to switch tools as they like.

To me Figmatic seems like a good tool, especially if you want to convert a few files quickly. However, it is not the correct tool if you want to convert any kind of complicated design file or design system (At least not right now). Everything is missing. Again, I think that this tool has a different use case and should not be considered bad. The tools are not comparable.

I hope you enjoyed reading the article!

In the next article, I will compare the converters once again, but this time by converting our Figma file into an XD file.

Update July 2022: The article was updated to reflect the new name of the converter mentioned in this article.