一个 Storybook 插件，它提取 Storybook 数据并将故事转换为 Figma 组件，从而实现更好的设计-开发工作流程。

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

演示

要求

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

此插件应该适用于任何框架。如果您发现插件无法正常工作，请提交问题。

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

入门

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>"

设计系统 Token 支持

Anima 还可以使用您的设计 Token 生成故事，并自动将其转换为 Figma 样式。

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

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

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

示例

design-system-tokens.json

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

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

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

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

就是这样，现在，如果您有使用这些设计 Token 的组件，它们将作为使用原生 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 个。因此，导出组件时某些属性可能丢失。

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

开发

在单独的选项卡中运行以下命令以开始开发

npm run build
npm run dev

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

许可证

MIT © Anima