前言
Sketch 是 Mac 上一款非常流行的设计工具,可用于 UI 设计、图标制作等。sketchapp-json-plugin 是一款 npm 包,可以将 Sketch 中的图层导出为 JSON 格式,方便进行后续的开发与操作。本篇文章将详细讲解如何使用这个工具,以及如何对其进行二次开发和定制化。
安装
确保电脑已安装 Sketch 和 npm,然后运行以下命令:
--- ------- -- ---------------------
使用
导出 sketch 文件
首先需要将 Sketch 文件导出为 JSON 格式,运行以下命令:
---------- ---------------- -------------- ------------------------------------ ---------------------------
其中,/path/to/destination/folder
为导出的 JSON 文件的目标路径,/path/to/sketch/file.sketch
为 Sketch 文件的路径。
解析 JSON 文件
导出后的 JSON 文件可以通过 require
引入到代码中进行操作:
----- -------- - -------------------------------------------------
获取图层信息
JSON 文件中的图层信息保存在 layers
属性下,可以通过遍历该属性获取各个图层的信息:
----------------------------- -- - ------------------- ---
修改图层属性
可以通过修改 JSON 文件中的图层属性,来修改 Sketch 中的图层属性。例如,将所有图层的颜色修改为红色:
----------------------------- -- - -- ------------ -- ------------------ - ------------------------------ -- - -- ------------ - -------------- - -- ---------------- - -- --------------- - -- ---------------- - -- - --- - ---
导出修改后的 sketch 文件
可以使用 sketchapp-json-plugin 中提供的 jsonToSketch.js
脚本,将修改后的 JSON 文件转换为 sketch 文件。运行以下命令:
------------ -------------------------------- ---------------------------
将修改后的 JSON 文件及导出路径作为参数传入即可。
开发与定制化
sketchapp-json-plugin 提供了丰富的可定制化选项,可以根据需求扩展导入导出功能。以下是一些常见的功能:
导入 JSON 文件
可以使用 sketchapp-json-plugin 中提供的 sketch_json.js
脚本,将 JSON 文件导入并转换为 Sketch 文件。运行以下命令:
----------- ---------------------- ---------------------------
将包含 JSON 文件的源路径及导出路径作为参数传入即可。
自定义导入导出过程
可以根据需要自定义导入导出过程,在 sketchapp-json-plugin
的源代码中进行修改。例如,自定义将 Sketch 文件导出为 YAML 格式:
------ -------- ----------------- - ------ ----------------- ---------- -- --- -
在webpack.config.js 修改配置,添加对 yaml
的支持:
---------- ----- ------ -------- ---------
修改 toFilename
方法,将导出文件名的后缀改为 .yaml
:
------ ----- ------------ - -- ---- ------------ - ----- --- - -------- -- ---------------------- - -- ----------------------------------- --- ---- - ------ --------------------- - ------ ------------------------------- ------------------------------ -------- - ----- - ------ ---------------------------------- ----- - -
参考文献
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5f406837dbf7be33b25671fb