Sketch插件FusionCool的发展历程

FusionCool这个名字,顾名思义就是源于Alibaba Fusion中后台UI方案的,她的愿景就是要为设计提效。Sketch因插件而强大,设计因FusionCool而简单,这是我们努力的方向。

今天我给大家介绍下FusionCool在阿里的发展历程,文中包含插件的产品能力和技术架构。其实我们可以归纳为3个版本。文末有下载地址可以体验使用。

第一个版本

Alibaba Fusion是什么,Alibaba Fusion Next又是什么?了解FusionCool,需要了解下这个大背景环境。

3年前,FusionCool诞生,为了把Fusion的UI组件next能快速的应用到Sketch上。设计师用的Sketch是一个设计工具,两者没有任何扯得上关系的联系。首先我们简单分析下为什么会有这样的诉求,拿web产品设计流程来举例吧:

  1. 产品经理提了一个需求,说我们要做一个web站点,她做了一套原型稿交给设计师
  2. 设计师按照原型开始一个按钮一个框的开始设计各个页面元素
  3. 设计师完成设计设计稿的创作,轮到前端同学上场了,前端拿到设计稿问设计师,你这个按钮什么颜色,距离左边按钮是多少px距离啊
  4. 设计师被前端问烦了,把关键的信息标注出来,重新发给开发一个新的设计稿

这个流程中,暴露了很多的2个痛点问题。1,设计师从0开始设计,效率低效。2,设计师跟前端频繁的沟通,效率也低效。

设想下,如果我们能把Fusion的组件直接拖到Sketch里就完成了一个组件的设计,如果设计师能导出一个种对前端友好的数据格式,能显示出前端需要问的哪些数据信息,岂不是能解决上面的哪些问题。ok,这就是第一版FusionCool要完成的使命。

技术方案

第一版的FusionCool是一个MacOS上的桌面客户端,基于当今流行的Electron框架设计。到此,有同学可能会想到前面我们预告的一个问题,JS组件怎么能转成设计师能用的物料呢?我们采用了html2svg方案,svg拖到sketch里是能被还原成一个sketch元素的。ok,解决了物料转换的问题,我们要面对第二个问题,对前端友好的数据格式。前端最熟悉的莫过于html+css+js这三剑客了吧。我们把sketch设计稿导出成一个html页面,页面里包含所有的距离、颜色、边框等等前端关心的属性。

由于桌面端和Sketch是两个独立的APP在MacOS上运行的,两者的版本管理上不能保持同步,很容易出现升级Sketch而FusionCool用不了的问题。

第二个版本

大概2年前,第二个版本上线了。由于技术本身的短板以及桌面端的升级迭代缓慢,不能满足日常的需求,所以,第二个版本,需要解决能快速升级问题,而纯Sketch插件能完美解决这个问题,采用sketch官方的升级渠道。

纯插件方式,我们采用了UIWebView+Native的交互方式,UI交由webview去渲染,拓展能力分配给插件调用Sketch JSAPI去实现。

很快呢,我们又遇到了新的问题,Sketch更新是比较频繁的,日渐对SVG数据格式支持不够完美了,我们的物料经常被吐槽还原度不够高,这毕竟不是Sketch原生格式呀。

第三个版本

还原度上我们研究了很多,由第二个版本的svg到react2sketch方案,这样我们得再维护一个基于sketch平台的next组件,人力成本巨大,然后我们用了html2sketch方案,基于web端的next组件就可以完成web组件到sketch物料的转换。

这个版本也是目前我们最新的一个版本了,也是为了解决很多历史遗留问题而生。每个产品的迭代,都是有它要完成的使命和解决棘手的痛点。

然后设计师经常抱怨,两个窗口交互比较麻烦。打开多个Sketch面板,还会有文件错乱等问题。

从技术层来看呢,UIWebView毕竟是比较久远的产物,各种安全问题和性能问题也逐渐暴露出来了,然后我们的产品在决定对阿里外部设计师服务的时候,升级UIWebView到WKWebView计划也是提上了日程。

在上述背景下,FusionCool3.0时代到来了。 简单说说有哪些升级的功能:

当然,前端和设计行业发展迅速,技术也在跟着更新迭代,我们前进的脚步永远不会停歇,关于未来,我们还有3个重点方向需要去努力:

  1. 物料流通:设计师跟设计师之间的资源共享,充分利用可复用的物料。
  2. 开放能力:个性化的需求特殊接入,覆盖更多业务场景。
  3. 前端提效:基于固定布局方案,产出一套能基于Next的前端代码方案。

为了前端和设计提效,FusionCool将继续不懈努力,继续做好设计工具。

下载地址:https://fusion.design/tool