sketch插件开发初调研

1,235 阅读2分钟

1、熟悉sketch基本使用

安装sketch及sketch插件,体验同类型插件的基本使用

2、熟悉sketch插件开发流程,配置开发环境,实现demo

sketch开发者文档

根据开发者文档可以实现简单的demo

3、分析项目需求,调研插件开发技术方案

项目需求:

官方开发文档只说明了最基础的插件开发流程,但是一个成熟的插件远远不止这些。

一个功能完善的插件应该包括以下三部分:工具栏WebView容器以及业务数据

image.png

技术方案:

image.png

官方推荐方案相对于前端会更友好,原生开发方案插件性能会更好,两种都不简单,学习成本大

技术分析:

ketch是用Objective-C构建的

OC是一种通用、高级、面向对象的语言,是C语言的严格超集,广泛用于IOS开发。

sketch官方针对 Sketch Native API 封装了一套 JS API,目前还未涵盖所有场景,比如UI界面、组件拖放等,若需要更丰富的底层 API 需结合 CocoaScript 进行实现。

CocoaScript 是一种bridge,实现 JavaScript 运行环境到 Objective-C运行时的桥接功能,可通过桥接器编写 JavaScript 外部脚本访问内部 Sketch API 和 macOS 框架(AppKit)底层丰富的 API 功能。

AppKit是为macOS应用程序构建和管理事件驱动的图形用户界面。

技术实现:

UI层:采用Webview实现可以使用各种前端开发框架,比如React或者Vue等

逻辑层:负责调用sketch API 通过CocoaScript Bridge进行通信

image.png

技术难点:

  • sketch更新速度极快,但是官方文档却十分简单且陈旧,因此很多知名的Sketch Plugin因每次API的变更过大纷纷放弃维护;
  • 官方提供的API能实现的功能有限,需要结合AppKit、Objective-C IOS开发技术以及桌面开发相关技术,开发技术栈混乱;

参考文档:

凹凸实验室高大师Sketch插件开发实践(夸克开发团队技术文档)

携程机票Sketch插件开发实践

Sketch webView方式插件开发技术总结

美团-积木Sketch Plugin:设计同学的贴心搭档

墨刀Sketch插件开发总结

demo:

github.com/o2team/sket…