入门

我们将在 2023 年晚些时候停止使用助手功能,但您仍然可以在旧版本的 Sketch 或使用命令行界面中使用它。 了解更多信息

每个 Sketch 助手都是一个小型 JavaScript 项目,因此您需要在系统上安装 NodeJS 开发环境才能开始创建自己的助手。

要求

技能

  • 您需要具备一些命令行技能
  • 熟悉 Git 和 GitHub
  • JavaScript 知识(理想情况下,还需了解一些 TypeScript,但这不是必需的)

NodeJS

您需要在系统上安装最新版本的 NodeJS,至少是 12 或更高版本。

您可能已经在系统上安装了 NodeJS,要检查是否已安装,请在终端中输入以下命令:

node --version

如果显示 12.x.x 或更高版本,则表示可以正常使用。否则,您有以下几种选择

  • 官方网站 下载并安装最新版本(推荐)
  • 使用 Homebrew 安装 NodeJS
  • 如果您需要在系统上管理多个版本的 NodeJS,请尝试使用 nvm

编辑器

您还需要一个可以很好地处理 JavaScript 项目的编辑器。我们推荐 Visual Studio Code.

创建您的第一个助手

我们创建了 Sketch 助手模板 仓库,帮助您尽可能快地入门。这是一个最小的 Sketch 助手项目,其中包含所有正确配置的内容,可以立即使用。

按照以下步骤创建您的第一个助手项目,在本地构建它并将其添加到 Sketch 文档中

  1. 单击 此处,根据我们的模板在 GitHub 上生成您自己的助手仓库
  2. 按照 GitHub 上的 说明 将您的新仓库克隆到您的计算机
  3. 克隆完成后,在终端中 cd 到您新仓库的文件夹中,然后运行以下命令:
    npm install
    
  4. 仍然在仓库文件夹中,使用以下命令在本地构建并打包助手:
    npm run package-tarball
    

    这将在当前文件夹中构建一个名为 sketch-assistant-template-1.0.0.tgz 的文件 - 这是您的助手作为压缩包打包的,可以准备好在 Sketch 中使用!

  5. 在 Sketch 中打开或创建一个文档,并通过文档的 ⚙️ › 从压缩包添加… 选项(在 管理助手… 面板中)将此文件添加到该文档中。您应该在助手面板中看到一个 Hello World 规则的结果 🎉

尝试在 Visual Studio Code 中打开您的助手项目,并浏览项目文件夹。助手及其 Hello World 规则都在 src/index.ts 文件中定义。

尝试对规则进行一些细微更改,例如将它的 title 值调整为一个新的字符串。每次进行更改后,重新运行 npm run package-tarball 以在 Sketch 中查看您的更改。

此时,您可能希望为您的助手命名,并添加一些描述性元数据。

  1. 找到并替换所有 sketch-assistant-template 字符串的实例,将其替换为新助手项目的名称。为助手命名时,请像命名 npm 包一样,即全部小写,不包含空格。
  2. 更新 package.jsonsketch-assistant 对象属性中的 titledescription 值。
  3. 更新 package.json 中的 homepage 值 - 这现在很可能只是 GitHub 仓库页面。Sketch 将引导用户访问此页面以了解更多关于您的助手的相关信息。

👉 如果您已准备好学习更多内容,请继续访问 编写规则