前端是设计到代码的搬运工？（下）

前文讲到了随着时代的发展，前端工程师开始负责更大范围的工作，包括但不限于：

就算做了这么多事，交付的时候，往往会被设计师劈头盖脸的喷一句：“这是什么啊，你到底看我的设计了吗？”

当然扔一张固定分辨率psd/png就不管了的这种设计流程还处在原始蛮荒状态，我十多年前和公司的设计师做官网的时候就是这样。负责的设计师同事会“一跟到底”，拉张爆菊椅做在前端工程师边上，每个元素按像素扣下来，最终达到一个可以发布的水准，但消耗大量的时间和精力。

当然今天借助工具如sketch Measure或者Zeplin进行自动标注之后，再按如下分别出稿：

就没问题了吧？

当然不是。

需要的是——

现在app一周更新一个版本都算慢的，网站更是有可能一天更新好几次。在如此频繁的生产新UI，诸如按钮，样式，文本等设计资源在多个设计师之间频繁创建，费时而且需要管理差异。

如果能有个资源库，约定好出入规则，比如Google的Material Design和阿里的Ant，大家都往里放，需要的时候直接从库里拖出来多好？

大公司都是这么做的，不光是大公司，复杂到一定程度的app／网页就应该有全局的设计资源管理。然而问题又来了：设计图一般都是.psd/.sketch格式的，版本控制比较笨拙，diff什么的完全无从谈起——而且，也不好搜索不是吗?

这就引出了——

Airbnb出品，核心是Paint with code，通过写react代码来在sketch里实时渲染（得益于sketch43开源了文件格式），无图无真相：

左边是Visual Studio Code, import了render对象，可以实时沟通本地安装的sketch，在编辑器里写完jsx/css之后一按cmd+s，右边的sketch里就会刷新刚改的效果。

之前如Dreamweaver的功能是通过设计，导出代码。react-sketchapp正好相反，通过代码完成设计。

看似强逼设计师学代码，无谓增加设计师工作量，但要说Airbnb对设计师不友好，那还有友好的吗？表面是奇特的方式，背后是全新设计的工作流：

在设计师付出学习成本掌握代码绘图后，之前内耗巨大的设计稿前端实现工作，就这么消失了…(看来我应该晚生个十几年)

当然这么做的前提是：公司支持！估计也只有Airbnb这种笑傲江湖又不差钱的公司，才能推行这种工作流吧。

当然react-sketchapp不是进化的终点，设计工具到代码双向交互才是大家喜闻乐见的。不过估计到了该技术成熟的时候，编程已经可以由计算机代劳了，就是不知道设计是不是还非得人类不可。

至于现在为什么不行？Apple的XCode已经在这条路上奋勇前进很久了，然而开发者都不怎么喜欢用它。微软也在全功能的Visual Studio之外另辟蹊径，拿掉了设计功能，专注Code取得了成功。

微软和苹果都不行，看来想取得突破，不是堆钱堆人就能实现的。