figma设计_轻松地将设计从xd移至figma

figma设计

I was recently pondering the state of UX design software and how far it has come in recent times.

我最近在考虑UX设计软件的状态以及最近它的发展。

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.

我之前已经将Sketch文件转换为XD(通过XD本身)，也已经将Sketch转换为Figma，所以我知道这是可能的。

But I had never had any actual experience with converting XD files to Figma.

但是我从没有将XD文件转换为Figma的实际经验。

So, like all curious people, I decided to dive deeper and write about opening XD files in Figma.

因此，像所有好奇的人一样，我决定更深入地研究并撰写有关在Figma中打开XD文件的文章。

是否可以直接转换？ (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.

确实并没有太多可用的信息，主要是人们在Reddit和Adobe论坛上抱怨这样的事情应该可行。

The overarching response from my research was that native conversion wasn’t possible, but there had to be another way.

我研究的总体React是不可能进行本地转换，但是必须有另一种方式。

Obviously it isn’t in Adobe’s best interests to support this through XD itself.

显然，通过XD本身支持这一点符合Adobe的最大利益。

If they did it would mean a huge exodus of users to Figma.

如果他们这样做，将意味着大量用户涌入Figma。

In other words, they’ll likely never support such a feature.

换句话说，他们可能永远不会支持这种功能。

为什么要将文件转换为Figma？ (Why convert files to Figma?)

There are a number of reasons to start with Figma, so let’s start with the main benefits.

从Figma开始有很多原因，所以让我们从主要好处开始。

• Real time collaboration — 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)

  基于浏览器 -可以在任何操作系统上使用。 这是我对Figma的最喜欢的方面之一，因为我个人使用PC(请不要讨厌我)

• Mostly FREE — 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.

他们也可以提供更好的概览，因为一切都在线。 他们还可以在文件本身中提供反馈，而不必像发布Adobe XD那样发布任何内容或进入另一个界面。

Figma is a great tool, there is no question about it.

Figma是一个很棒的工具，毫无疑问。

Now, let’s get into our conversion options.

现在，让我们进入转换选项。

将XD转换为Figma的解决方案 (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.

经过快速的Google搜索后，我意识到这种转换的选项确实非常有限，但其中有两个选项。

Your options are:

您的选择是：

• SVG
  SVG
• XD2Sketch.com
  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:

我创建了一个模拟XD文件，以使用原始画板测试这两个选项，如下所示：

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 (SVG)

Up first was the SVG conversion method.

首先是SVG转换方法。

From XD, you can copy artboards and paste them directly into Figma.

在XD中，您可以复制画板并将其直接粘贴到Figma中。

Pasting SVGs into Figma

将SVG粘贴到Figma中

It is also possible to export as an SVG from XD and paste them into Figma.

也可以从XD导出为SVG并将其粘贴到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.
  不会转换非矢量格式，例如PNG或JPG。
• 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
  相对快速地将实际矢量元素粘贴到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草图 (XD 2 Sketch)

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

接下来是一个很酷的小工具XD 2 Sketch ，它实际上转换了整个文件。

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)

为了使用转换器，我首先需要将XD文件转换为Sketch(2020年6月20日更新：现在看来XD 2 Sketch家伙已经推出了完整的XD到Figma转换器，我将在以后的文章中对此进行测试)

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

在支付了小笔费用后，我便可以将文档下载为Sketch文件。

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

然后，可以使用Figma菜单上的以下功能将文件导入Figma：

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.

经过Figma的仔细检查，一切看起来都不错，文件看起来也很干净。

善良 (The Good)

• You save a lot of time in the conversion process compared to SVG (plus rework)
  与SVG相比，您在转换过程中节省了大量时间(加上返工)
• 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.

如您所见，这里有一个明显的赢家：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.

其实并没有太多要说的，事实完成后，它所做的工作很少。 当然，符号有一个小问题，但是当我在接下来的几周内使用XD2Sketch的客户服务再次查询时，我将更新该帖子。

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

如果您想知道，这里是我的网站： sebastian-tan.com

翻译自: https://uxdesign.cc/moving-designs-from-xd-to-figma-easy-or-not-ed76c93e657c

figma设计