Storybook 插件，用于提取 Storybook 数据并将故事转化为 Figma 组件，以优化设计-开发工作流程。

在我们的博客文章中了解更多关于其动机和好处

演示

要求

• Storybook@>=6.0.0
• Anima 账户
• 注册参加 Anima 的 Beta 测试
• Anima 的 Figma 插件

此插件应适用于任何框架。如果您发现插件无法正常工作的情况，请提交一个 Issue。

:warning: 目前，我们仅支持 Webpack 构建器，如果您使用 Storybook 的自定义构建器（例如 vite）或 Storybook 的实验性功能之一，请联系我们或提交 Issue，因为该插件可能无法按预期工作。

入门

1. 安装

npm install --save-dev storybook-anima --legacy-peer-deps
# yarn add -D storybook-anima

2. 在 .storybook/main.js 中注册插件

// .storybook/main.js
module.exports = {
  addons: ["storybook-anima"],
};

3. 设置 Anima 访问令牌

首先从 Anima Figma 插件或您的 Anima 团队设置中获取访问令牌。了解更多关于 如何从 Anima 获取令牌的信息。

然后，您可以将访问令牌设置为名为 STORYBOOK_ANIMA_TOKEN 的环境变量。

您可以在项目根文件夹中创建 .env 文件，或者在构建或动态运行 Storybook 时将环境变量作为命令行参数提供。

# .env
STORYBOOK_ANIMA_TOKEN="<paste your TOKEN here>"

设计系统令牌支持

Anima 在生成故事时也可以使用您的设计令牌，并自动将其转换为 Figma 样式。

要启用此功能，请按照以下步骤操作

1 - 准备您的设计系统令牌文件

文件应采用标准 JSON 格式编写。

示例

design-system-tokens.json

{
  "--primary": {
    "$value": "#1976D2"
  },
  "--secondary": {
    "$value": "#ffcd29"
  }
}

2 - 将您的设计系统令牌文件添加到 Storybook 预览中

转到 .storybook/preview.js 并导出一个名为 anima 的新参数，其中 designTokens 下是您的设计系统令牌文件的路径

// .storybook/preview.js
export const parameters = {
  ...
  anima: {
    designTokens: require('../design-system-tokens.json')
  },
};

就这样，现在如果您有使用这些设计令牌的组件，它们将被导出到 Figma，并使用原生 Figma 样式作为组件。

注意事项

目前来看，如果您的故事构成仅包含组件本身，而不是包含多个示例或文档的复杂故事，那么此集成效果最佳。

简而言之，您在 Storybook 故事中看到的内容，就是您在 Figma 中将获得的内容。

布尔控制类型限制

由于存在 Storybook 错误，如果布尔控制类型没有明确指定 type，插件将无法正确处理它们。

例如，对于包含以下 argTypes 定义的故事，我们可能会遇到一些处理问题，因为这些参数没有明确指定 type

  argTypes: {
    disabled: { control: "boolean" },
    isContained: { control: { type: "boolean" } },
  },

在这种情况下，需要为每个布尔控制明确添加类型

  argTypes: {
    disabled: { control: "boolean", type: "boolean" },
    isContained: { control: { type: "boolean" }, type: "boolean" },
  },

变体数量限制

插件目前限制任何给定故事的变体数量最多为 1025 个。因此，导出的组件中可能会缺少一些 prop。

在不久的将来，我们将提供一些选项来自定义在导出过程中应包含或排除哪些控制类型。

开发

在单独的标签页中运行以下命令以开始开发

npm run build
npm run dev

欲了解更多信息，请访问：Anima Storybook 集成

许可

MIT © Anima