设计

@storybook/addon-designs

一个 Storybook 插件，用于在插件面板中嵌入 Figma 或网站，以改善设计-开发工作流程。

• 文档与演示

要求

• Storybook@>=9.0.0 （此插件的第 7 版支持 Storybook 7，第 8 版支持 Storybook 8）

此插件应适用于任何框架。如果您发现插件无法工作，请提交一个问题。

入门

1. 安装

npm install -D @storybook/addon-designs

yarn add -D @storybook/addon-designs

pnpm add -D @storybook/addon-designs

2. 在 main.js 中注册插件

export default {
  addons: ["@storybook/addon-designs"],
};

3. 将其添加到 story！

export default {
  title: "My stories",
  component: Button,
};

export const myStory = {
  parameters: {
    design: {
      type: "figma",
      url: "https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File",
    },
  },
};

类似项目

• Adobe XD: storybook-addon-xd-designs
• Zeplin: storybook-zeplin
• Abstract: storybook-addons-abstract