Building FilmChain’s Design System with Storybook and Chromatic
Design systems, famously used by the likes of AirBnB and Uber, are now standard practice in the design and development space.
At FilmChain, we’ve been working hard on our design system, a reusable component library that makes up the building blocks of our UI. By setting standards that define the function and form of components, our design system has enhanced the user experience whilst making life easier for our developers and designers.
Our approach helps us achieve:
- Scalability: Design systems act as a single source of truth by providing access to the latest version of the component library and up-to-date documentation
- Speed: User interfaces can be designed and implemented quickly by reusing pre-built and pre-approved components
- Consistency: Introducing a shared set of standards for building components ensures consistency in behaviour and style
We’ve integrated with Storybook and Chromatic to build and maintain our design system.
Our design system has been built using Storybook, an open-source tool for designing, building, and organising UI components. Storybook provides a development environment for building and testing components in isolation, and auto-generates documentation that can be further customised.
Storybook also integrates with the most popular JavaScript UI frameworks, making it a great fit for most frontend stacks.
At FilmChain, there are two main actors that benefit from Storybook’s improved collaboration and workflow. The development team uses it during the flow of creating and testing new components. By promoting a cyclical iteration of ‘develop and test’, Storybook helps them:
- Develop components independently in an isolated environment
- Receive immediate feedback through automated visual testing
- Simulate different states of the component to anticipate any bugs
The design team uses it to access, view, and interact with the component library. By bridging the gap between design and development, Storybook helps them:
- Review and test components in the early stages of development
- Approve and validate changes before taking them to the live environment
- Maintain up-to-date documentation
- Streamline the design hand-off process with useful add-ons for Abstract, Invision, and more
Maintaining a design system requires a collaborative workflow that supports communication and engagement.
Chromatic, a tool built specifically to automate workflows for Storybook, is also fundamentally important for the team when deploying, reviewing, and testing our design system. Chromatic allows us to deploy new versions to a secure cloud workspace, ensuring collaborative teams can access the latest version and participate in the review process. Each version is automatically tested for visual changes and a history of component changes is maintained. Chromatic is also fully automated with continuous integration, auto-updating components with each push of code.
Thanks to Storybook and Chromatic, we’ve built a design system that allows us to design and develop new products faster than ever. We’ve streamlined the development, testing, and documentation of our UI components and automated our workflows. As startups should have agility and adaptation in their DNA, we built a robust design system that can deliver customisations for new clients and integrations, in a fast and secure manner.
