Converting from Sketch to Figma: Is native conversion always best?
By: Sebastian Tan
Tags: UX Design, Prototyping, UI, Visual Design, Graphic Design

Figma completely ignores the fixed size after converting the file. This means that if you are using fixed-sized text boxes, you will likely have a lot of work to do to correct this.

From my perspective, this is a huge part of any digital designers workflow, displaying content within a defined space. Fixed text boxes are used very frequently to show constraints with This could make your files messy and could be very time consuming to fix.

Fix in Figma: After doing some research, there is unfortunately no quick fix for this.

According to Figma this is the intended behaviour of such a text box.

The Clip Content function is enabled in Figma by default

Grouped items with shadows are imported into Figma with the “Clip content” function enabled. The shadow cuts off because the shadow extends outside of the bounding box.

Here is a normal button with a drop shadow I made in Sketch as a group to give you an idea of what I mean:

Here is how the button looks after converting the Sketch file with Figma:

The shadow is completely missing and this is accentuated by the rounding on the button.

Fix in Figma: In order to fix this, you will need to manually turn off the clip content function for each group.

Here is the button again after removing the “Clip content” function.

Perfect, everything is back to normal again.

My advice would be to additionally use only components for buttons, which will avoid this happening and is of course best practice. However, there are probably other elements that may require this too, which could cause some inconsistency in your files. Imagine having 100 buttons in a file, this would certainly take a long time to correct by finding them all and turning off clip content.

Colour and Text Styles aren’t migrated when converting

Colour and text styles are the bread and butter of a designers toolkit. They are used to quickly keep consistency and speed up workflow.

In my test, the converted Sketch files had no colour or text styles in Figma, which was quite alarming.

Here are some of the colours and styles I defined in Sketch for the test:

Colour Styles in Sketch

Text styles in Sketch

Now let’s see what happens when we open the file in Figma:

The colour styles are completely missing in Figma after converting from Sketch.

The colour styles are missing and the text styles are also not there:

Unfortunately the text styles are missing too

This can be quite annoying and means that styles colours from Sketch will need to be completely redefined in Figma.

I also added the text styles manually in Figma to see they would be detected to match the ones in the existing document.

The styles were not automatically detected by Figma. This means that you will need to go through the entire file (or files) to reapply all the styles to each element!

The fix: The only option is to redefine and reapply the styles that you had before.

This would be an extremely time-consuming option and makes me question whether or not this kind of conversion would be worth it.

Tint does not work in Figma

Tint is a great feature that Sketch introduced to change colours to groups and symbols.

This means adding only one override, rather than making several to a group or symbol. Here is the feature in action in Sketch:

Here is the tint applied to the group on the right.

After converting, the tint colour is completely missing in Figma.

This is interesting because it doesn’t recognise the new colour at all. I understand that Figma does not have the same functionality. But the colour should be at least saved, even if there is no similar function.

Fix: Change the colour back manually.

This gets complicated because you need to go back into Sketch to actually find out what the colours were and compare them.

There will be no trace of the old colour.

In fact, you may not even notice that the style is missing at all, which is even more worrying.

This means you will need to compare the Sketch file to the Figma file to check for any such inconsistencies.

The alternatives

After looking at the results, I decided that the Figma converter is good, but not quite good enough.

Looking around, it seems that nobody would focus on a tool that has already been created. But if we have the problems we did above, it makes sense that someone would make such a tool.

So are there actually any converters on the market and what exactly do they do differently?

I found one called XD2Sketch, which offers a number of different conversion options, such as:

XD to Sketch (it’s in the name of course)

XD to Figma

XD to Sketch

Figma to Sketch (the one we want)

Figma to XD

Let’s have a closer look at the tool by taking the file we used earlier and seeing if the issues that we had before still exist

The XD 2 Sketch converter

The interface

You can simply drag and drop your file into the converter.

After this, you follow the checkout steps and you are ready to go.

Cost

There are many pricing options for the tool. The base price for one file is $50 with 50 artboards and $84 for a file with unlimited artboards.

But don’t go running yet, let’s see how well it works first. I will in the name of science (more for my work actually) sacrifice $50 and see what the results are.

I wouldn’t be opposed to spending this kind of money on a file if I know it saves me a good amount of time, so I am optimistic.

But, the proof is in the pudding so let’s see how well it works.

The Test

I took the file I used to show everything in this article and decided to use it as a basis for my experiment.

We all know what the problems are with the Sketch to Figma converter from Figma themselves, now let’s see what XD2Sketch has to offer.

XD 2 Sketch — Results

Now the fun part, let’s see how XD2Sketch’s converter performed

Tints

Tints are also working and as you can see in the right-hand bar of Figma.

If we look closer, we can see that this is the same colour #2DAF95, as what we had in Sketch.

The correct colour in Figma for Tints

Text Styles

Now let’s look at the text styles we added in earlier as “H1 Text” and “Body Text”.

Text styles in Figma

As we can see here, the body text has also come through in Figma.

Colours

Now let’s have a look and see if we can find our colour styles that we created earlier in Sketch.

Converted colours in Figma

All the colours we created in Sketch have moved across nicely.

Clip Content

As you can see the converter has done a good job of not clipping the content for groups.

The content is not clipped at all by Figma when using the XD2Sketch converter

Conclusion

I found that Figma is producing a reasonable converter, with some pretty obvious flaws. These flaws could take up a significant amount of time to fix.

Do I think it is the best converter? My answer is actually a “No”, I think XD2Sketch’s converter is doing a pretty good job of doing the basics right and picking up where Figma’s drops off.

Let’s see how Figma responds to this.

The main issue I think people are going to look at is the price of XD2Sketch and think “That’s too much”. I can understand and respect that not everyone wants to spend $50 on converting a file. I personally see it as a saving. If the tool can save me 1 hour of work, then it has already paid for itself. I believe in the old philosophy that in order to make money you need to spend money.

Here are two scenarios you will find yourself in if you do the conversion:

Scenario 1 😃 — you spend the $50 and get good results fast. This gives you more time to win clients, work on other projects or to work on your portfolio (we all know what I mean).

OR

Scenario 2 😢— you save $50 and spend too many hours on fixing everything in your design files. You will stress out and complain that you have no time to work on your portfolio.

I will let you decide for yourself what is the most important thing for you to do.

For me, working for half a day (or who knows how long) to fix some problems is just not worth it. The Figma converter should work better and it probably will at some point (let’s revisit this in a few months)

If I need to convert a large file right now, I know exactly which website I will be visiting.

As they say, time is money, I won’t be wasting either of these things.

Happy designing (and working on your portfolio 😊 )!