加入直播会议:周四,美国东部时间上午 11 点,Storybook 9 发布和 AMA
文档
Storybook 文档

设计集成

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

Figma

Figma 是一款协作式 UI 设计工具,允许多人在浏览器中同时处理同一设计。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 组件、变体和实例。

前往 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 中,打开您想要嵌入 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',
    },
  },
};

在 Storybook 中查看设计

点击插件面板中的“设计”选项卡查看嵌入的 Figma 设计。

Design addon panel

Zeplin

Zeplin 是一款设计工具,可以从 SketchFigmaAdobe XD 生成样式指南。

使用 Zeplin 插件连接 Storybook。该插件将 Zeplin 中的设计与当前选定的 Story 一同显示。它包括便捷的工具,可将设计图像叠加在实时组件之上。

Zeplin 的原生应用也支持链接到已发布的 Storybook

Zeplin Storybook addon

Zeroheight

Zeroheight 是一款协作式设计系统样式指南生成器。它在一个地方展示了设计、代码、品牌和文案文档。用户可以使用所见即所得(WYSIWYG)编辑器轻松编辑该文档。

Zeroheight 与 Storybook 集成,使您可以在设计规范旁边嵌入 Stories。

Zeroheight Storybook integration

UXPin

UXPin 是一款交互式设计工具,它使用生产代码生成原型。

UXPin 允许您使用交互式 Stories 设计用户流程。

InVision Design System Manager

InVision DSM 是一款设计系统文档工具。它帮助设计团队在一个共享工作空间中整合 UX 原则、用户界面设计和设计令牌。

InVision 允许您将 Storybook 嵌入到您的设计系统文档中。

Invision DSM Storybook integration

Adobe XD

Adobe XD 是一款用于创建线框图、交互式设计和原型的 UI/UX 设计工具。

使用 Designs 插件将 Adobe XD 与 Storybook 集成。您可以按照这些说明设计规范嵌入到 Stories 旁边。

构建自己的集成

通过构建集成来扩展和自定义 Storybook。与低级 Storybook API 集成,或引导开发插件以自定义 Storybook 的 UI 和行为。