🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket

@storybook/addon-designs

Package Overview
Dependencies
Maintainers
12
Versions
93
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-designs

Storybook addon for embedding your design preview in addon panel

latest
Source
npmnpm
Version
11.0.3
Version published
Weekly downloads
791K
-16.79%
Maintainers
12
Weekly downloads
 
Created
Source
logo

npm version Monthly download GitHub license code style: prettier

@storybook/addon-designs

A Storybook addon that embed Figma or websites in the addon panel for better design-development workflow.

  • Docs & Demo

Requirements

  • Storybook@>=10.0.0
  • This addon should work well with any framework. If you find that the addon does not work, please open an issue.

Version compatibility

Addon designs versionStorybook version
^11.0.0^10.0.0
^10.0.0^9.0.0
^9.0.0^9.0.0
^8.0.0^8.0.0
^7.0.0^7.0.0

Getting started

1. Install

npm install -D @storybook/addon-designs

yarn add -D @storybook/addon-designs

pnpm add -D @storybook/addon-designs

2. Register the addon in main.js

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

3. Add it to story!

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

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

Similar projects

Keywords

storybook-addon

FAQs

Package last updated on 26 Nov 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts