设计集成

Storybook 与设计工具集成，以加快您的开发工作流程。这有助于您在设计过程的早期调试不一致之处，发现现有组件进行重用，以及比较设计和 Stories。

Figma

Figma 是一款协作式 UI 设计工具，允许多人在浏览器中同时处理同一设计。Storybook 和 Figma 有两种集成方式。

在 Figma 中嵌入 Storybook
在 Storybook 中嵌入 Figma

使用插件在 Figma 中嵌入 Storybook

Storybook Connect 是一款 Figma 插件，允许您在 Figma 中嵌入组件 Stories。它由 Storybook 嵌入和 Chromatic 提供支持，Chromatic 是由 Storybook 团队创建的发布工具。

安装插件

在我们开始之前，您必须有一个已发布到 Chromatic 的 Storybook。它提供了支持该插件的索引、版本和访问控制。

前往 Storybook Connect 安装插件。

在 Figma 中，打开命令面板（在 Mac OS 中使用 Command + /，在 Windows 中使用 Control + /），然后键入 Storybook Connect 以启用它。

Figma palette Storybook connect

按照说明连接 Chromatic 并进行身份验证。

将 Stories 链接到 Figma 组件

将 Stories 链接到 Figma 组件、变体和实例。

前往 Chromatic 上发布的 Storybook 中的某个 Story。确保它位于您要链接的分支上。然后复制该 Story 的 URL。

在 Figma 中，选择组件，打开插件，然后粘贴 URL。

Story linked in Figma

Chromatic 会自动更新您链接的 Stories，以反映您链接分支上发布的最新 Storybook。这意味着即使您推送新代码，链接也会保持不变。

该插件不支持将 Stories 链接到 Figma 图层。

在 Figma 中查看 Stories

连接后，您可以通过单击侧边栏中的链接查看 Story。单击“查看 Story”。或者，使用命令面板（在 Mac OS 中使用 Command + /，在 Windows 中使用 Control + /）打开插件，然后键入 Storybook Connect。

Figma sidebar with story link

使用插件在 Storybook 中嵌入 Figma

Designs 插件允许您在 Storybook 中嵌入 Figma 文件和原型。

Storybook addon figma

安装 Designs 插件

运行以下命令安装插件。

npx storybook@latest add @storybook/addon-designs

CLI 的 add 命令会自动完成插件的安装和设置。要手动安装，请参阅我们的关于如何安装插件的文档。

将 Figma 组件链接到 Stories

在 Figma 中，打开您想要嵌入 Storybook 的文件。您可以嵌入文件、原型、组件和框架。

嵌入文件或原型，点击“分享”按钮生成文件的唯一 URL，然后点击“复制链接”。
嵌入组件或框架，在分享对话框中勾选“链接到选定框架”。或者右键点击框架，然后选择“复制/粘贴为”»“复制链接”。

在 Storybook 中，将一个名为 design 的新参数添加到您的 Story 中，并粘贴 Figma URL。例如：

MyComponent.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
// More on default export: https://storybook.org.cn/docs/writing-stories/#default-export
const meta = {
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Example: Story = {
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/Sample-File',
    },
  },
};