the-sketch 是一个基于 Sketch 文件的 npm 包，可以用来提取设计图信息，主要包括 Sketch 文件中的图层、颜色、字体、样式等信息。它可以在前端项目中方便地获取设计图信息，节省我们从设计师处手动提取信息的时间。
在本文中，我们将详细介绍 the-sketch 的使用，包括安装、配置、基本用法和示例代码。希望能够对前端开发人员有所帮助。
安装
the-sketch 使用前，需要先安装依赖的软件：
- Sketch 57.1 及以上版本
- Node.js 10 及以上版本
然后，在终端中输入以下命令安装 the-sketch：
npm install the-sketch --save
配置
在使用 the-sketch 之前，需要先配置 Sketch，让它能够与 the-sketch 进行通信。具体步骤如下：
- 打开 Sketch 并打开需要提取的设计图
- 找到菜单栏中的「Plugins -> Sketch API -> Register API Key」，点击它
- 在弹出的对话框中点击「Generate」，生成一个唯一的 API Key，复制它
- 在终端中输入以下命令，将 API Key 保存到系统环境变量中：
export SKETCH_API_KEY=你的 API Key
现在，Sketch 已经可以与 the-sketch 通信，我们可以开始使用它了。
基本用法
在项目中使用 the-sketch，需要先引入它：
const Sketch = require('the-sketch')创建 Sketch 实例：
const sketch = new Sketch('/path/to/design.sketch')使用实例的 extract 方法来提取设计图信息：
sketch.extract()
提取完成后，可以通过实例中的成员变量来获取相应的设计图信息，比如：
console.log(sketch.pages) // 所有页面 console.log(sketch.layers) // 所有图层 console.log(sketch.colors) // 所有颜色 console.log(sketch.typography) // 所有字体 console.log(sketch.sharedStyles) // 所有样式
示例代码
下面是一个简单的示例代码，它提取了设计图中的所有页面和图层信息，并输出它们的名称：
-- -------------------- ---- -------
----- ------ - ---------------------
----- ------ - --- --------------------------------
--------------------- ------ -- -
-------------------------
--
------------------------ -- -
----- ----- - ------------
----- ------ - -------------
---------------------
-------------------- -- -
-------------- --------------
--
----------------------
---------------------- -- -
-------------- ---------------
--
-------------- -- -
------------------
--这段代码首先创建了一个 Sketch 实例，然后使用 sketch.extract() 方法来提取设计图信息。在提取过程中，我们通过 sketch.on() 方法监听了 progress 事件，以便在终端中输出进度信息。当提取完成后，我们通过实例的成员变量来获取相应的信息，最后将页面和图层名称输出到终端。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66cee