简介
在前端开发中，Sketch已经成为了界面设计和原型设计得到广泛应用的工具，一些开发者们可能就是通过Sketch来进行UI组件的设计的。Sketch-constants这个npm包就是为了方便前端开发者来访问Sketch文档中的设计系统和行业标准元素。
安装
你可以在你的项目中通过npm来安装sketch-constants，方法如下：
npm install sketch-constants --save
使用方法
首先，你需要在你的代码中引入sketch-constants:
import sketchConstants from 'sketchConstants';
然后就可以通过这个常量文档进行操作了，有如下常量：
sketchConstants.Document: Sketch文档相关常量sketchConstants.Font: 字体相关常量sketchConstants.Style: 样式相关常量sketchConstants.Type: 类型相关常量
每个常量都有许多属性，需要用什么属性就直接引用，例如：
const page1 = new sketch.Page(); page1.name = sketchConstants.Document.Page.name;
其中，name是其中一个属性，获取到的就是Sketch中页面的名字。
示例代码
下面是示例代码来展示如何使用sketch-constants：
-- -------------------- ---- -------
------ ------ ---- -------------
------ --------------- ---- -------------------
------ ------- ---------- -
--- --------------
----- -------- - -----------------------------
----- ----- - --- -------------
----- -----------------------------------
------- ---------
---
-- ---------------------------
----- ---- - --- -------------
----- ----------
------ -
---------- ------------------------------------
-------- -
-
------ ----------
---------- --
--------- --------------------------------------
--
--
-- ------
--------- ---
----- -
----- ---------------------------------
--
-- ------
---------- ----------
--
------- ------
---
-上面的代码可以新建一个包含一行文本的页面。我们从sketch-dom引入了Sketch对象并获取到了我们的文档，然后创建了一个页面，并且使用了sketch-constants中的常量来设置了样式。
总结
通过这个教程，你已经学会了如何使用sketch-constants来在前端开发中使用Sketch文档中的设计系统和行业标准元素，这将大大提高你在UI界面设计和原型设计中的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f406837dbf7be33b25671fa