熟悉Sketch插件开发

本文概述

简单但非常有用的素描插件
不到2分钟的JavaScript基础
在Sketch中编写第一行代码
创建Sketch图层重命名插件
创建” 选择组中的所有层” Sketch插件
总结

设计工具在不断改进, 并且每天都有越来越多的工具进入市场(例如, InVision Studio)。话虽如此, 现代设计工具(例如Sketch)的创建是简约的, 旨在消除所有不必要的功能。通常只有在需要时才创建其他功能, 这就是我们进入Sketch插件开发有趣的领域的地方。
开发Sketch插件可以帮助设计人员掌握Sketch实际工作原理的技术方面, 并使他们能够自动执行重复的任务。 Sketch插件是由代码和Sketch JavaScript API组成的, 但是由于设计人员无需使用API??即可成为专业开发人员, 因此本教程将演示如何对插件进行编码以简化设计流程并改善Sketch中的工作流程。
简单但非常有用的素描插件 Sketch设计人员通常至少会安装三个或四个Sketch插件。下面的插件本质上有些基础, 但是由于可以节省大量时间而经常使用。

RenameIt(一次重命名多个图层)
排序我(有助于以逻辑方式对图层进行重新排序)
UnsplashIt(从Unsplash中检索图像)
内容生成器(生成假名和其他” 真实” 数据)

如果你想知道Sketch插件可以完成的工作, 请查看我们的50个Sketch插件的最终列表。

文章图片
【熟悉Sketch插件开发】RenameIt插件是一种流行的Sketch插件, 可帮助设计人员立即重命名多个图层。
不到2分钟的JavaScript基础在开始编码之前, 你需要了解一些有关JavaScript语法的知识(即, 代码编写的形式)。这不仅可以帮助你为Sketch插件编写代码, 而且可以更好地理解代码的工作方式和原因。
注释
让我们从代码注释开始。
代码注释就像隐藏的注释, 它们不是面向用户的, 因此不会显示在生成的Sketch插件中。开发人员通常使用这些代码注释来解释已编写的代码, 因此, 如果另一位开发人员阅读了该代码, 或者如果他们稍后返回该代码, 他们将了解所编写的内容及其工作方式。

// this is a single-line comment/* This is a multiline comment */

变量
变量就像用来存储值的小容器；例如：

var firstName = "Manuele Capacci"; // the variable firstName now equals "Manuele Capacci"

要获取该值, 你需要使用变量；例如：

log(firstName); // this will record "Manuele Capacci" in the console

文章图片
脚本窗口。高亮显示：控制台, 用于测试输出。
对象
对象可以存储多个变量, 如下所示：

var user = { firstName: "Manuele", lastName: "Capacci", age: 28, role: "Product Designer" }

请注意, 年龄值不是用引号引起来的。这是因为引号会将变量定义为字符串, 这意味着预期的输出应为文字。我们不想要那个；我们希望将变量定义为整数/数字, 以便可以对其进行数学运算。用引号引起来的值会将值定义为字符串是不希望的。
我们可以使用对象的变量, 如下所示：

// using the object's variables user.firstName; user.lastName; user.age; user.role;

数组
数组是一种较简单的对象类型：

var users = ["Manuele", "Daniel", "Miklos"] // "users" is an array that contains a list of namesuser[0]; // this equals "Manuele" user[1]; // this equals "Daniel" user[2]; // this equals "Miklos"

函数
函数是可行的, 它们可以执行某些操作。在下面的示例中, 该函数计算a和b的总和。在此示例中, a为2, b为3。

// a function declaration function sum(a, b) { return a + b; }// calling the function sum(2, 3); // this equals 5// recapping what we've learned so farvar total = sum(2, 3); // the variable "total" will equal 5 log(sum(2, 3)); // this will output 5 in the console log(total); // this will also output 5 in the console

条件语句
如果满足指定条件, 则条件语句仅在其括号内运行代码。在下面的示例中, 代码立即运行, 因为firstName的值实际上等于” Manuele” ；因此, else if and else代码不会运行。

