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!

設計愉快！