Need advice about which tool to choose?Ask the StackShare community!
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.
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
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.
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.
Pros of Figma
- Web-based application18
- Intuitive interface and perfect collaboration10
- Free software8
- Works on both Mac and Windows7
- Highly Collaborative7
- Great plugins, easy to extend6
- Works on multiple OS's5
- Imports Sketch files5
- Large community, tutorials, documentation5
- Hands done the best design tool for collaboration!5
- Prototyping, design files and comments all in one place4
- Interactive, event-based prototypes4
- No more syncing between Sketch and InVision3
Pros of Storybook
Sign up to add or upvote prosMake informed product decisions
Cons of Figma
- Limited Export options6
Cons of Storybook
Sign up to add or upvote consMake informed product decisions
What is Figma?
What is Storybook?
Need advice about which tool to choose?Ask the StackShare community!
What companies use Figma?
Sign up to get full access to all the companiesMake informed product decisions
What tools integrate with Storybook?
Sign up to get full access to all the tool integrationsMake informed product decisions
Blog Posts
+32