Figma vs Storybook

Overview

Figma

Stacks4.2K

Followers2.5K

Votes102

Storybook

Stacks1.9K

Followers643

Votes0

GitHub Stars88.6K

Forks9.8K

Figma vs Storybook: What are the differences?

Introduction

In this markdown, I will provide a comparison between Figma and Storybook, highlighting the key differences between the two platforms.

Design Collaboration: Figma is primarily a design collaboration tool that allows multiple designers to work together on the same design project in real-time. It provides features like commenting, version history, and design feedback, making it ideal for remote teams working on design projects. On the other hand, Storybook is a UI component development and documentation tool that focuses on isolating and rendering individual UI components for testing and showcasing purposes. It does not provide as extensive collaboration features as Figma.
Design Creation and Prototyping: While Figma allows designers to create and prototype their designs within the same tool, Storybook primarily focuses on showcasing and testing already developed UI components. Figma offers a wider range of design features, including vector editing, prototyping, and animation, making it a more comprehensive solution for design creation and iteration.
Developer-Friendly Environment: Storybook provides a developer-friendly environment as it allows developers to view, interact with, and test UI components in isolation without the need for complex setup or dependencies. It offers features like hot-reloading, documentation generation, and testing utilities, which make it easier for developers to collaborate with designers and integrate the components into their codebase. Figma, on the other hand, is not specifically tailored for developers and does not provide such extensive features for component development and testing.
Version Control and Design History: Figma offers a robust version control system that allows designers to access previous design iterations, track changes made by team members, and restore previous versions if needed. It provides a detailed design history and allows for easy collaboration on design files. Storybook, on the other hand, does not have built-in version control or design history functionality. It primarily focuses on showcasing and testing UI components rather than managing design files and iterations.
Accessibility and Usability Testing: Figma provides features and plugins for conducting accessibility and usability testing within the tool itself. Designers can test their designs for color contrast, screen reader compatibility, and other accessibility guidelines. Storybook, being focused on UI component development and showcasing, does not provide built-in features for conducting accessibility or usability tests.
Deployment and Integration: Figma allows designers to easily share their design files with stakeholders and developers by providing a cloud-based platform. It also offers integrations with popular design handoff and collaboration tools like Zeplin, InVision, and Slack. Storybook, on the other hand, does not provide direct deployment options or integrations with design collaboration tools. Its main focus is on providing an isolated environment for showcasing and testing UI components.

In Summary, Figma is a comprehensive design collaboration and creation tool that provides features for real-time collaboration, design creation, and prototyping. On the other hand, Storybook is a UI component development and documentation tool that focuses on showcasing and testing already developed UI components in an isolated environment.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Figma, Storybook

Bobby

Feb 14, 2020

Needs advice

Hello, I want to start an unlimited graphic design service. (yes, yet another one, but bear with me)

It’s the second week that I’m working on this project, my goal is to test the market as soon as possible.

One element that is missing is the solution to handle communication between the clients and the designers.

• Mandatory: it needs to communicate instructions, progress/status, and design files (exported from Adobe Illustrator or similar). • Optionally it would also display the design inside the app so the files don’t need to be opened. • Optionally it would let the client easily mark the design where he wants revision.

• Mandatory: it needs to have unlimited clients and unlimited projects (I’ll have hundreds of clients and each will have at least one project) • Optionally it would auto-assign a new project to the first available designer, or let the designers choose themselves which project they want to work on • Optionally it would have groups (corresponding to a subscription plan) with different clients and different designers in each • Optionally it would communicate with other apps so that client and designer management tasks (access, payment, etc) can be automated

I’m open to all suggestions, not just the selection above. Ultimately I guess I’ll have a custom app developed on a no-code platform, but to begin with I need something simple and ready.

Reminder: it is only for graphic design, between my designers and my clients

169k views169k

Comments

Detailed Comparison

