Design Lint 这件事，真的可行吗？
设计产出后的那些事，大概可以分为 Design Review, UI Testing, Design Lint 三个环节。
Design Review
设计评审，应该是设计师最熟悉和参与度最高的一个环节。不过对于大部分设计师来说，关注的重点和经验主要集中在前期需求分析和完成设计稿，对于设计评审往往没有太多的经验，不知道如何表达，这篇文章很好地讲解了设计评审的流程：如何在會議中有效表達設計[1]
UI Testing
UI 测试，通常是在通过前端框架自动化测试设计界面中存在的潜在问题，比如国外知名的 Chromatic 2.0[2]，网易的 Airtest[3]，阿里也有自己家的测试工具。
本文不讨论前面两个环节，主要说说 Design Lint 这件事。我们姑且把它翻译成设计审查吧。
Design Lint
Lint，这个在代码世界非常普及的事情，如今在设计工具里也渐渐流行了。
很早以前我就在想，为什么设计工具里一直没有 Lint 这类功能？我想可能有两个主要原因：
1.设计工具的最终产出和设计源文件没有直接关系。不像是代码，不符合规范会报错，语法错误根本无法运行。而设计过程中图层和命名等基本操作全凭设计师自觉，除非是团队制定规范，强制执行，通常也只能人工审核。但就算不遵守，也不会影响最终生产，老板更不关心。2.历史遗留问题。早期的互联网设计和开发还是相对独立的两个环节，设计也没有组件，设计系统这些概念，和开发的联系没那么紧密，也就不需要语义化的命名规则，更不需要检查太多逻辑上的问题。
同样的设计产出，表面看起来完全一样，但对组件和样式的运用、图层的命名却有天壤之别。
目前市面上已经出现很多 Design Lint 工具了，其中最广为人知使用最广泛的就是 color contrast 这类工具，比如：
Cluse[4]
免费的 Sketch 插件，相当于把 Chrome DevTools 内置的 color contrast 功能拿到了软件里，可以实时查看修改结果。
Contrast[5]
大概是目前设计和口碑最好的一款 Mac 小工具，由知名的 @mds 大神出品。
Contraste[6]
前苹果设计师做的另一个免费小工具。
同类的颜色对比度工具还有很多很多，因为标准已经比较完善成熟，不管是原生桌面软件，在线网站工具，还是设计软件里面的插件，甚至浏览器开发工具，都有不少非常不错的产品。
随着 Figma 这种基于 Web API 的设计工具的普及，越来越多更专业功能更全面的 Lint 工具也都出现了。
Design Lint[7]
前段时间 Discord 产品设计师做的一个 Figma 插件，受限于官方 API 的能力，虽然功能不算强大，但可以说很好的展示了这类工具的雏形和未来发展方向。
基于现在设计系统的思想，通常我们需要定义好一套颜色、描边、阴影等基础样式，以便在图层中方便地引用，它可以检测出设计稿中没有用到定义的样式的所有图层，统计并报错。尽管不是完全自动化的，需要你点一下插件执行，但好在是全局的。
然后就可以逐条点击并跳转到错误的图层进行修复，并且提供了简单的提示。
Roller[8]
TOYBOX 团队也开发的另一款类似的 Figma 插件。
这个插件和上面那个大同小异，同样也是检查颜色、文字、描边、样式和圆角等基本属性，但是界面的设计更加合理一些，把不同的分类整合在一起显示了，并且还可以直接添加没有样式的部分。
同时它还提供了可以直接在插件里修改的界面，这样就不需要不停地跳转到对应图层了，比 Design Lint 更高级一些，唯一的缺点是免费版只能检查颜色和文字两个属性。
Sketch-lint[9]
Sketch Lint 是一个比较早期的 Sketch 插件，应该是目前功能最强大的，但也是作为一个试验性项目，已经一年多没更新了。因为是基于 Sketch 和 Mac 系统原生的 API，它除了可以做到上述基本属性，还可以检查拼写和边距（Padding）。
Sleuth[10]
最近才发布的另一个 Sketch 插件，基于 Sketch 的组件 Library 系统来检测组件的使用情况。
分析结果界面：有点像 Figma 企业版里面才有的那个设计系统分析工具。
Fix Your Mess[11]
这个插件可以检测出所有被解组的 instances 子组件，对它们进行清理或再次编辑等操作。严格来说这个其实不算 Lint 工具，只是对设计稿比较有洁癖的人来说很有用。比如还有的插件可以检查隐藏的图层，没有使用的图层等等。
Modulz[12]
之前在 未来的 UI 设计工具要来了吗？介绍过的全新设计工具 Modulz，也提供了一个 Lint 功能，看如下截图是不是联想到了基于 Chrome 浏览器的网站性能测试工具 Lighthouse？其实如果把浏览器看作是一个设计工具的话，Lighthouse 确实是最完美的 Lint 工具了。
Sketch Beta[13]
Sketch 官方最近也在做一个叫做 Sketch Assistants 的功能，提供类似 Lint 的功能，相信官方自己做这件事，功能特性和使用体验上应该好很多吧。
所以可以看到，现阶段的 Design Lint 工具，能做到的事情还非常有限，主要包括：
颜色
检查图层的颜色是否使用了色板（或 design token ）中定义的颜色。
字体
检查字体大小、颜色、字体、行高等样式。
样式
包括圆角、描边、阴影等等。
拼写
检查文字图层中文字的拼写，只能通过苹果系统自带的字典 API 来做。
内边距（Padding）
只能检查图层和元素之间的垂直间距。
对比度（Contrast）
检查两个图层或文字图层的颜色对比度，显示 accessibility 评分。
而暂时还不能做到，个人非常希望将来可以实现的事情大概有：
图层和图层组的命名
想象一下这个应该不难做到，在插件的设置里定义好一份命名规范，如果不符合规范就会报错。
组件和样式的命名
检查颜色等样式的命名方式是否符合前端规范，组件的命名是否采用了 name / name 这样的命名方式，语义是否符合前端规范。
像素对齐
检查矢量图的像素对齐问题。
网格系统和元素位置
检查画布上的元素是否正确地使用了定义好的网格系统。还可以检查元素间的位置，比如基于 8pt 的原则，是否有元素不小心使用了奇数的间距等等。
图片处理
检查设计稿中载入的图片是否太大而影响文件性能，是否采用 Fill 的方式而不是其他方式载入的。
布局和响应式设计
对于需要做响应式设计的元素，你可能经常忘了设置 constraints 或使用 autolayout，如果可以智能地检查出来就很省心了。
综上所述，目前 Design Lint 这件事，还处于不太成熟的早期阶段，没有大厂推动，设计软件本身也都没有做太多相关功能，也没有更开放的 API，即使个人开发者有一些小的尝试，也很难做到很完善。设计不是艺术，如今的互联网设计是高度工程化的一个环节，希望借助新的设计工具大潮的推进，会有更多的厂商意识到这件事并积极做出一些改变吧。
References
[1] 如何在會議中有效表達設計: https://medium.com/uxeastmeetswest/%E5%A6%82%E4%BD%95%E5%9C%A8%E6%9C%83%E8%AD%B0%E4%B8%AD%E6%9C%89%E6%95%88%E8%A1%A8%E9%81%94%E8%A8%AD%E8%A8%88-how-to-present-your-design-in-design-review-6e192e5dd4b3[2] Chromatic 2.0: https://www.chromatic.com/[3] Airtest: https://airtest.netease.com/[4] Cluse: https://cluse.cc/[5] Contrast: https://usecontrast.com/[6] Contraste: https://contrasteapp.com/[7] Design Lint: https://lintyour.design/[8] Roller: https://www.trytoybox.com/roller[9] Sketch-lint: https://github.com/saranshsolanki/sketch-lint[10] Sleuth: https://sleuth.keap.design/[11] Fix Your Mess: https://www.figma.com/community/plugin/817773666528183444[12] Modulz: https://www.modulz.app/
[13] Sketch Beta: https://www.sketch.com/beta/
本文作者：丁一
转载请点击原文向作者获取授权，并注明作者、出处和链接。
更多精彩文章
Mac 上那些超好用的小工具