从Sketch 切换到 Figma，只需要这样一份指南！

点击"ArtsPlus"添加关注，见证彼此的成长！

Except：ArtsPlus（. Bunin Dmitriy）；

越来越多的设计团队开始从 Sketch 迁移到 Figma 这是大势所趋。但是这两个工具之间有差异，这篇文章我会为你分享一些无缝切换的技巧。

这篇文章来自 Buninux.com。如果你对于设计系统感兴趣，可以关注一下我近期的项目——可以适用于 Sketch 和 Figma 的设计系统 Slice。

为什么要用这两款工具？

Figma 和 Sketch 都非常适合用来创建 UI 界面，并且组织组件库。这两款工具有很多共通的地方，但是它们处理画布和对象的方式有差异。

这两款工具都得到了设计界的认可和尊重，两者有着类似的功能，但是同时两者也都有各自的缺陷和短板。

当然，这两款工具能够火成这样，很大程度上是因为它们能够更好地创建并管理设计素材，真正满足现代设计师的需求。

为什么你需要迁移到 Figma？

通常而言，从 Sketch 迁移到 Figma 会出于以下几个原因：

你正在寻求具有协同功能的设计工具，但是 Sketch 本身并不具备

你对于 Figma 很好奇，并且想知道怎么做才能在不损耗素材的前提下正确使用它

你必须同时使用这两种工具，你对于 Sketch 更熟悉，偶尔会用到 Figma，想知道自己能用它做到什么程度。

如何正确迁移过去？

相比于 InVision Studio、Adobe XD、Framer 等其他的原型类竞争对手，Figma 可以更加轻松地从 Sketch 中导入相关的文档，将Sketch 符号转化为 Figma 组件，同时还能保持实例当中的父子关系，从而能够保持更高效的文件传输。

但是与此同时，需要正确转化的话，你需要明白这两款工具之间的区别，并且克服一些痛点，并且顺利地切换。

接下来，我们正式开始吧。

1、优先处理样式

为了避免出错，并且避免花费大量的时间来重新规整配色和文本样式，你应该首先创建整个工具包的核心——图层和文本样式。

第1步：导入

打开 Figma，然后导入包含你的品牌素材的全部素材。

第2步：根据导入的属性创建图层样式

Figma 不会直接转换样式，因此你需要自己手动创建样式。创建图层和文本样式和 Sketch 中基本上完全一致。你只需要在命名的时候，使用正斜杠（/）就可以进行快速的分组，然后在文档当中访问。

第3步：创建文本样式

在 Figma 当中，你不必为配色和样式来创建额外的样式。颜色可以直接应用于文本样式，而对齐方式则直接在实例中设置，所以你不用自己再额外复制样式。

注意：在浏览器中使用 Figma的时候，你无法使用本地安装的字体，因此务必下载并安装 Font Helper ，并且确保它可用。

第4步:对比和适应

对比结果样式的面板，同时试图习惯新的布局样式。确保一切都已经妥善安排了。

进阶提醒

在 Figma 的属性当中，比如配色、阴影等等，都可以单独应用于单个图层，而无需将它们组合成为新的样式。这些特性确保你可以让你的风格样式更加清晰，而无需在 Sketch 中保留所有不必要的样式组合。

下面是一个简单的案例。你可以通过这个案例明白两个工具是如何创建带有阴影样式的按钮的方式：

Sketch 会让色彩和阴影构成一个独立的样式，而 Figma 当中则不需要。

如果你没有时间重新创建所有的这些样式，那么你可以参考下面的免费样式指南，了解 Sketch 和 Figma 的文件组织方式之间的差别。