在前端开发过程中，我们经常需要将设计稿转化为代码实现。Figma 是一个流行的设计工具，而 storybook-addon-figma 是一个 npm 包，能够方便地将 Figma 设计稿与 Storybook 故事板（storybook stories）结合起来。本文将介绍如何使用 storybook-addon-figma 包。
安装
使用 npm 安装 storybook-addon-figma：
npm install storybook-addon-figma --save-dev
配置
在 Storybook 配置文件中，导入 storybook-addon-figma：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ ---------- ---- ------------------------
---------------
------ -
---------------- -----
---------- ---------
-- --------
--
---其中，projectId 是 Figma 项目的 ID。可以在 Figma 界面的浏览器地址栏中找到该 ID。
使用
在 Storybook 故事板中添加一个 figma 故事。可以使用 figma 函数将 Figma 项目中的一个或多个帧添加到 Storybook：
-- -------------------- ---- -------
------ - ----- - ---- ------------------------
------ ------- -
------ --------------
----------- --------
----------- -
------ -
-- -------
------- -
- ----- ----- ----- ---------- ------ - --
- ----- ----- ----- --------- ------ --- --
--
-- --- --------- --- ----- --
---- ---------------------------------------------------
--
--
--
-- ----- ----------- ---在 Storybook 中可以看到一个 Figma 嵌入窗口，其中包含两个帧：Desktop 和 Mobile。
总结
使用 storybook-addon-figma，我们可以在 Storybook 中方便地查看 Figma 设计稿。该包为团队协作、跨功能流程、模块化组件设计和风格指南等提供了便利。
代码示例：https://github.com/zhangsan/storybook-addon-figma-example
（完）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e781e8991b448e08bd