Moving designs from XD to Figma — easy or not?

A guide to converting your files from XD to Figma.

I was recently pondering the state of UX design software and how far it has come in recent times.

I originally wanted to write about converting between popular design tools in the one article, but came across something interesting in the process.

I have converted Sketch files into XD (through XD itself) and also Sketch into Figma before, so I knew that this was possible.

But I had never had any actual experience with converting XD files to Figma.

So, like all curious people, I decided to dive deeper and write about opening XD files in Figma.

Is direct conversion possible?

There really wasn’t much information available about converting from XD to Figma.

My research showed that that native conversion wasn’t possible, but there had to be another way.

Obviously it isn’t in Adobe’s best interests to support this through XD itself.

If they did it would mean a huge exodus of users to Figma.

In other words, they’ll likely never support such a feature.

Why convert files to Figma?

There are a number of reasons to start with Figma, so let’s start with the main benefits.

• Real time collaboration — several designers/stakeholders can work on the file at the same time. XD is also offering this, but I think that there is too much friction with this. With Figma, it is as simple as having a link and you can start designing straight away.
• Browser based — so it can be used on any operating system. This is one of my favourite aspects of Figma. Design tools should be accessible and not be determined by the operating system that you use.
• Mostly FREE — it is accessible to all
• All-in-one package — It includes design, prototyping and design specifications for developer handoff. For some people, the experience is a bit more comfortable compared to XD.

Clients like the flexibility of cross compatibility. They can also minimise the risks and complications of using several tools.

They can also have a better overview as everything is online. They can also provide feedback within the file itself, without having to publish anything or go into another interface like you would with Adobe XD for example.

Figma is a great tool, there is no question about it.

Now, let’s get into our conversion options.

Solutions to convert XD to Figma

After my quick Google search I realised that the options are really very limited for this kind of conversion, but two options stuck out.

Your options are:

• Magicul.io
• SVG
• Recreating your work — Extremely time consuming and I won’t consider this as an option for the purpose of this article.

Testing the solutions

I created a mock XD file to test both options with the original artboard looking like this:

The finished test file

I used components, buttons, text and a picture to see how things translate with each solution. I also made an identical artboard with a click interaction to ensure that everything was covered.

Magicul

Up next was a cool little tool called Magicul. Which actually converted the entire file without me having to do anything!

In order to use the converter I first needed to convert my XD file to Sketch (UPDATE 20 June 2020: It now seems that the Magicul guys have launched a full blown XD to Figma converter I will test this in an upcoming article)

Uploading your file to Magicul

After paying for my little experiment I could then download the document as a Sketch file. Which I can use to import into Figma.

Downloading the original XD file as a Sketch file.

Then I could import the file into Figma, with the below function on the Figma menu:

Importing the Sketch file into Figma

The upload was completed pretty quickly

The upload for the file was completed very quickly.

Now let’s see how that went:

The conversion result using XD 2 Sketch

Everything looks pretty good and the file seemed pretty clean upon closer inspection in Figma.

The Good

• You save a lot of time in the conversion process compared to SVG (plus rework)
• Everything was converted, including symbols/components. Even prototyping features are able to be converted (although with some restrictions)
• No rework requried
• Artboards keep their original names, so no need to rename/reorganise them

The Bad

• The product is not free (Pricing can be found here). The price is more than worth it for the amount of time it saves. If this tool can save me even one hour of time, it has already been worth it. I can use the extra hour to do other things.

SVG

Up first was the SVG conversion method.

From XD, you can copy artboards and paste them directly into Figma.

Pasting SVGs into Figma

It is also possible to export as an SVG from XD and paste them into Figma.

Let’s look at the results:

Obviously this is not ideal, as it does not look like our original at all and a few things have gone wrong.

Can you see the difference between this and the original?

The Bad

• Non-vector formats like PNGs or JPGs, aren’t converted.
• You will need to add things to recomplete the file (especially if using images)
• Lots of quirks ie text box sizing is not respected
• Prototyping functionality is not carried over
• The background of the artboard is converted into a vector shape, which in my case was oversized (too wide)
• Symbols/components are not supported
• Artboards don’t keep their names
• Just too much rework to be a viable option for any sort of complex files

The Good

• Relatively quick way to paste actual vector elements into Figma
• Good if you only have text and vector elements and nothing else in the file. This seems like a rare use case though.

Final Results and thoughts

Now let’s look at them side by side:

Comparison of the two methods. Which one looks better?

As you can see, there is a clear winner here: Magicul.

Everything has been preserved with minimal rework.

There isn’t really much more to say, it does what it should with very little work after the fact. Of course there was the minor issue with the symbols, but I will update the post when I check back with Magicul’s customer service in the next couple of weeks.

UPDATE February 2021: Symbols/Components are now supported by the Magicul converter.

Until then, happy converting!

A last question for you all — What is a great feature that you think is missing from design tools today?

In case you were wondering, here is my website: sebastian-tan.com