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, mostly just people complaining on Reddit and Adobe forums that such a thing should be possible.

The overarching response from my research was 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

— several designers/stakeholders can work on the file at the same time Browser based — so it can be used on any operating system. This is one of my favourite aspects of Figma, as I personally use a PC (please don’t hate me)

— so it can be used on any operating system. This is one of my favourite aspects of Figma, as I personally use a PC (please don’t hate me) Mostly FREE — it is accessible to all

— it is accessible to all All-in-one package — It includes design, prototyping and design specifications for developer handoff

A lot of times I have noticed that 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:

SVG

XD2Sketch.com

The only other real option is to simply recreate your work, but this is simply too time consuming.

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

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.

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 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.

XD 2 Sketch

Up next was a cool little tool called XD 2 Sketch, which actually converted the entire file.

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 XD 2 Sketch guys have launched a full blown XD to Figma converter I will test this in an upcoming article)

After paying for my little experiment I could then download the document as a Sketch file.

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

The upload was completed pretty quickly

Now let’s see how that went:

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, except some symbols

There is very little rework of the file, if any

Artboards keep their original names, so no need to rename/reorganise them

The Bad

The product is not free (Pricing can be found here). To be honest I am not sure if this is a bad thing at all, especially when it does what it is meant to.

Limited support for symbols or components as of yet (I did contact support and they said it would be added in the coming weeks)

Prototyping features are not kept, but I imagine that this is rather difficult to replicate from platform to platform.

Final Results and thoughts

Now let’s look at them side by side:

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

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 XD2Sketch’s customer service in the next couple of weeks.

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