Storybook 附加元件，可提取 Storybook 資料並將故事轉換為 Figma 元件，以實現更好的設計開發工作流程。

在我們的部落格文章中了解更多關於動機和好處。

示範

需求

• Storybook@>=6.0.0
• Anima 帳戶
• 註冊Anima 的 beta 版
• Anima 的 Figma 外掛程式

此附加元件應適用於任何框架。如果您發現附加元件無法運作的情況，請開啟一個 issue。

:warning: 目前，我們僅支援 Webpack 建構器，如果您使用自訂的 storybook 建構器，例如 vite 或 storybook 的實驗性功能之一，請寫信給我們或開啟一個 issue，因為該附加元件可能無法如預期運作。

開始使用

1. 安裝

npm install --save-dev storybook-anima --legacy-peer-deps
# yarn add -D storybook-anima

2. 在 .storybook/main.js 中註冊附加元件

// .storybook/main.js
module.exports = {
  addons: ["storybook-anima"],
};

3. 設定 Anima 存取權杖

首先從 Anima Figma 外掛程式或您的 Anima 團隊設定中取得存取權杖。了解更多關於如何從 Anima 取得權杖。

然後，您可以將存取權杖設定為名為 STORYBOOK_ANIMA_TOKEN 的環境變數。

您可以在專案的根資料夾中建立 .env 檔案，或者您可以在建構或動態執行 Storybook 時，以命令列參數的方式提供環境變數。

# .env
STORYBOOK_ANIMA_TOKEN="<paste your TOKEN here>"

設計系統符號支援

Anima 在產生故事時也可以使用您的設計符號，並自動將其轉換為 Figma 樣式。

若要啟用此功能，請依照下列步驟操作

1 - 準備您的設計系統符號檔案

該檔案應以標準 JSON 格式撰寫。

範例

design-system-tokens.json

{
  "--primary": {
    "$value": "#1976D2"
  },
  "--secondary": {
    "$value": "#ffcd29"
  }
}

2 - 將您的設計系統符號檔案新增至 storybook 預覽

前往 .storybook/preview.js 並匯出一個名為 anima 的新參數，其中包含 designTokens 下的設計系統符號檔案的路徑。

// .storybook/preview.js
export const parameters = {
  ...
  anima: {
    designTokens: require('../design-system-tokens.json')
  },
};

完成！現在，如果您有使用這些設計符號的元件，它們將會以使用原生 Figma 樣式的元件匯出至 Figma。

注意事項

目前，如果您的故事組成僅包含元件本身，而不是包含多個範例或內含文件的複雜故事，此整合效果最佳。

簡而言之，您在 Storybook 故事中看到的內容，就是您在 Figma 中獲得的內容。

布林控制類型限制

由於Storybook 錯誤，如果布林控制項沒有明確指定 type，則附加元件無法正確處理。

例如，如果參數沒有明確指定 type，我們可能會難以處理具有以下 argTypes 定義的故事。

  argTypes: {
    disabled: { control: "boolean" },
    isContained: { control: { type: "boolean" } },
  },

在這種情況下，有必要為每個布林控制項新增明確的類型。

  argTypes: {
    disabled: { control: "boolean", type: "boolean" },
    isContained: { control: { type: "boolean" }, type: "boolean" },
  },

變體數量限制

該附加元件目前將任何給定故事的變體數量限制為最多 1025 個。因此，匯出的元件中可能會缺少某些屬性。

在不久的將來，我們將提供一些選項來自訂在匯出過程中應包含或排除哪些控制項。

開發

在不同的索引標籤中執行以下命令以開始開發

npm run build
npm run dev

如需更多資訊，請造訪：Anima Storybook 整合

授權

MIT © Anima