越来越多的设计团队开始从Sketch迁移到Figma,这是大势所趋。但是这两种工具之间存在差异。在这篇文章中,我将为你分享一些无缝切换的技巧。
这篇文章来自Buninux.com。如果你对设计系统感兴趣,可以关注我最近的项目——,可以应用到Sketch和Figma的设计系统切片。
为什么要用这两个工具?
Figma和Sketch都非常适合创建UI界面和组织组件库。这两个工具有很多共同点,但是它们处理画布和对象的方式不同。
这两个工具已经得到了设计界的认可和尊重。它们的功能相似,但同时也有各自的缺陷和不足。
当然,这两个工具的流行很大程度上是因为它们能够更好地创建和管理设计材料,真正满足现代设计师的需求。
为什么需要迁移到Figma?
一般来说,从Sketch迁移到Figma有几个原因:
你在找一个有协同功能的设计工具,而Sketch本身没有。你对Figma很好奇,想知道如何正确使用而不浪费材料。您必须同时使用这两种工具。你比较熟悉素描,偶尔用Figma。你想知道你能用到什么程度。如何正确迁移过去?
与其他原型竞争对手相比,如InVision Studio、Adobe XD、Framer等。Figma可以更方便地从Sketch导入相关文档,将草图符号转化为Figma组件,同时保持实例间的父子关系,从而保持更高效的文件传输。
但同时,如果需要正确转换,就需要了解两个工具的区别,克服一些痛点,顺利切换。
接下来,我们正式开始。
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 会将导入的画板/符号的背景颜色转换为帧的底色。
为了使你的设计看起来和 Sketch 中一样棒,请确保整体 Figma 画布的颜色(是的,它是可调整的!),或者组件框架本身的颜色。
更新组件的名称
Sketch发中的名称可能会包含 . 或者 _ 这样的符号,这些名称通常用来将列表中某些条目优先,并将置于菜单的顶部。
Figma 当中也使用这些符号,但是Figma 的库中会优先排除使用这些标点的组件,这意味着使用这些前缀的元素将无法被迅速的搜索获得。为了确保每个人都能访问你所提供的素材,你得解决这个问题。你可以使用 cmd + r 这个快捷键来调用重命名功能,快速删除不必要的标点符号。
你还可以通过向下滚动整个 Public Library 并通过右键菜单来启用未包含的组件,来添加它们。
3、重新塑造风格
当你将所有的素材和组件正确导入 Figma 之后,就需要让它们和对应的样式重新连接到一起了。想要尽可能方便,你需要执行一系列操作,选择相似的图层,并将样式链接到一起。
Figma 提供了一套原生的解决方案。你想要启用它,就需要打开「edit」菜单,然后点击「Select all with the Same」来将相应的样式,绑定到一起。
你还可以选择最近发布的插件「Similayer」,它将会提供更多命令来搜索你需要的图层。
这样一来,你基本上就完成了设计系统和组件从 Sketch 到 Figma 的完整迁移。你可以在正式使用之前,仔细检查和验证一下。
结语
从一个工具前一到另外一个设工具并不是一件复杂的任务,你更多需要的是了解工具本身的属性,进行正确的操作组合,并且通过一定的手工处理,来重新配置。
我很高兴能够看到不同的软件之间的竞争。但是,工具的选取是一个不断变化的事情。我相信很多转向 Figma 的设计师,可能会在不久之后又重回 Sketch。工具本质上是帮助设计师达成设计目标,设计师根据实际情况来选取工具是应有之义。
在这个不断变化的世界当中,更好地促进设计,这是设计师的责任。最后再安利一下 Slice,这是我和我的朋友 Roman Banks、Todor Iliev 开发的一个模块化的设计系统,同时兼容 Sketch 和 Figma,来试试看吧