设计集成

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

Figma

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

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

使用插件在 Figma 中嵌入 Storybook

Storybook Connect is a Figma plugin that allows you to embed component stories in Figma. It’s powered by Storybook embeds and Chromatic, a publishing tool created by the Storybook team.

安装插件

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

前往 Storybook Connect 安装插件。

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

Figma palette Storybook connect

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

将 Story 链接到 Figma 组件

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

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

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

Story linked in Figma

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

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

在 Figma 中查看 Story

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

Figma sidebar with story link

使用插件在 Storybook 中嵌入 Figma

Designs addon allows you to embed Figma files and prototypes in Storybook.

Storybook addon figma

安装 Design Addon

运行以下命令来安装插件。

npx storybook@latest add @storybook/addon-designs

CLI 的 add 命令可以自动安装和配置该插件。要手动安装，请参阅我们关于如何安装插件的文档。

将 Figma 组件链接到 Story

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

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

在 Storybook 中，向您的 Story 添加一个名为 design 的新参数，并粘贴 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',
    },
  },
};