Moving designs from Figma to XD — Just how easy is it?
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 Magicul.io
- 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:
It also has a few components too:
Using a Figma to XD converter
Rating: 🤩
Last, but not least comes a third party converter called Magicul.
This converter converts Figma files to Sketch, which can then be imported into Adobe XD.
Let’s see the results.
Converting the file
The file needs to be public (you can find out more here about making files public). Enter your email address and click “Upload now”
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”
3. Select your plan and complete the checkout
4. The file will now convert
5. You can now download your file:
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.
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 Magicul 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:
- 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.
Or
2. By selecting the artboard in Figma and exporting it from the right hand toolbar under the “Export” section.
From here you can drag or copy and paste the file into XD.
Let’s have a look at the first result.
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:
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!
