静电说:现如今设计工具越来越多,各种文件格式之间的转换似乎已经成为设计师小伙伴的“刚需”。今天咱们主要来讨论如何将illustrator文件顺利导入到Figma?



Figma支持导入AI文件吗?


如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


看上图,Figma并不能导入Adobe illustrator的AI格式文件。目前,有如下方法可以将ai中的内容导入到Figma。


· 打开illustrator文件,之间复制内容到Figma

· 打开illustrator文件,然后将其导出为.SVG格式,然后将.SVG格式文件拖入Figma 

· 在Adobe XD中打开AI文件,然后导出为SVG格式,然后再在Figma中打开。

· 在Adobe XD中打开AI文件,然后使用拷贝SVG代码,再将代码粘贴到Figma中。


我使用了第三种方式,因为XD完全免费并兼容AI文件。



导入时遇到的问题


从XD导入到Figma似乎看起来很简单,但事实并非如此。对于复杂的,用于打印的插图文件来说,其中通常会包含数百个图层,这绝对是一场恶梦。我在转换的过程中,遇到过以下问题:


· 每个画板都被转换成单独的.SVG文件。因此,20个画板=20个SVG文件


如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


· 从XD复制和粘贴会导致画板被转换为平面位图。


如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


· 复杂的曲线路径会产生错位变形的情况。



如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP



使用工具进行转换


·Cloud Convert:https://cloudconvert.com/ai-to-svg


使用此工具可以直接上传AI文档,然后转换后下载到SVG文件,接着你就可以在Figma中直接打开它。但是不幸的是,Cloud Convert 只能转换一个画板。


如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


· Zamzar:https://www.zamzar.com/convert/ai-to-svg/


Zamzar的灵活性非常高,它将文件分割成多个画板,我必须将它们逐个导入到Figma。另外,文件并没有预览。


如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


·XD2Sketch:https://xd2sketch.com/converter/ai-to-figma


XD2Sketch可以上传illustrator文件并直接获取Figma文件。XD2Sketch向我们展示了第一个画板作为预览,并给了我一个选择,可以通过付费的方式将所有画板转换为Figma文件。


如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


XD2Sketch转换后的文件

如何将illustrator矢量元素导入Figma?解决办法在这里-LMLPHP


XD2Sketch的转换效果令人震惊。它转换了所有文件的所有内容。您可以从上面的图中看到;我的文件在artboard之外的东西更多,除非XD拥有自己的artboard,否则XD以外的其他工具都无法显示且无法导出为SVG。因此,使用XD2Sketch转换的结果,我感到非常满意,强烈推荐该工具,因为它以最少的步骤为我提供了所需的预期结果。


但唯一不好的一点就是,XD2Sketch的价格是真的不低,转换一个有50个画板的文件需要支付49美元。心疼。但不管怎么说,转换毕竟是刚需,当有需求的时候,这点钱就不算什么了。


原文:https://blog.prototypr.io/illustrator-to-figma


静电说:目前来看,XD2Sketch的转换效果是前边的几个网站都无法比拟的。无外乎收费那么高。但是,如果你的illustrator画板很少,咱们也可以尝试用前两种网站来转换,毕竟省钱嘛~期待后续有更多转换工具可以出现吧。


本文分享自微信公众号 - 静Design(JingDesign91)。
如有侵权,请联系 [email protected] 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

03-31 23:45