Design + Code = ❤️ — How to bridge the gap with Figma and Storybook
We’ve integrated Figma with Storybook to improve design and development collaboration in our internal projects. Here’s how we did it.
Joining a project as a frontend engineer to help craft a user-friendly UI is not easy. In the best case scenario, there is already a committed UX design team in place, providing you with all the UI components you need, as well as their technical and visual documentation you need as a developer.
In a lot of cases however these preconditions are not given. Also there are always bumps along the way when it comes to communicating changes.
But do not falter, brave frontend warrior, there are tools out there that shall help you achieve greatness. Here’s a step-by-step guide on how to give both your development and your design team a kick-start into your new UI project.
Understanding the challenges
Before suggesting a solution, we first need to understand the challenges we’re facing. A couple of them are quite common in modern frontend projects:
Creating a shared base for your UI
In order to not reinvent the wheel each time you develop a new UI, it’s important to provide all involved parties with a shared base for collaboration. A UI library can serve this purpose, being the common ground for discussion among business stakeholders, development and design teams.
Avoiding communication gaps
Different teams tend to choose different tools to create UI components. A design team might not be involved in the code and its technical details too much, choosing Figma as the popular choice to collaborate on design files.
Development teams on the other hand do not necessarily focus on the look and feel as much as they care about the technical implementation of UI components and how to access them. Storybook is but one of many tools that can help to create both a technical documentation as well as providing an ordered overview as to what components are actually available and ready to use.
Luckily, both of these tools provide the possibility to plug-in to each other in order to bridge potential gaps between the teams and their tools of choice.
Establish Best Practices
Best practices live in both worlds as well. UI designers may take care about their components being accessible, responsive and match the overall design system. Having a checklist for this in place is helpful not only for the design team but for development reviews as well.
Frontend developers care about the same things, but from a different angle: What is the code value for this colour? What breakpoint values will a UI change its appearance? What are the spacing rules in the layout and how can I access its values? What is the font family for this headline?
Furthermore, both teams want to ensure that the components are tested and reviewed properly. The following steps will help you to recreate our setup so your team will have an easier time tackling those challenges.
Step 1: Setting up Figma
Figma has become the de facto industry standard for creating compelling user interfaces. It enables designers, developers and stakeholders to easily collaborate on the design process for a product and its UI components.
If you want to get started with a small team, only using the most essential features, Figma provides you with a generous free plan out of the box. The precondition for it to be valuable right from the start is keeping structure.
If you create a new design file and share it amongst members of your teams, make sure to use frames, folders, variables and components in a sensible manner. This will help others having an easier time finding what they’re looking for in your Figma file and it will help you linking individual design frames to specific Storybook stories further down the road.
Step 2: Setting up Storybook
Storybook is a powerful and highly customisable way to cataloging your UI component collection in a visual manner, providing both visual examples and technical documentation of their different use cases. Setting up a basic storybook project only takes a few minutes, thanks to the Storybook CLI — see here.
What’s a story?
Think of a story as a documentation of you UI component and its different states and capabilities. Each variation may be represented by a dedicated paragraph that demonstrates how your component looks and behaves, given a specific control configuration (properties).
Integration with Figma
In addition, you can install plugins, such as the Figma plugin for Storybook, to create a design tab in your component story that shows the respective component design files in Figma. This way, developers don’t need to search long for the Figma specifications of a component, being able to see it directly in Storybook and used the linked reference to jump directly to Figma to inspect details.
By enabling this, design values are at the developers finger tips and potential derivations of the component implementation compared to the design file will become much easier to spot.
Step 3: Implementing Best Practices
Establishing best practices can help you to make your collaboration process more transparent and less error prone. Here are but a few examples you can make use of to make the best of your Figma+Storybook setup:
Enable Messenger Notifications
Using instant messaging as the central platform for quick communication has become a standard in most product development teams. Tools such as Slack or Microsoft Teams help you keep track of updates in your organisation and get in touch with others fast.
When working on implementation details of your product however, it makes sense to keep communication close to the context. Similar to code collaboration platforms like GitHub, where developers contribute and review each others work before moving on the next stage, Figma also enables collaborators to leave comments in design files and directly mention other users to request feedback.
As you can imagine however, having different platforms for communication used by different teams creates boundaries that information can easily get lost in. To avoid this, tools like Figma or Github enable you to integrate with your organisations central instant messenger, so you can connect your personal account and don’t miss out on new comments and mentions on either platform.
Example: Figma Notification
Example: GitHub Notification
Provide Test Coverage
Being able to access the test coverage of existing components will establish transparency about its current capabilities and provides a base for discussing gaps and potentials. The Storybooks addon ecosystem provides various integrations with common test runners, such as Jest or Vitest (the screenshot above shows an example of the latter).
Don’t let cases be a developer-only domain — involve business and design stakeholders as well!
Design Reviews
Before shipping to production, make sure to bring design and development together for a final review of the implementation. Experiencing the live interaction of your UI components together might provide valuable insights for future improvement and can even catch bugs and design flaws before they reach the end user. This is yet another step of ensuring product quality through close collaboration.
Conclusion
As you can see, creating a common ground for design and development teams to collaborate on isn’t as hard as it might seem. Using it frequently to discuss new solutions and communicate changes can become a key factor to reduce friction, saving effort and time in the process and thus enabling you to ship engaging experiences to your users faster.
If you’d like to know more about how to make the process of building great, scalable products with your teams, make sure to check out the DELTA framework by Comsysto and get in touch with us!
This blogpost is published by Comsysto Reply GmbH
