Moving designs from Figma to XD — Just how easy is it?

Convert Figma to Adobe XD Graphic

Recently, I wrote an article about moving XD designs to Figma. It was a really interesting experiment and one that seemed to interest quite a lot of people.

It got me thinking though. What if I wanted to convert Figma files to XD? What exactly are the options? How easy is it?

There are many great reasons to use either tool, but I decided that it was time to close the loop and see just how easy it is to do the conversion.

Read on to find out more

The methods

There are three options for converting your files:

  • Using a Figma to XD converter from XD2Sketch.com
  • The SVG method
  • The Recreation method

Setting up a test file

I started by setting up a test Figma file to compare the above options.

Let’s have a look at the file:

View of unconverted Figma File
View of unconverted Figma File

It also has a few components too:

Components in Figma
Components in Figma

Using a Figma to XD converter

Rating: 🤩

Last, but not least comes a third party converter called XD2Sketch.

This converter converts Figma files to Sketch, which can then be imported into Adobe XD.

Let’s see the results.

Converting the file

  1. Enter the link to the Figma file into the converter.

The file needs to be public (you can find out more here about making files public). Enter your email address and click “Upload now”

Converting Figma file to Adobe XD
Converting Figma file to Adobe XD

2. You will see the upload happening with a progress bar. You will see a preview of the file.

If you are happy with it click on “Convert Now”

Converting Figma File to Sketch XD
Converting Figma File to Sketch XD

3. Select your plan and complete the checkout

4. The file will now convert

Figma File converting to Sketch XD
Figma File converting to Sketch XD

5. You can now download your file:

File download of converted Figma file in Sketch format
File download of converted Figma file in Sketch format

6. Now all you have to do is open the file in Adobe XD and you are done.

The results

Let’s see how the conversion looks.

XD file converted from Figma
XD file converted from Figma

As you can see, all the layers have been preserved perfectly, as well as the mask.

The text can also be edited and everything has been preserved very well.

UPDATE February 2021: When I contacted the XD2Sketch team last year, Symbols and Components were not supported. They have let me know that these are now supported by their converter, and they even gave me the opportunity to test it for myself. This is great news for designers and means even more flexibility when converting files from Figma to XD.

The converter is a great option and also currently supports a few different options for conversion like XD to Sketch, XD to Figma and Figma to Sketch.

The SVG method

Rating: 😐

The SVG method uses SVG files that have been converted from Figma artboards.

The files are then imported into XD.

There are two ways to do this:

  1. By selecting the artboard in Figma and right clicking. Then selecting Copy/Paste and finally Copy As SVG. The artboard can now be pasted into XD.
Figma Copy Artboard as SVG
Figma Copy Artboard as SVG

Or

2. By selecting the artboard in Figma and exporting it from the right hand toolbar under the “Export” section.

Export section in Figma
Export section in Figma

From here you can drag or copy and paste the file into XD.

Let’s have a look at the first result.

Figma SVG file in Adobe XD
Figma SVG file in Adobe XD

It looks good, but is it really?

Let’s have a closer look

As you can see from the layers panel in XD, the SVG only has vector layers and nothing is grouped together.

The text has also been converted to a path, so it can no longer be edited.

This is not ideal for those wanting to work on the file further.

Of course, there are also no components due to the nature of the SVG format.

Now let’s have a look at our image mask:

SVG Image Mask from Figma in Adobe XD
SVG Image Mask from Figma in Adobe XD

Unfortunately the mask is gone and the image is in its original form.

As you can see, using the file for further work will be difficult and limited. The text, masks and components would need to be recreated.

The SVG method may work well if you have a very simple file without more complex elements.

Or if you are looking to import into XD to enjoy some of the prototyping benefits (or something else).

This method is not a good one, especially if you want to work on the file further.

The Recreation Method

Rating: 😭

This method involves recreating your files from scratch in XD using the old file as a reference.

This method is time consuming and not worth it.

I didn’t attempt it for the sake of this test as I knew it would just take too much time. After all it is more or less like designing from scratch.

After doing some researching on these conversion methods, I found that a number of people are actually using this as a solution!

This is not a scalable solution. And as all designers know, time is money and this method is not the way to get the work done.

I hope this article helped to make your life a little easier.

Happy designing!

The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.

UX Designer | Digital product enthusiast | Amateur Furniture Maker | Sub 2:28 Marathoner | http://sebastian-tan.com