Addon-Designs

Visit Tool

addon-designs is a Coding & Development tool that embeds Figma, websites, or images directly into the Storybook addon panel. It enhances the design-development workflow for Storybook users.

Claim this tool

9Views

At a glance

Pricing

Open Source

Free tier

Yes

API

Skill level

Technical

About

What is addon-designs?

addon-designs is a Storybook addon designed to streamline the design-development workflow by allowing users to embed Figma designs, websites, or images directly within the Storybook addon panel. This open-source tool, available on GitHub, integrates seamlessly with Storybook versions 10.0.0 and above. It simplifies the process of referencing design assets during component development, ensuring developers have immediate access to visual specifications without leaving their development environment. The addon supports various content types, making it a versatile solution for different design collaboration needs.

Best used for

Ideal for UX designers and developers who need to keep design specifications readily accessible within their development environment, integrate Figma mockups directly into Storybook, and display live websites or images for comparison. Especially valuable for ensuring design consistency and accelerating feedback loops.

Common actions

integrate designs

embed design assets

streamline design workflow

deepfakelow-code/no-codeopen-sourcecollaborationautomated workflow"AI Agents"face swappingworkflowsgithub copilot

Capabilities

Key features

Embed Figma designs
Embed websites
Embed images
Storybook addon panel

Target Audience

ux designer

Integrations

figmastorybook

Pricing & Plans

Open Source

Free

FAQs

What versions of Storybook are compatible with addon-designs?

addon-designs is compatible with Storybook versions 10.0.0 and above. It is designed to work well across various frameworks supported by Storybook, ensuring broad applicability for different projects.

What types of content can be embedded using addon-designs?

Users can embed Figma designs, external websites, or images directly into the Storybook addon panel. This flexibility allows for diverse design referencing and collaboration within the development environment.

How do I add addon-designs to my Storybook project?

To add addon-designs, first install it via npm, yarn, or pnpm. Then, register the addon in your Storybook's main.js configuration file. Finally, specify the design parameters (type and URL) in your story's metadata.

Trending

Subcategories trending in Coding & Development

Open Source & Models Code Assistants DevOps & Infrastructure No-Code / Low-Code Testing & QA Backend & APIs

Trending

Explore

Browse AI tools by category

Content & Design Productivity & Business Coding & Development AI Agents & Automation Research & Education Wellness & Lifestyle Career Development Marketing & Growth Data & Analytics Customer Support & CX Finance E-commerce