var firstName = "Manuele"; if(firstName == "Manuele") { // do something for Manuele } else if(firstName == "Daniel") { // do something for Daniel } else { // do something for anybody else }

让我们尝试在Sketch中编写一些基本代码。
在Sketch中编写第一行代码导航到Sketch中的” 插件→运行脚本” 。在此脚本窗口中, 你可以编写代码以使事情在Sketch中发生(例如重命名图层), 然后再将此代码打包到具有.sketchplugin文件类型的Sketch插件中。
下图：这是脚本窗口第一次打开时的样子。你可能会看到一些你不熟悉的代码, 但是在此过程中会学到更多有关JavaScript的知识。此窗口中已经存在的默认代码会告诉你Sketch文档的名称, 当前选择的图层等等。

文章图片
现在, 删除此窗口中的所有代码, 并将其替换为：

log("Hello Sketch");

你在这里所做的就是调用log函数, 并将字符串Hello Sketch作为参数传递。该日志只能在后台访问, 因此在事情无法按预期进行时, 可用于调试代码。如果单击” 运行” 按钮, 则参数Hello Hello将会记录在脚本窗口下方的控制台中。
让我们深入一点。
创建Sketch图层重命名插件现在, 你可以使用JavaScript和Sketch脚本知识来创建一个脚本, 该脚本可以一次重命名多个图层。罗德里戈·苏亚雷斯(Rodrigo Soares)创建了RenameIt插件, 该插件可以完成相同的任务, 并为设计人员节省大量时间-让我们创建一个简化的版本。确保创建一些Sketch图层, 以便你可以测试脚本。
该代码必须以样板代码行开头。你需要使用Sketch的应用程序编程接口(API), 这是一个特殊对象的奇特名词, 如果你想以任何有意义的方式与Sketch进行交互, 就需要使用该特殊对象。将此特殊的API对象Sketch命名。
显然, 仅重命名当前选定的图层。你如何找出当前选择的图层？ Sketch JavaScript API提供了一种便捷的方法, 只需一行代码即可获取此信息。
以下是使用JavaScript代码完成所有这些操作的方法：

// assign the API object to a variable var sketch = context.api(); // assign currently selected layers to a variable var selection = sketch.selectedDocument.selectedLayers;

有关当前选定图层的所有信息都包含在选择变量中。现在, 你只需要在图层上” 迭代” (重复运行一些代码)即可对其进行重命名。
为了进行测试, 请将每个图层重命名为” Renamed Layer” 。
将此代码添加到脚本末尾：

selection.iterate(function(layer) { // for every selected layer layer.name = "Renamed Layer"; // rename to "Renamed Layer" })

点击” 运行” 后, 你会看到每个图层都已重命名为” 重命名图层” , 但这样会询问用户新的图层名称是什么。让我们修改脚本：

// ask the user what the new layer name should be var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // for every selected layer layer.name = newLayerName; // rename to the value of newLayerName })

将出现一个弹出窗口, 要求用户为图层指定一个新名称。
如果不确定如何访问某些上下文(例如当前选定的图层)或如何显示用户输入框(如上述方案), 则可以阅读官方的Sketch Developer文档, 该文档将向你显示什么代码是需要。
当你准备好继续前进时, 请点击脚本窗口左下角的” 保存… ” 按钮, 并为脚本命名。现在, 你可以在” 插件” 下的” 素描” 菜单中找到该素描插件, 与所有其他素描插件一样。
在Sketch中重命名图层：完整代码

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; // ask the user what the new layer name should be var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // for every selected layer layer.name = newLayerName; // rename to the value of newLayerName })

创建” 选择组中的所有层” Sketch插件现在, 让我们创建一些更复杂的东西。下一个Sketch插件将自动选择组中的所有图层, 然后你可以使其适应于仅包含文本图层或仅包含形状图层, 甚至可以自动检测图层类型并仅选择该类型的图层。
和以前一样, 让我们??开始定义上下文。然后, 你可以遍历/重复该上下文中的图层并自动选择它们。

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // only run the following code if the selection is a Group layer.iterate(function(innerLayer){ // for each layer in the Group innerLayer.addToSelection(); // add it to the selection }); layer.deselect(); // deselect the Group, though } });

使用此代码, 将选择任何当前选定组中的所有层(假设已选择某些层)。同时, 将取消选择组本身。
为了进一步完善此脚本, 你可以包含条件语句, 该条件语句检查图层是否为特定类型。假设你要专门选择组中的所有文本图层, 为此, 请在每次迭代时检查每个图层的图层类型, 如下所示：

if(innerLayer.isText) { innerLayer.addToSelection(); }

文章图片
选择组中的所有文本层：完整代码

var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // only if selection is a Group layer.iterate(function(innerLayer){ // for every layer in the Group if(innerLayer.isText) { // only if layer is a text layer innerLayer.addToSelection(); // add to selection } }); layer.deselect(); // deselect the Group, though } });

你可以使用文档作为参考, 以多种方式改进此脚本：

使用户只能选择形状
允许用户仅选择图像
如果未选择组, 则自动选择父组, 从而使用户能够选择相似类型的图层
如果组中有任何嵌套组, 则以相同的方式处理它们

总结如果你对开发其他设计师可以使用的Sketch插件感到好奇, 请查看SKPM(Sketch插件管理器)。 SKPM允许设计人员将其插件打包为.sketchplugin文件格式, 从而使该插件可安装。在此过程中, 插件开发人员还可以为插件的操作定义键盘快捷键。
知道如何编写Sketch插件的设计师就是知道如何改善工作流程并在必要时更快地工作的设计师, 从而节省了更多时间来交付高质量的最终产品。不仅如此, 而且了解Sketch在幕后的工作方式是一个深入JavaScript世界的绝妙机会。