加入直播:周四,11am EDT,Storybook 9 发布 & AMA

设计

用于在插件面板中嵌入设计预览的 Storybook 插件

在 Github 上查看

npm version Monthly download GitHub license code style: prettier

@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",
    },
  },
};

类似项目