干货 | 携程机票Sketch插件开发实践

作者简介

尹正波，携程机票研发部前端工程师，专注设计和开发的交叉领域，用系统和工具改进设计体验和交付。

Sketch 是伴随移动应用程序崛起而流行的 UI 设计工具。2014年 Sketch V3 增加 Symbols 功能，在 UI 设计工具领域的优势越来越大。它持续改进和增强功能，不断加强对插件社区的建设，吸引越来越多的开发者进入。

随着 Design System 的普及和流行，许多大公司都在设计插件领域有所投入，如 Google，Airbnb 等，同时诞生了一系列提供设计管理的初创企业，如 Abstract，UXPIN 等。中国很多大中型互联网企业也开始研制自己的设计系统和插件工具，例如 Dapllo，Kitchen，Fusion，Anto。

2016年，携程机票UED团队主力生产工具完全切换到 Sketch。与此同时，机票前端研发技术团队也关注到设计系统和插件工具规范化自动化对业务交付工作流程的加速作用。于是设计团队与前端技术团队开始携手探索设计语言升级，从业务需求项目实践中提炼通用规范，落地插件工具系统，并输出一整套设计资源管理规范和流程。

一、设计资源管理

产品的设计语言是一家公司留给消费者最直观的形象，通常包含品牌 Logo，颜色，文字，符号，插画，动画和文案话术等。而 Design System 是为了让设计语言落地执行而构建的解决方案，包括设计指导文档，设计资源，组件代码和工具等。

设计资源的共享和版本管理一直困扰着设计师们。Sketch 通过引入 Symbols，Library 等功能解决了共享组件问题，但在颜色，文字排版，图标管理等问题上依然缺少足够好的解决方案，需要各家公司针对自身的特点开发插件和服务去解决这些问题。

二、Kirby - Sketch Plugin

Kirby 是携程机票前端团队的 Sketch Plugin 系统代号，故事源于一次 Sketch 版本升级引起的标注导出功能失效问题。

Sketch 社区著名插件 Sketch Measure，它将设计稿和数据参数导出 HTML 网页，供技术人员查看，节省从设计到开发过程的沟通成本。但 Sketch 的版本升级经常致其无法正常使用，维护者也无暇快速修复问题，设计师们若继续使用，将被迫使用一个低版本 Sketch。

为了让设计师能够使用 Sketch 最新版本，并修复 Sketch Measure 缺陷功能，Kirby 诞生。

之后我们陆续添加更多功能，从 Design Token，到 Icon System，再到 Component，以及 Template，一步步接近成熟和完整。

Kirby 目前已交付若干重要特性：

2.1设计语言规范约束

Color Pallete

Typography

Shadow

2.2 设计稿静态扫描检查

方便设计师查找和修正问题。

字体与图标系统

在线版设计资源模版库

三、Sketch Plugin 开发技术<