设计集成

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

¥Storybook integrates with design tools to speed up your development workflow. That helps you debug inconsistencies earlier in the design process, discover existing components to reuse, and compare designs to stories.

Figma

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

¥Figma is a collaborative UI design tool that allows multiple people to work on the same design simultaneously in the browser. There are two ways to integrate Storybook and Figma.

• 在 Figma 中嵌入 Storybook

  ¥Embed Storybook in Figma

• 在 Storybook 中嵌入 Figma

  ¥Embed Figma in Storybook

使用插件将 Storybook 嵌入 Figma

¥Embed Storybook in Figma with the plugin

Storybook Connect 是一个 Figma 插件，可让你在 Figma 中嵌入组件故事。它由 Storybook 嵌入 和 Chromatic 提供支持，后者是 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.

安装插件

¥Install plugin

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

¥Before we begin, you must have a Storybook published to Chromatic. It provides the index, versions, and access control that back the plugin.

转到 Storybook Connect 安装插件。

¥Go to Storybook Connect to install the plugin.

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

¥In Figma, open the command palette (in Mac OS, use Command + /, in Windows use Control + /) and type Storybook Connect to enable it.

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

¥Follow the instructions to connect and authenticate with Chromatic.

将故事链接到 Figma 组件

¥Link stories to Figma components

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

¥Link stories to Figma components, variants, and instances.

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

¥Go to a story in a Storybook published on Chromatic. Make sure it’s on the branch you want to link. Then copy the URL to the story.

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

¥In Figma, select the component, open the plugin, and paste the URL.

Chromatic 将自动更新你链接的故事，以反映你链接的分支上发布的最新 Storybook。这意味着即使你推送新代码，链接仍会持续存在。

¥Chromatic will automatically update your linked stories to reflect the most recent Storybook published on the branch you linked. That means the link persists even as you push new code.

在 Figma 中查看故事

¥View stories in Figma

连接后，你将能够通过单击侧边栏中的链接查看故事。单击 "查看故事"。或者，使用命令面板打开插件（在 Mac OS 中使用 Command + /，在 Windows 中使用 Control + /），然后输入 Storybook Connect。

¥Once they're connected, you'll be able to view the story by clicking the link in the sidebar. Click "View story". Alternatively, open the plugin by using the command palette (in Mac OS, use Command + /, in Windows, use Control + /), then type Storybook Connect.

使用插件将 Figma 嵌入 Storybook

¥Embed Figma in Storybook with the addon

设计插件 允许你在 Storybook 中嵌入 Figma 文件和原型。

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

安装设计插件

¥Install design addon

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

¥Run the following command to install the addon.

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

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

¥Update your Storybook configuration (in .storybook/main.js|ts) to include the addon.

// 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 组件链接到故事

¥Link Figma components to stories

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

¥In Figma, open the file you want to embed in Storybook. You can embed files, prototypes, components, and frames.

• 嵌入文件或原型，单击 "共享" 按钮为文件生成唯一 URL，然后单击 "复制链接"。

  ¥Embed a file or prototype, click the "Share" button to generate a unique URL for the file then click "Copy link".

• 在共享对话框中嵌入组件或框架检查 "链接到选定的框架"。或者右键单击框架并转到 "复制/粘贴为" » "复制链接"。

  ¥Embed a component or frame check "Link to selected frame" in the Share dialog. Or right click on the frame and go to "Copy/Paste as" » "Copy link".

在 Storybook 中，向你的故事添加一个名为 design 的新 参数 并粘贴 Figma URL。例如：

¥In Storybook, add a new parameter named design to your story and paste the Figma URL. For example:

import type { Meta, StoryObj } from '@storybook/react';
 
import { MyComponent } from './MyComponent';
 
// More on default export: https://storybook.js.org/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',
    },
  },
};

在 Storybook 中查看设计

¥View designs in Storybook

单击插件面板中的 "设计" 选项卡以查看嵌入的 Figma 设计。

¥Click the "Design" tab in the addon panel to view the embedded Figma design.

Zeplin

Zeplin 是一个从 Sketch、Figma 和 Adobe XD 生成样式指南的设计工具。

¥Zeplin is a design tool that generates styleguides from Sketch, Figma, and Adobe XD.

使用 Zeplin 插件 连接 Storybook。插件在当前选定的故事旁边显示 Zeplin 的设计。它包括方便的工具，可将设计图片叠加在实时组件之上。

¥Use the Zeplin addon to connect Storybook. The addon displays designs from Zeplin alongside the currently selected story. It includes convenient tooling to overlay the design image atop the live component.

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

¥Zeplin's native app also supports links to published Storybooks.

Zeroheight

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

¥Zeroheight is a collaborative styleguide generator for design systems. It showcases design, code, brand, and copywriting documentation in one place. Users can easily edit that documentation with a WYSIWYG editor.

Zeroheight 与 Storybook 集成，使你可以将故事嵌入设计规范中。

¥Zeroheight integrates with Storybook, enabling you to embed stories alongside your design specs.

UXPin

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

¥UXPin is an interactive design tool that uses production code to generate prototypes.

UXPin 允许你使用 使用交互式故事 设计用户流程。

¥UXPin allows you to use interactive stories to design user flows.

InVision 设计系统管理器

¥InVision Design System Manager

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

¥InVision DSM is a design system documentation tool. It helps design teams consolidate UX principles, user interface design, and design tokens in a shared workspace.

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

¥InVision allows you to embed Storybook in your design system documentation.

Adobe XD

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

¥Adobe XD is a UI and UX design tool for creating wireframes, interactive designs, and prototypes.

使用 设计插件 将 Adob​​e XD 与 Storybook 集成。你可以按照这些 instructions 将 嵌入设计规范 与故事一起进行。

¥Integrate Adobe XD with Storybook using the design addon. You can embed design specs alongside stories by following these instructions.

构建你自己的集成

¥Build your own integration

通过构建集成来扩展和自定义 Storybook。与更底层的 Storybook API 集成或引导插件以自定义 Storybook 的 UI 和行为。

¥Extend and customize Storybook by building an integration. Integrate with lower-level Storybook APIs or bootstrap an addon to customize Storybook's UI and behavior.

• 插件文档

  ¥Addon documentation

• 创建插件教程

  ¥Create an addon tutorial