设计集成

Storybook 与设计工具集成，以加速您的开发工作流程。这有助于您在设计过程的早期调试不一致性，发现可重用的现有组件，并将设计与 stories 进行比较。

Figma

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

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

使用插件在 Figma 中嵌入 Storybook

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

安装插件

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

转到 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

安装 design 插件

运行以下命令安装插件。

npx storybook@latest add @storybook/addon-designs

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

将 Figma 组件链接到 stories

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

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

在 Storybook 中，为您的 story 添加一个名为 design 的新 parameter，并粘贴 Figma URL。例如

MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { MyComponent } from './MyComponent';
 
// More on default export: https://storybook.org.cn/docs/writing-stories/#default-export
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};
 
export default meta;
type Story = StoryObj<typeof MyComponent>;
 
export const Example: Story = {
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/Sample-File',
    },
  },
};