从 Sketch 迁移到 Figma 半年后：以为是个青铜结果是个王者？！

阅文体验设YUX – 梁捷 ：去 10 月始阅文海外设从 Sketch 迁移到 Figma。如果你还了解 Figma 或者在犹豫要要切换到 Figma，这里会给你答案。

Figma介绍：以为是个青铜结果是个王者

Figma 是一款基于 Web 的在线设计工具，很多户包括笔者在对于在线工具都会意识地感觉性差，功弱，尤是对于一款专的生产工具，这种靠谱的感觉更为强烈。

然实际体验下会发 Figma 不仅功能完善，与 Sketch 相比别无二致。且操作体验如丝般顺滑，虽然网页应用，但 Figma 的编辑器用 C++ 编写，通过 emscripten 将 C++ 编译 JavaScript 的方式获得高效的码与内存控制，得以达到 60fps 的流畅度与 2x 于原应用的性能。因此完全可以胆去使用这款线设具，体验一番 Figma 独特的魅力，从此告别被 Sketch 低下的性能支配的恐惧。

Figma与Sketch

既然一款专业的设具，与 Sketch 同一赛道的竞争对手，那自然避不与 Sketch 的面交锋。

△ Sketch界面

△ Figma界面

Figma 与 Sketch 布局与功能体上常相似，不过 Figma 异常简洁导航栏可能会让怀疑 Figma 功能真够完善么？坦率地说 Figma 确实有些基础功能缺失，比如 Figma  Scale 能手动拖拽目标缩放，不能像 Sketch 样设定数值进缩放。是相比那些关痛痒低频功能，Figma 没有 Sketch 插件功能以及丰富插件生态也许更让遗憾。今年6月12日，Figma 官宣布开始插件功能内测，结合 Figma API 不知会擦出什么样花，常让期待。

1. 比Sketch弱？不存在

事实上以上功能缺失完全不会影响到日常设计工作，反而 Figma 所拥有以下功能让 Figma 在体体验上赶 Sketch 数个身位：

• 多人协作
• 评论
• 观察者模式
• 版控
• 标注（Developer Handoff）
• 团队组件库与样式
• 自动保存
• 全制霸
• 智能局（Smart Selection）

1～8 项功能均得益于 Figma 在线的性，让更直更高效的多人协作模式成为可能，多位计可以在一个计文件内同进行编辑操作，添加评论进行沟通。而且一个链就可以让所有人在任何上直访问计文件，发送给需求方 Figma 就是你讨论交流的板，发送给开发 Figma 就是在线的标注工。

而 Smart Selection 则是笔者最喜欢的功能之一。Smart Selection 主要是用来批量操矩阵，帮助设计师一步到位整局，省去拖拽、间距等繁琐的操。

△ 通Smart Selection快速操列表间距与排序｜图来自Figma Twitter

类似的功最早现在 Adobe XD 上，后来 Framer X 增了自己 Stack，实现了 CSS 的 Flex 布一样的效果，Figma 在年 10 月左右跟进上线了 Smart Selection，并且经过个月的迭代从原本只单独控制行或者列，进到可控制矩阵。

△ 通过Smart Select快速布容｜图片来自Figma Twitter

2. 为创效生产环境而生的Figma

毫夸张的说设计师的日工作只有 20% 的时间在发挥创意解决问题，80% 的时间都在重复一些机械操作改颜色、改间距、改列、改命名等等，最后还要整件同步件，这些都整个设计工作冗余、低效还无趣。

Sketch 每版本新后除了卡、bug 频出、插件又法用、旧版又法打新版文件之外，几乎看不到其主动设师创造高效的产环境作出的努力。即便近线的 55 增加的 Smart Distribute 与 Create new layers from SVG code，还 56 将会线的 Team Collaborate 提升产力的功能都非常被动的从 Figma 抄袭搬运，虽然这些功能 Figma 已线了半甚至一之久。

相比不思进取 Sketch，Sketch 插件们为了提升设计效率倒是异常用力，可惜是优秀插件却越来越少，从 Measure、Paddy 退出可以瞥见 Sketch 插件生态已经大不如前。

