设计师编程指南之Sketch插件开发 1

发现网上关于sketch插件开发的指南太少了,而且都不一定可以成功运行,于是我就写了这个系列的文章:

1

我们需要了解的语法特点

sketch 是基于 CocoaScript ,支持在 JS 中调用 objective-c 的方法。我们需要了解一些 objecttive-c 的一些语法特点。

Objective-C 最大的特色是承自 Smalltalk 的消息传递模型 message passing C++ 里,调用一个方法的语法如下:

obj.method(argument);

Objective-C 则写成:

[obj method: argument];

下面举个 sketch 里的例子,比如: MSDocument 的接口 askForUserInput: initialValue:

OC 写成:

[doc askForUserInput:@"Enter your pages" initialValue:@"default"];

Cocoascript 写成:

doc.askForUserInput_initialValue("Enter your pages", "default");

当然 Cocoascript 里也可以直接写成 OC 的形式。这边推荐直接写成 OC 的形式,以区别于纯 js 的方法。

2

sketch 的主要对象

所有的关于 sketch 对象的操作,都是通过 context 来的。context document 对象,oc 对应的是 MSDocument 对象 。我们可以通过 log 命令打印出来查看。

var doc = context.document,
    plugin = context.plugin,
    command = context.command,
    page = doc.currentPage(),
    artboards = page.artboards(),
    selectedArtboard = page.currentArtboard(),// 当前被选择的画板 
    selection = context.selection; // 被选择的图层

    log(doc)

打开 sketch 里的 Plugins --- Run Script ,然后在里面贴上上面的代码按一下右下角的 Run 按钮。

3

sketch 原生的对象方法清单

看到一个优秀的 IOSAPP ,想了解其实现原理,这个时候就要通过逆向工程去查看APP的源代码,学习作者的核心思路了。IOS 逆向工程有个比较好用的工具 class-dump 。它利用 Objective-C 语言的 runtime 特性,将存储在 Mach-O 文件中的头文件信息提取出来,并生成对应的 .h 文件。尤其是做 sketch 的插件开发,由于官方文档写得比较粗糙,必须要了解 sketch 代码中已经写好的一些方法才能更好地进行开发。 Github 上有已经 dump 出来的 sketch 头文件信息,地址:

https://github.com/abynim/Sketch-Headers

当然,也可以自己用工具从本地 dump 一份出来。

4

动手实验

这部分当然是本文的重点啦。新建一个 sketch 文件,先把 show page list 打开,如下图。然后进入 Run Script 界面。

然后我们输入代码,这是一段新建 n 个页面的代码:

var doc=context.document;

var num=[doc askForUserInput:@"输入需要创建的页面数量" initialValue:@"5"];

log(num);

for(var n=0;n<num;n++){ 
   var newPage = doc.addBlankPage();
   newPage.setName(n.toString());
};

看看左边的 page 列表的变化,是不是很高效?下面,再试试复制当前页面为 n 份的代码:

var doc=context.document,
    page=doc.currentPage();

var num=[doc askForUserInput:@"输入需要创建的页面数量" initialValue:@"5"];

log(num);

for(var n=0;n<num;n++){

    var newPage = [page copy];
    var index=[[doc pages] count];
    var newName=page.name()+'_'+index;

    [newPage setName:newName]
    [[doc documentData] addPage:newPage]
    [doc setCurrentPage:page]    
    
};

本篇作为 sketch 插件开发的开篇,暂时写到这里。怎么样?接下来将陆续介绍 artboard、symbol、group、layer、style、font、image 等的代码,有了代码加持的画图效率是不是可以提高 n 倍?

————开个脑洞,甚至可以接入搜索引擎、图片素材库,生成 html 页面等等,也是可行的。

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-02-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫与数据挖掘

网络爬虫过程中5种网页去重方法简要介绍

一般的,我们想抓取一个网站所有的URL,首先通过起始URL,之后通过网络爬虫提取出该网页中所有的URL链接,之后再对提取出来的每个URL进行爬取,提取出...

771
来自专栏IT派

爬虫大神,又出新招

几乎所有玩爬虫的人,一定会用requests库,这个库的作者是大名鼎鼎的Kenneth Reitz 。牛逼的一塌糊涂,最近我浏览它的网站,发现他又出新招,一个把...

1263
来自专栏NetCore

Sync Framework 词汇表

Sync Framework 词汇表 此词汇表列出和定义了 Microsoft Sync Framework 涉及的概念和术语。 术语 批处理 (batch...

1966
来自专栏杨建荣的学习笔记

如果理解Python web开发技术

首先来问一个问题,如何来看待Python web开发技术?如果不知道如何回答,我们换个问题:如何理解Python web的本质,这个我先用了三个程序来说明。 首...

3884
来自专栏IT派

数据工程师推荐你用的几个工具

作为数据工程师或者数据分析师,经常会跟各种数据打交道,其中,获取数据这一关是无法避免的,下面,我就将自己时常工作中用到的数据连接配置模型分享出来,供大家交流。

1144
来自专栏Golang语言社区

论获取缓存值的正确姿势

论获取缓存值的正确姿势 cache 时至今日,大家对缓存想必不在陌生。我们身边各种系统中或多或少的都存在缓存,自从有个缓存,我们可以减少很多计算压力,提高应用程...

3748
来自专栏安恒网络空间安全讲武堂

MOCTF WEB 题解

0x00 MOCTF平台是CodeMonster和Mokirin这两支CTF战队所搭建的一个CTF在线答题系统。网址是http://www.moctf.com/...

7579
来自专栏北京马哥教育

Python安全运维实战:针对几种特定隐藏方式的Webshell查杀

作者:北门喂猫 来源: http://www.freebuf.com/articles/web/131350.html Webshell一直都是...

2823
来自专栏大史住在大前端

一统江湖的大前端(4)shell.js——穿上马甲我照样认识你

码农界存在着无数条鄙视链,linux使用者对windows的鄙视便是其中之一,cli使用者对GUI用户的嘲讽也是如此,在这样一个讲究逼格的时代,如果你的桌面上没...

2015
来自专栏自然语言处理

数据分析:基于Python的自定义文件格式转换系统

       无论读者现在是做数据挖掘、数据分析、自然语言处理、智能对话系统、商品推荐系统等等,都不可避免的涉及语料的问题即大数据。数据来源无非分为结构化数据、...

2945

扫码关注云+社区

领取腾讯云代金券