npm 包 storybook-addon-sketch 使用教程

阅读时长 6 分钟读完

背景

在前端开发过程中,有时候需要配合UI设计师将设计稿转化为页面,而设计稿可能是使用 Sketch 工具绘制的。传统的开发流程排版、调整页面,然后将页面截图发回给UI设计师,等待其反馈,这个流程比较繁琐,难以做到快速迭代。因此,一些前端工程师就想到了将 Sketch 工具和前端流程结合起来。

介绍

storybook-addon-sketch 是一个可以在 Storybook 中集成 Sketch 工具的插件。Sketch 工具可直接嵌入 Storybook 中,方便开发人员直观地查看设计稿,并可以直接在 Storybook 中进行页面的修改。

storybook-addon-sketch 可以作为一个独立的 npm 包使用。使用时在项目中安装该包并按照下面的使用说明进行配置即可。

安装

使用 npm 安装 storybook-addon-sketch:

使用

  1. .storybook/addons.js 文件中引入 storybook-addon-sketch:
  1. 在 Storybook 定义的故事种类中加入一个名为 "Sketch" 的decorator:

可以在 .storybook 目录下,创建一个名为 addons.js 的配置文件,用于一次性引入所有自定义的 addons

  1. 将你的 Sketch 设计稿上传至 Storybook:
  • 上传到 Storybook 系统中:

    在 Storybook 中上传完成后,Sketch 对象将出现在 Storybook 中的预览画面上,每个 Sketch 对象上将有查看、下载源文件以及删除等操作

  • 上传到在线文档系统或者公司其他文档管理中:

    在你的 Sketch 设计稿页面中,添加 artboard name 信息,可以将 Sketch 设计稿同步到对应的在线文档系统或者公司其他文档管理平台。使用Sketch2Doc等工具可以实现同步。

配置

storybook-addon-sketch 需要配置以编写自定义插件。下面是完整定义的配置示例:

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

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

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

API

withSketch(options?)

将一个开箱即用的 Sketch 制作控件注册到 Storybook 中的 decorator 。返回一个包含 Sketch 的组件。

可以通过传入参数对如下参数进行配置:

  • name : string - Sketch UI 中的组件名称
  • apiHost: string - Sketch APIs server URL
  • upload: (params) => Promise - 上传 Sketch 文件到其他 URL 或第三方上传服务
  • download: (sketchUrl) => Promise<blo> - 从 Sketch 系统中获取对应的 Sketch 文件

如果不提供任何配置参数,则默认使用 storybook-addon-sketch 自身的默认配置。

注意:如果您想更改每个 Sketch 组件的默认设置,您必须在模块的开头定义 STORYBOOK_ADDONS_SKETCH__OPTIONS 常量,它应是一个对象,其属性将覆盖默认设置。

withSketch 可以和其他 decorator 一起使用来构建具有更多不同功能的 Storybook 组件。

示例

见下方代码块,一个简单的 Storybook 组件:

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

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

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

上面代码将 Button 组件作为 Storybook 中的故事,并将withSketch decorator 应用于它。最终在 Storybook 中显示的 Sketch 对象将显示该组件的设计稿,每个 Sketch 对象上将有查看、下载源文件以及删除等操作。

总结

使用 storybook-addon-sketch,可以方便地将 Sketch 设计稿集成到 Storybook 中,有助于快速迭代和开发效率的提升。本文详细介绍了该包的使用方法和相关配置信息,相信读者已经可以快速上手并开始试用了。

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

纠错
反馈