设计集成

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

Figma

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

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

使用插件在 Figma 中嵌入 Storybook

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

安装插件

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

访问 Storybook Connect 安装插件。

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

Figma palette Storybook connect

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

将故事链接到 Figma 组件

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

转到发布到 Chromatic 的 Storybook 中的一个故事。确保它位于您要链接的分支上。然后复制故事的 URL。

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

Story linked in Figma

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

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

在 Figma 中查看故事

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

Figma sidebar with story link

使用插件在 Storybook 中嵌入 Figma

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

Storybook addon figma

安装设计插件

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

npm install --save-dev @storybook/addon-designs

更新您的 Storybook 配置（在 .storybook/main.js|ts 中）以包含该插件。

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    // Other Storybook addons
    '@storybook/addon-designs', // 👈 Addon is registered here
  ],
};
 
export default config;

将 Figma 组件链接到故事

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

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

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