Need advice about which tool to choose?Ask the StackShare community!

Figma

4K
2.4K
+ 1
87
Storybook

1.4K
634
+ 1
0
Add tool

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.

Advice on Figma and Storybook
Needs advice
on
FigmaFigmaInVisionInVision
and
ZeplinZeplin

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

See more
Replies (2)
Recommends
on
SketchSketch

Zeplin is great for Developer handoff and setting as source of truth for Design and Developemt. InViosion is the standard for communicating/testing design ideas and prototypes with stakeholders. Both applications offer unlimited projects. I use them on a daily basis at big enterprises and for small weekend projects.

See more
Mert Torun
Product designer at Mert Torun · | 3 upvotes · 164.5K views
Recommends
on
BasecampBasecamp

I have been using Basecamp since 2008 to handle my client communications. I have gone through all of its three iterations.

I'd recommend Basecamp above the others because:

  • It is a communication tool through and through. Looking at your description, that seems to be what you need. Zeplin is a developer handoff tool. It isn't designed to cover a more broad use case as you describe. Invision has some features that you want, but it is primarily a tool for building quick low-fidelity prototypes from website mockups. Figma is a great design tool. For the last two, communication is a secondary feature.
  • It was designed by a design agency (37 Signals) for their own needs, which were quite similar to yours. (They later closed the agency to focus on Basecamp as a product full-time)
  • It has flat pricing that doesn't count the number of projects, clients or team members you have. You don't have to think twice about opening another project or inviting another user. You always pay the same price.
  • It can separate team and client communications. The team can talk about something without the client ever seeing it, in the same context.
  • It can keep todo lists, which I think you will need anyway.
  • Access control is based on projects. Every team member or client will only see the projects they are invited to. They will not even know the existence of others. (Except admins. They can see and join all projects)
  • It is easy to understand and use. The design is free of clutter and easy on the eyes. Your clients (especially the tech-averse ones) will appreciate it.
  • It has mobile/desktop apps with the full functionality of the web app. You won't have to wait for someone to sit down to get a quick approval.

The only real downside for me was the lack of language support in the user interface. You will be fine if your users understand some very basic written English. Some of my clients did not, so I had to walk them through it.

See more
Manage your open source components, licenses, and vulnerabilities
Learn More
Pros of Figma
Pros of Storybook
  • 18
    Web-based application
  • 10
    Intuitive interface and perfect collaboration
  • 8
    Free software
  • 7
    Works on both Mac and Windows
  • 7
    Highly Collaborative
  • 6
    Great plugins, easy to extend
  • 5
    Works on multiple OS's
  • 5
    Imports Sketch files
  • 5
    Large community, tutorials, documentation
  • 5
    Hands done the best design tool for collaboration!
  • 4
    Prototyping, design files and comments all in one place
  • 4
    Interactive, event-based prototypes
  • 3
    No more syncing between Sketch and InVision
    Be the first to leave a pro

    Sign up to add or upvote prosMake informed product decisions

    Cons of Figma
    Cons of Storybook
    • 6
      Limited Export options
      Be the first to leave a con

      Sign up to add or upvote consMake informed product decisions

      - No public GitHub repository available -

      What is Figma?

      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.

      What is Storybook?

      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.

      Need advice about which tool to choose?Ask the StackShare community!

      What companies use Figma?
      What companies use Storybook?
      Manage your open source components, licenses, and vulnerabilities
      Learn More

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Figma?
      What tools integrate with Storybook?

      Sign up to get full access to all the tool integrationsMake informed product decisions

      Blog Posts

      What are some alternatives to Figma and Storybook?
      Sketch
      Easily create complex shapes with our state-of-the-art vector boolean operations and take advantage of our extensive layer styles.
      InVision
      InVision lets you create stunningly realistic interactive wireframes and prototypes without compromising your creative vision.
      Adobe XD
      A vector-based tool developed and published by Adobe Inc for designing and prototyping user experience for web and mobile apps.
      Zeplin
      Collaboration app for designers & developers. Supports Sketch and Photoshop (on beta!).
      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.
      See all alternatives