越来越多的设计团队开始从 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 的文件组织方式之间的差别。

如果你想了解更多关于两个软件之间的样式差别，可以下载这个文档：Figma 和 Sketch 样式指南

2、组件清单

在确定样式之后，我们继续完成后续的部分。

找到已经转换过来的样式之后，尽量按照下面的样式来进行后续调整，确保组件能够正常运行。

删除无效的Figma组件（也就是原来的Sketch符号）

在使用 Sketch 的时候，你可以通过创建符号来定义组件的边框、特定的几何形状，并且一般而言，我们会称之为形状符号，或者材质符号。

在 Figma当中，你完全不需要。相反你可以自由地控制任何组件或者实例的圆角半径。因此，无比删除所有你未使用的元素，并且将「符号（Symbol）」页面重命名为「组件（Components）」，以避免混淆。下面是在 Sketch 和 Figma 中更改租价你形状的方法差异。

更新限制条件

在 Figma 当中，约束条件略有一点不同。如果想要适应过来，你首先需要习惯 Frame 的概念。

我强烈建议你查看官方的博客，了解相关主题更多的信息，以便正确地更新组件，提升操作。

官方指南：《Using Constraints》

更新背景色

你会注意到某些组件在 Sketch 中看起来的样子和 Figma 当中看起来有所不同。这主要是因为 Figma 中的容器默认是没有白色背景的。相反，Figma 会将导入的画板/符号的背景颜色转换为帧的底色。