Storybook 插件，用于提取 Storybook 数据并将 stories 转换为 Figma 组件，以实现更好的设计-开发工作流程。

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

演示

要求

• Storybook@>=6.0.0
• Anima 账户
• 注册 Anima 的 Beta 版
• Anima 的 Figma 插件

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

:warning: 目前，我们仅支持 Wepback 构建器。如果您为 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>"

设计系统 tokens 支持

Anima 也可以在生成 stories 时使用您的设计 tokens，自动将它们转换为 Figma 样式。

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

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

该文件应以 标准 JSON 格式 编写。

示例

design-system-tokens.json

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

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

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

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

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

考虑因素

目前，如果您的 stories 组合仅包含组件本身，而不是包含多个示例或文档的复杂 stories，则此集成效果最佳。

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

Boolean 控制类型 的限制

由于 Storybook 的一个 bug，如果 boolean controls 没有明确指定 type，则插件无法正确处理它们。

例如，当参数没有明确指定 type 时，我们可能在处理具有以下 argTypes 定义的 Stories 时遇到一些问题

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

在这种情况下，有必要为每个 boolean control 添加显式类型

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

变体数量的限制

该插件目前将任何给定 story 的变体数量限制为最多 1025 个。因此，某些 props 可能会在导出的组件中丢失。

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

开发

在不同的选项卡中运行以下命令以开始开发

npm run build
npm run dev

更多信息请访问： Anima Storybook 集成

许可证

MIT © Anima