设计

@storybook/addon-designs

一个 Storybook 插件，它将 Figma 或网站嵌入插件面板中，以实现更好的设计-开发工作流程。

• 文档 & 演示

要求

• Storybook@>=8.0.0（此插件的版本 7 支持 Storybook 7）

此插件应该与任何框架配合使用良好。如果您发现插件无法正常工作，请打开一个问题。

入门

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. 将其添加到故事中！

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