設計整合

Storybook 與設計工具整合，以加速您的開發工作流程。這有助於您在設計流程的早期偵錯不一致之處、探索可重複使用的現有元件，並將設計與 stories 進行比較。

Figma

Figma 是一款協作 UI 設計工具，可讓多人同時在瀏覽器中處理相同的設計。整合 Storybook 和 Figma 有兩種方式。

將 Storybook 嵌入 Figma
將 Figma 嵌入 Storybook

使用外掛程式將 Storybook 嵌入 Figma

Storybook Connect 是一個 Figma 外掛程式，可讓您將元件 stories 嵌入 Figma 中。它由 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

一旦它們連接上，您就可以點擊側邊欄中的連結來查看故事。點擊「查看故事」。或者，使用命令面板打開外掛程式（在 Mac OS 中，使用 Command + /，在 Windows 中，使用 Control + /），然後輸入 Storybook Connect。

Figma sidebar with story link

使用外掛程式將 Figma 嵌入 Storybook

Designs 外掛程式允許您在 Storybook 中嵌入 Figma 檔案和原型。

Storybook addon figma

安裝 design 外掛程式

執行以下命令來安裝此外掛程式。

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.dev.org.tw/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',
    },
  },
};