对比 Sketch，在越发深入的使用 Figma 后，越会发现 Figma 是一款更为先进、更理解计工作方式和需求的界面计工，除了刚才列举的数个提升生产体验的功能，还包含着大量细节，如矢量网格、批量组件化，快速复用属性，链 Google Fonts 等等，都在帮助计从低效的泥沼中解放出来。不仅如此，Figma 让计无需再考虑操作系统，也不需要管理插件、存储，也不需要管同步和协同的问题，计唯一要考虑的是计本身，就像说的「让计专注于计，其的都见鬼去吧。」

之前在推特上看到 Eddie 的一条推「If design tools were cars…」

△ Eddie Lobanovskiy @lobanovskiy：If design tools were cars… 图来自Eddie‘s ****Twitter

应该说总结的非准确，Sketch 像丰田的凯美，有广大群众基础的老牌厂商的经典车，而 Figma 则像 Tesla 一样性卓越，超越时代充满未来感。那未来属于谁？反正会是凯美。

封闭与开放

Figma 被到海外项目 Webnovel 带来的最显而易见的变是我们再使 Sketch、Mesaure、Dropbox、Svn，白，因为 Figma 本身整合了上有功，省了在同工具之间切换，为我们节约了时间与精，而且这样的整合只是 1 + 1 + 1 + 1 的功叠而已，中有着奇妙的反应，从根本上改变我们的工作模式。

1. 设计孤

设计长久来都像是一座封闭的孤，仅与上游的连接困难，甚至设计的连接效率都极低。

关于者，设师交付给需求方的一张导出的效果图，交付给发的标注与切图。设文件因专业设具的限制或者共享的问题，项目的下游基本无法直接访问，这导致了每次设师的输出都需历好几骤，设又会因各种问题频繁发修改，输出设资源传递给下游的低效链接方式损耗了设师时间。深入的设过程对下游的不透明也需对低效负责。

而关于后者，连接设计师进协作更是噩梦，暂不提设计文件在项目内步共享遇到诸多问题，多位设计师在个项目内协作能单线程处理各自需求，如需要多位设计师时合作完成个需求，必然需要付出更高沟成本以齐设计师想法与设计效。

2. 协作全新可能

Figma 到来则打破了设计孤岛封闭格局，连接设计与上下游仅仅需要个链接，原本能藏匿于设计师 dropbox 共享文件夹设计文件，现在项目所有成员都可以障碍访问，论是交互稿是视觉稿、组件系统、设计规范。

△ 分享Figma文件需要复制链接即可，项目内成员则可以接查看

对于计来说，透开放的计文化可以让项目成员更了解计的工作思考方式，减少其项目节点因息不对等造成的不必要摩擦。对于项目来说，产品、开发以及作的计都可以一个需求是如何演化为计稿的过程，参者可以更早的提出想法计交流，在充的沟通下完成的计可以有效避免完成后的反复修改。

刚才还提到设计师之间的协问题，现在我们每个版的迭代是由两到三位设计师在一个 Figma 文件内按需求分 Page 一完成。不仅此，Figma 的在协的特还给设计师之间的协一个新的能，我们尝试更紧密的协设计模式，在一个子需求下拆分子任务，比上个版中我们将段评需求分为页面框架与评论组件两个子任务，在同一个 Page 内一位设计师搭建页面框架，另一位设计师同步进行评论组件设计，程并行的模式让合的设计师既能注各自的任务，又能轻松把控整的设计效果，朝着一个目标快速前进。

许这就是传说中的「结对设计」。

Figma组件化实践

笔者在的海外项目的产 Webnovel 长久来没有统一的设计规范与组件系统，再经手多位设计师，经过多个版本的迭代之后，小到颜色、字体等基础属性，大到页面模的旧样式冗余混乱。趁海外项目迁移到 Figma 的契机，二月份开始着手 UI 组件库的设计与搭建。

组件的设基本遵循原子化设理念，从基础的颜色、字体、字 Principle 元素始，将相关元素到我们的组件库文件的「Token」页统一理。

△ Webnovel Token

Figma  Style 功能可以用来管理所有你需要在项目进复用样，而 Style 可以像 Component 样在个项目内共享。借助该功能将 Token 颜色属性、体样、阴影样、分割线样、栅格系统分加入 Style，发布 Style 后项目所有文件都可以快速访问并使用这些共享属性或样。另如共享 Style 发生更改，可以缝更新到所有项目文件。

