Accelerate UI Design and Development with Figma and Storybook

An intuitive User Interface (UI) is critical to the success of any software product. To craft a great user experience for your users, it is essential for your UI designers and engineers to collaborate effectively. To do this, they need to share, present, and solicit feedback early in the process. 

However, one of the classic hurdles in frontend development is to keep designers abreast of what’s live in production. Unfortunately, this leads to confusion around a single source of truth that, in turn, can impact an organization’s ability to ship better products. 

However, there’s always a solution to every challenge.

Enter the component-driven approach to UI design and development. Embracing component-driven development can help bring your designers closer to the development side of UI and share a common construct. That’s precisely where Figma and Storybook come into play. 

To help you get started, we’ve put together this blog. We’ll help you learn:

• What is Figma
• What is Storybook
• How to link Figma and Storybook

What is Figma?

Figma is a powerful tool that allows you to collaborate on designs in real-time with other stakeholders via a web or desktop app. 

It offers features such as a modern pen tool that lets you draw in any direction with vector networks, instant arc designs, and the ability to tap into advanced font features to take your design process to the next level. 

UI designers also benefit from its auto layout feature that lets you spend more time iterating and less time moving things around. The platform also has a robust ecosystem of plugins and widgets that enables you to extend Figma and customize your workflow. 

With Figma, you can build an iterative design flow. You can share, present, and gather team and client feedback on interactive prototypes with smart animation and dynamic overlays. The product also allows you to create design systems to ensure the design is consistent across your organization. With the design system hosted in a cloud environment, teams across different geographies can easily use the design libraries to create consistent styles with color, text, grid, and effect.

What is Storybook?

Storybook is an industry-leading development tool for building user interface components in isolation. The product allows users to combine components to add functionality and save different use cases as stories. With Storybook, UI developers do not need to launch a live app or wrangle with data to access and build components or pages. 

Since developers can build one component at a time and reuse previously built components across screens and apps, the tool helps streamline the entire UI development process. In addition, Storybook also enables users to supercharge their workflow with its ecosystem of add-ons. The UI development tool allows teams to test UIs with minimal effort. It also automatically helps you generate UI docs that your team can reuse. To put it simply, you can use Storybook to:

• Develop code-based components for reuse across platforms and devices.
• Invite other stakeholders - designers, engineers, and product managers - early in the process. 
• Showcase components in an interactive development environment without needing to mess with the entire tech stack of the application. 
• Show different use cases and examples for implementing components.
• Integrate add-ons to supercharge your development workflow by automating and simplifying prototyping, testing, and documentation.

How to connect Figma and Storybook?

Linking Figma components to their Storybook counterparts can help you view stories without leaving Figma. There is a Figma plugin - Storybook Connect -  that lets you seamlessly connect your Figma design files to their live stories. And although you can connect all your Figma designs, variants, and instances to the stories, you cannot link stories to layers. 
 
Prerequisites (Before you download the plugin)

• Figma editor role (to both link and view stories)
• Listed as a collaborator in the Chromatic project

Install the plugin

• Go to Storybook Connect in the Figma community to install the plugin.
• Open the plugin from the Resources Tab (shift+i) > Plugins > Storybook Connect. 
• Follow the installation instructions to authenticate with Chromatic.

In Storybook

• Sign in with Chromatic.
• Go to a story in a Storybook that is published on Chromatic.
• Copy the URL for the story from the address bar.

In Figma

• Open a Figma file.
• Run the Storybook plugin in Figma.
• Select the Figma component you want to link the story to. The Storybook plugin supports linking stories to Figma components, variants, and instances.
• Paste the URL into the plugin modal.
• Click the Link story.

Figma will show links to the story in the right sidebar. If a component were linked, all instances of that component would have the link.
 
Open a story in Figma

• Select the component that you’ve previously linked in Figma.
• Then navigate to Figma’s Design sidebar and click the “View story” action. 

Although the Figma and Storybook integration helps you to speed up UI development, the permission and access requirements of Figma Connect might be its limitation since, for many teams, developers do not require edit access; the best practice here is to grant access on a needs basis. In addition, assigning edit roles to a client, who might be in a non-technical role,to review developed components might also not make a lot of sense. 
In such a scenario, using a cloud-based Chromatic workspace emerges as a more robust and richer solution with less risk of design being unintentionally changed by someone not familiar with Figma. Chromatic is a cloud-based toolkit that lets you automate testing visual changes to your components. It lets you publish changes for team members to visually test, review, and share feedback. Other members can review new iterations according to their roles, and changes can be accepted or denied per the individual components. 

Conclusion

Figma, Storybook, and Chromatic add a whole new level of team collaboration for engineering teams. As a result, integrating these tools can increase team efficiency and deliver better products. However, building a perfect in-house team might not work for some businesses. Equally, you won’t get immediate results.
So if setting up an internal team is not strategically important to you, or you need to accelerate your design and development process, you can consider outsourcing to a reliable front-end development partner like Kellton. 

We offer:

• Immediate access to a talented global network of UI designers and developers
• Decades of experience in front-end development projects
• A range of other services, including UX design, backend development, tech advisory, and consulting, to make your project a success

Get in touch today – we’d love to learn about your project.