Welcome to another post in our ongoing Knowledge Nibbles series. Continuous learning is a core part of the BitBakery culture. We use our Knowledge Nibbles lunch and learns as opportunities for our team to share their insights on new design and development trends and technologies that we use on client projects. Our latest session was with Attila Schmidt, Director of User Experience. He presented an overview on Atomic Design and Storybook, an open-source tool for building UI components and pages in isolation.
Putting philosophy and methodology to work in design
When it comes to design at BitBakery, we always look to Attila Schmidt, BitBakery’s director of user experience. Before Schmidt got into the details of Atomic Design, he took a moment to explain how Atomic Design fits into the overall design and development landscape.
“Atomic Design is the philosophy for how components are designed. You can create your Atomic Designs with pen and paper if you want to. Next, we apply the Atomic Design philosophy to the methodology we use, which is component-based design. Finally, the tool we use to pull it all together Storybook,” Schmidt said.
What is Atomic Design?
Atomic Design is a term coined by Brad Frost, a recognized expert and thought leader on web technologies and how we should build for the web. Frost came up with the principles of Atomic Design to address several challenges designers and developers had building interface components.
The core concept of Atomic Design is breaking down UI elements into their components to make them reusable, testable, and easy for new developers on a team to get started. Whether you’re building a mobile app or a website, the components—or building blocks—are the same:
- Atoms
- These are the smallest building blocks
- Example: buttons, inputs, icons, avatars
- Molecules
- A small combination of Atoms
- Example: creating a search bar that has an input field and a button
- Organisms
- Combination of Molecules
- Example: header, footer, navigation
- Templates
- Grouping of organisms
- Example: a page or screen that gets reused several times
- Pages
- Example: These are similar to templates, but one-off pages
“When you’re designing, you start at the smallest atoms and add complexity by creating molecules and eventually organisms,” Schmidt said.
What is Component-based design?
Component-based design is a way of developing and organizing the isolated, modular components used in any type of project, including React, Vue, Angular and more. Schmidt said that Atomic and component-based design work well together because they share the core concept of using a hierarchy in designing an app or website component.
“The thing that’s really great about using a component-based design system is that it introduces discipline,” Schmidt said. “You’re not going to be cobbling together things piece by piece. You’re going to look at a section of a template and if you need a button, you can check to see if you have a button component.”
Making component-based design work better with Storybook
Using Atomic Design is great in theory, but what about using it in daily work. Schmidt said that if your design team is only doing their work in a Figma file that developers never see, you’re not getting the true advantage of Atomic Design.
We use Storybook, an open-source tool for building UI components and pages, to put the Atomic Design philosophy and component-based design methodology into practice. Storybook enables us to work faster and more collaboratively by creating a central repository of components. The components are built in Storybook by creating a story. Each story represents the rendered state(s) of a UI component.
Creates discipline when looking at design
Giving two developers a design mockup will often produce two different end products. Converting design into components with Storybook means we have one version of a component that multiple developers can use on the part of a project they’re working on.
Designing in isolation
Designing components in Storybook allows us to build and stress-test components without relying on other parts of the application or website. This includes the business logic of an application. For example, you may want to try another language to see how an input field or label handles longer text. Traditionally, the project would need multilingual support to test the component. With Storybook, you can copy and paste the text into the story and see how the component acts without relying on any external dependency.
Scalable documentation
Storybook automatically generates documentation for each story. This auto-generated documentation allows you to see the arguments a component accepts quickly. There are also easy ways to extend the documentation inside of Storybook. Schmidt said you can write simple Markdown and add it to each story within Storybook. This allows you to leave notes for your team to help get started faster with using a component.
Onboard team members with ease
Clients choose BitBakery to scale their development teams for projects of all sizes. We’re always looking for ways to improve how we onboard team members to a new project to deliver exceptional results for our clients. Implementing component-based design with Storybook is one of our favorite ways to help our developers get up to speed with a project. Our developers can quickly see how a component is used within various parts of a page or template. Removing the time wasted searching through code or replicating a scenario means our developers have more time to focus on bringing the client’s project to reality.
Looking for help with your project? Contact our team to learn more about our trusted outsourced software development and design services.