△ Style功能演示

而 Figma 的 Component 功能 Sketch 的 Symbol 类似，通过创建组件来复用界面中的模块素，不同的是 Master 组件复制生成的 Instance 可以修改除了位置和尺寸以外的所有属性，结 Style 能快速实现式替换。

△ Component结Style功能演示

其在 Figma 官方在二月底一篇关组件化最佳践的博文给笔者非常大的启，虽当时组件库文件已经初具规模，但是还是毅拆分并重新组织组件库，因为笔者原继续沿用之前在 Sketch 上组件的设计与管理方式，完没有挥 Figma 身的一特来提高组件建设效率。

当时的重建组件库的改要包含两点：拆分组件库和重组织组件。

1. 拆分组件库

将原本包含属性样式、图标、基础组件、务组件等一个庞大的组件库件按类拆分为几个独立的组件件，一方面 Figma 通过 Team Library 共享组件非捷，即使拆分件会带来任何额外的负担，反而更方后续的拓展，另一方面分类后的组件库各司职更清晰明了。

△ 将组件和样式拆分到同的件中

2. 重组织组件

Figma 可使 Page 及 Frame/Group 的方式将组件归类，意味着我们再需要像 Sketch 那样使「/」通过修改命名这种繁琐的方式组织组件（当然 Figma 支持「/」分类，过你会它的）。

△ 使Page与Frame组织组件库

因此我们可以将 Page 作组件的类，如 Buttons，以 Frame 划分 Buttons 的类型，后 Buttons 只需以状态/子类型命即可。优化后的组织形式方便任何人浏览，且也符合直觉，回忆一下 Ant Design、Material Design 规范类的网站界面的布局，不非常接近？

△ 左侧FigmaWebnovel组件库，右侧Material design网页

除此，其实组件本身也做了部分优化，比如组件与样添加描述信息；过实例化 Principle 元素引入更细粒度让组件更加灵活；在使用约束基础上加入栅格提升组件自适应效，是处于探索阶段，这里笔者不再赘述，希望以后有会再分享。

组件库计的核心诉求是方便你的用户（项目中的计、开发以及其任何需要组件库的人员）快速查找、理解和使用。把它当作一款产品去对待，做好组件本身只是产品体验的一个环节，去思考更有效率的形式，尝入新术，刻倾听用户的反馈才能把这款产品磨得更优秀。

缺点以及Figma值得使用吗？

作为一款在线的计工，Figma 的缺点也是非常显而易见，受限于网络环，如果网络状不佳访问计文件都非常困难，此外对于国内多数队来说，将文件完全存放在别人的服器上乎是无法受的事实。

 Figma 值得使用吗？

1. 对设计师个人

答案是非常值得验一番，设计师应该是一群对新趋势新物新技术持奇心的人类，一个工具往往诞生用户需求与现产品能力的鸿沟之间，果它诞生之还得到展、受到众人追捧必还顺应时代趋势，甚至影响趋势，当年扁平化趋势下 Ps 与 Sketch 之争，假没有扁平化大家还选择 Sketch 吗？假没有 Sketch 扁平化么快推翻拟物化吗？扁平化迎来动效的兴，各种动效软件群魔乱舞也是同样的道理。验一下 Figma 就以现当下我们的协方式还有新的能，当还有更的有趣玩的细节等你去现。另外值得一提的是，Figma 个人使用完免费。

2. 对设计团

对绝大部分的大司团来说不值得，原因是推动设计工具更替困难重重，首先网络和存储就是硬伤，特别是存储问题在很大司完无法跨越。其次设计资源、生产境的迁移也是问题（Figma 支持导 Sketch 文件），还有团使用 Figma 至少 $144/人/年的支出，比 Sketch 贵不少。Figma 相比 Sketch 虽更优，但并不是革命的产品。

对于小团队基本上是更友好的。

后如果手 Figma，可以先浏览他们 Youtube 的官方基础视频介绍，速刷一遍就可以始了。

欢迎关注作者微信公众号：「阅文体验设计YUX」