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.

最近，我写了一篇有关将XD设计移至Figma的文章。 这是一个非常有趣的实验，似乎吸引了很多人。

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

不过这让我思考。 如果我想将Figma文件转换为XD怎么办？ 究竟有哪些选择？ 有多容易？

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:

有三种用于转换文件的选项：

• The SVG method
  SVG方法
• The recreation method
  娱乐方法
• Using a Figma to XD converter from XD2Sketch.com
  使用来自XD2Sketch.com的Figma到XD转换器

设置测试文件 (Setting up a test file)

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

我首先建立了一个测试Figma文件来比较上述选项。

Let’s have a look at the file:

让我们看一下文件：

It also has a few components too:

它还具有一些组件：

SVG方法 (The SVG method)

Rating: 😐

评分：😐

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

SVG方法使用从Figma画板转换而来的SVG文件。

The files are then imported into XD.

然后将文件导入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中选择画板并单击鼠标右键。 然后选择“复制/粘贴”，最后选择“复制为SVG”。 现在可以将画板粘贴到XD中。

Or

要么

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

2.在Figma中选择画板，然后从“导出”部分下的右侧工具栏中将其导出。

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

您可以从此处拖动或复制文件并将其粘贴到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.

从XD的“图层”面板中可以看到，SVG仅具有矢量图层，没有任何东西被分组在一起。

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.

当然，由于SVG格式的性质，也没有任何组件。

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.

如果您有一个非常简单的文件而没有更复杂的元素，那么SVG方法可能会很好地工作。

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

或者，如果您希望导入XD以享受一些原型制作的好处(或其他)。

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.

此方法涉及使用旧文件作为参考在XD中从头开始重新创建文件。

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.

这不是可扩展的解决方案。 众所周知，时间就是金钱，这种方法并不是完成工作的方法。

This is exactly the reason why I think the next option is a really good one.

这正是我认为下一个选择非常好的原因。

使用Figma至XD转换器 (Using a Figma to XD converter)

Rating: 🤩

评分：🤩

Last, but not least comes a third party converter.

最后但并非最不重要的是第三方转换器。

This converter does not directly convert to XD, but converts Figma files to Sketch, which can then be imported into Adobe XD.

该转换器不会直接转换为XD，而是将Figma文件转换为Sketch，然后可以将其导入Adobe XD。

But 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. Enter your email address and click “Upload now”

   将到Figma文件的链接输入到转换器中 。 该文件必须是公开的。 输入您的电子邮件地址，然后单击“立即上传”

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

2.您将看到带有进度条的上传。 您将看到文件的预览。

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

如果您满意，请点击“立即转换”

3. Select your plan and complete the checkout

3.选择您的计划并完成结帐

4. The file will now convert

4.现在文件将转换

5. You can now download your file:

5.您现在可以下载文件：

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

6.现在，您要做的就是在Adobe XD中打开文件，然后就完成了。

结果 (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.

文本也可以编辑，并且所有内容都保存得很好。

The only disadvantage here is that Symbols/Components are not supported. I reached out to the XD2Sketch team and they assured me that they are working on this. So I will come back and update the article when they let me know that the feature is finished.

唯一的缺点是不支持符号/组件。 我与XD2Sketch团队联系，他们向我保证，他们正在为此工作。 因此，当他们让我知道功能已完成时，我将返回并更新文章。

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.

该转换器是一个很好的选择，目前还支持一些不同的选项，例如XD到Sketch，XD到Figma和Figma到Sketch。

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

我希望本文能使您的生活更轻松一些。

Happy designing!

设计愉快！