Figma	Storybook
Figma is the first interface design tool with real-time collaboration. It keeps everyone on the same page. Focus on the work instead of fighting your tools.	It is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Online Sketch alternative; Free for small teams; Easy to use	-
Statistics
GitHub Stars -	GitHub Stars 88.6K
GitHub Forks -	GitHub Forks 9.8K
Stacks 4.2K	Stacks 1.9K
Followers 2.5K	Followers 643
Votes 102	Votes 0
Pros & Cons
Pros 19 Web-based application 11 Intuitive interface and perfect collaboration 9 Free software 8 Highly Collaborative 8 Works on both Mac and Windows Cons 6 Limited Export options	No community feedback yet
Integrations
Trello Coda ProtoPie Principle Dropbox Slack Notion Pendo Zeplin Avocode	No integrations available

What are some alternatives to Figma, Storybook?

Ant Design

An enterprise-class UI design language and React-based implementation. Graceful UI components out of the box, base on React Component. A npm + webpack + babel + dora + dva development framework.

Sketch

Easily create complex shapes with our state-of-the-art vector boolean operations and take advantage of our extensive layer styles.

Adobe Photoshop

It is the best in the world of graphic design and image processing software that will realize any of your ideas. Create and enhance photos, illustrations and 3D graphic objects.

Adobe XD

A vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps.

Angular Universal

It executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Angular Material

Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop. It allows to create material styled angular apps fast and easy.

Zeplin

Collaboration app for designers & developers. Supports Sketch and Photoshop (on beta!).

Blender

It is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline—modeling, rigging, animation, simulation, rendering, compositing and motion tracking, even video editing and game creation.

PrimeReact

PrimeReact is a rich set of open source UI Components for React.

ProtoPie

It is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT. ProtoPie runs on macOS & Windows and the player app is on iOS and Android.

Related Comparisons

Figma vs Storybook: What are the differences?

Introduction

In this markdown, I will provide a comparison between Figma and Storybook, highlighting the key differences between the two platforms.

Design Collaboration: Figma is primarily a design collaboration tool that allows multiple designers to work together on the same design project in real-time. It provides features like commenting, version history, and design feedback, making it ideal for remote teams working on design projects. On the other hand, Storybook is a UI component development and documentation tool that focuses on isolating and rendering individual UI components for testing and showcasing purposes. It does not provide as extensive collaboration features as Figma.
Design Creation and Prototyping: While Figma allows designers to create and prototype their designs within the same tool, Storybook primarily focuses on showcasing and testing already developed UI components. Figma offers a wider range of design features, including vector editing, prototyping, and animation, making it a more comprehensive solution for design creation and iteration.
Developer-Friendly Environment: Storybook provides a developer-friendly environment as it allows developers to view, interact with, and test UI components in isolation without the need for complex setup or dependencies. It offers features like hot-reloading, documentation generation, and testing utilities, which make it easier for developers to collaborate with designers and integrate the components into their codebase. Figma, on the other hand, is not specifically tailored for developers and does not provide such extensive features for component development and testing.
Version Control and Design History: Figma offers a robust version control system that allows designers to access previous design iterations, track changes made by team members, and restore previous versions if needed. It provides a detailed design history and allows for easy collaboration on design files. Storybook, on the other hand, does not have built-in version control or design history functionality. It primarily focuses on showcasing and testing UI components rather than managing design files and iterations.
Accessibility and Usability Testing: Figma provides features and plugins for conducting accessibility and usability testing within the tool itself. Designers can test their designs for color contrast, screen reader compatibility, and other accessibility guidelines. Storybook, being focused on UI component development and showcasing, does not provide built-in features for conducting accessibility or usability tests.
Deployment and Integration: Figma allows designers to easily share their design files with stakeholders and developers by providing a cloud-based platform. It also offers integrations with popular design handoff and collaboration tools like Zeplin, InVision, and Slack. Storybook, on the other hand, does not provide direct deployment options or integrations with design collaboration tools. Its main focus is on providing an isolated environment for showcasing and testing UI components.

Figma vs Storybook

Overview