npm 包 the-sketch 使用教程

阅读时长 4 分钟读完

the-sketch 是一个基于 Sketch 文件的 npm 包,可以用来提取设计图信息,主要包括 Sketch 文件中的图层、颜色、字体、样式等信息。它可以在前端项目中方便地获取设计图信息,节省我们从设计师处手动提取信息的时间。

在本文中,我们将详细介绍 the-sketch 的使用,包括安装、配置、基本用法和示例代码。希望能够对前端开发人员有所帮助。

安装

the-sketch 使用前,需要先安装依赖的软件:

  • Sketch 57.1 及以上版本
  • Node.js 10 及以上版本

然后,在终端中输入以下命令安装 the-sketch:

配置

在使用 the-sketch 之前,需要先配置 Sketch,让它能够与 the-sketch 进行通信。具体步骤如下:

  1. 打开 Sketch 并打开需要提取的设计图
  2. 找到菜单栏中的「Plugins -> Sketch API -> Register API Key」,点击它

  1. 在弹出的对话框中点击「Generate」,生成一个唯一的 API Key,复制它

  1. 在终端中输入以下命令,将 API Key 保存到系统环境变量中:

现在,Sketch 已经可以与 the-sketch 通信,我们可以开始使用它了。

基本用法

在项目中使用 the-sketch,需要先引入它:

创建 Sketch 实例:

使用实例的 extract 方法来提取设计图信息:

提取完成后,可以通过实例中的成员变量来获取相应的设计图信息,比如:

示例代码

下面是一个简单的示例代码,它提取了设计图中的所有页面和图层信息,并输出它们的名称:

-- -------------------- ---- -------
----- ------ - ---------------------
----- ------ - --- --------------------------------

--------------------- ------ -- -
  -------------------------
--

------------------------ -- -
  ----- ----- - ------------
  ----- ------ - -------------

  ---------------------
  -------------------- -- -
    -------------- --------------
  --

  ----------------------
  ---------------------- -- -
    -------------- ---------------
  --
-------------- -- -
  ------------------
--

这段代码首先创建了一个 Sketch 实例,然后使用 sketch.extract() 方法来提取设计图信息。在提取过程中,我们通过 sketch.on() 方法监听了 progress 事件,以便在终端中输出进度信息。当提取完成后,我们通过实例的成员变量来获取相应的信息,最后将页面和图层名称输出到终端。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66cee

纠错
反馈