As a front-end developer, it’s common to experience problems when working with a designer and the files they share.
Let's talk about what those are, why they happen, and why atomic design can help.
These complaints are common because communication is hard! Especially between different teams who may only have a vague/cursory understanding of how the other teams operate.
How can we take positive steps to solve this communication problem and create cohesion between the different teams?
Let’s talk about the ways you can prevent them from happening.
Why atomic design?
If you haven’t heard of "atomic design" - it is a methodology for designing and building user interfaces in a systematic and structured way.
The methodology was created by Brad Frost and is based on the idea that complex user interfaces can be broken down into smaller, more manageable parts or building blocks.
Atoms are the smallest building blocks representing UI elements like buttons, inputs, and labels.
Molecules are groups of atoms that work together to form more complex UI elements like forms, search bars, and product cards.
Organisms are groups of molecules and atoms that make up entire UI components, such as headers, footers, and navigation bars.
Templates are a higher level of abstraction that defines the layout and structure of a page or interface.
Pages represent specific instances of templates with real content and data.
The key idea behind atomic design is that these building blocks can be combined and reused in various combinations to create consistent and scalable user interfaces. Using atomic design, designers and developers can create a more efficient and cohesive design process by building reusable components that can be used across multiple projects.
There are many benefits to adopting an atomic design system, such as ensuring consistency, flexibility, reusability, scalability, and maintainability of your project.
However, I want to focus on how this system can improve your team's efficiency.
Adopting an atomic design system will go a long way in creating a shared understanding and common operating picture between development and design.
With both teams aware of what components are available and capable of, you can greatly reduce the chance of surprise designs or, at the very least, help correctly forecast when more work may be needed for one-off designs/builds.
Before implementing a system, evaluate your tooling.
Your tooling can go a long way in creating a shared understanding of your design system. Modern tools can really help your team be disciplined in sticking to a design system.
We put together a design system interview template that has all the questions you need to help organize and gather this data from everyone on your product team.
While it may seem counterintuitive, you need two sources of truth to define your design system.
The design team maintains one source of truth representing the expectations for a component. This source defines what a component should look like and be capable of.
The dev team will maintain the second source of truth, representing the execution of a component - what it looks like and is capable of. Most teams are very comfortable delivering designs to a dev team but often fall short of communicating the execution of components back to the design team.
The design team maintains a Figma file as the expectation for your project.
Figma can be easily configured to enforce theming, such as color names and values, typography values, spacing values, etc. It can also be configured to use instances of components across the design - so if changes are made to the base component, those changes will be represented across the entire design system.
This is also a great place for devs and designers to comment on and discuss the behavior of the designs.
The development team maintains a storybook instance as the execution of the project.
Storybook is an open-source tool for building UI components and pages in isolation. It's a development environment that allows you to create, test, and showcase your components in an isolated environment without needing a full application setup.
Storybook can easily be configured to display multiple variants of a component and all the attributes that affect a component's performance. You can also provide documentation on how the component is supposed to behave.
Occasionally, execution diverges from expectations. When this happens, it is vital to address any disparities. Reliance on a governance model will help you navigate these waters, but your organization may not be ready yet. At a minimum, a prompt huddle after completing a component can aid in "leveling the bubbles."
A designer can quickly identify areas in which changes are required in the coded component.
At the same time, adjustments to the design may be necessary if certain elements are not feasible due to technical or time constraints. This huddle is instrumental in aligning expectations with execution.
Our Design System Governance Template is great for this.
By fostering a shared understanding of the project's current capabilities among Dev and Design, you can increase productivity, reduce frustration, and expedite the creation of new features.
Implementing a new atomic design system may seem daunting and overwhelming, but it is a decision that can yield significant benefits.
You can successfully navigate this transition by fostering constructive team dialogue, taking a measured approach, and maintaining discipline in using your tools. With time and practice, this new process will become second nature, and you'll find it hard to imagine how you previously managed without it.
We have some resources to assist you in jump-starting this process:
Design Systems in Figma Course
Shipwright - Free Figma UI Kit and Design System
Getting Started with Design Systems - Free Video Series
Design System Governance Template
Download our free guide to begin implementing feedback loops in your organization.
By filling out this form, you agree to receive marketing emails from Headway.
In this free video series, learn how the best startup growth teams overcome common challenges and make impact.
In this free video series, learn how the best startup growth teams overcome common challenges and make impact.
In this free video series, learn proven tactics that will impact real business growth.
By filling out this form, you agree to receive marketing emails from Headway.
Dive deeper into the MoSCoW process to be more effective with your team.
By filling out this form, you agree to receive marketing emails from Headway.
In this free video series, learn the common mistakes we see and give yourself a greater chance for success.
By filling out this form, you agree to receive marketing emails from Headway.
Everything you need for a killer DIY audit on your product.
See all the ways we can help you grow through design, development, marketing, and more.
Level up your skills and develop a startup mindset.
Stay up to date with the latest content from the Headway team.