What are the main challenges of using a design system?
Setting the foundations of a design system takes time and a team focused on perfectionism. Since the focus here is on creating the components only a single time so that they can be reused across multiple products or applications, this should be started by most experienced designers.
Everyone in the team needs to know how to work as a whole – working as individuals with a design system will result in broken experiences. Work the mindset of the team to work as one.
Thirdly, onboarding new members to the design system can be challenging at first due to the dimension it can reach. It’s important to document as much as possible.
Our approach inside Celfocus: atomic design
At Celfocus we’ve been implementing design systems for a while now and we’re constantly evolving our solution. We’re going with the atomic design approach, which was created by Brad Frost. Just like in chemistry, we break our components into atoms, molecules and organisms which will then be used to build templates and pages.
Atoms are the most basic elements such as form labels, inputs, or buttons. Molecules are more tangible as they are a combination of atoms bonded together so if for example, you’d combine a form label with an input or a button you’d get a molecule. Finally, organisms are the combination of groups of molecules that are joined together to form a relatively complex interface. Let’s say navigation, which would consist of several buttons and an image, would use several molecules and an atom (for the image) – all of these together form an organism.
With these components created, we’re ready to build templates that consist of several organisms and more static content feature placeholders for contents. Templates aren’t always used and are seen as optional. At Celfocus, what we end up using mostly are pages, which are built using every type of component from the atom to the organism.
What can we expect in the future for design systems?
In conclusion, the future of design systems is bright and with more tools allowing us to work collaboratively, we can see this evolving further. Each day, new front-end frameworks are allowing us to work collaboratively with reusability,and the same goes for the visual designers who can now work on the same canvas as they are speaking on the phone.
When implemented well, it can save time, ensure a great streamline of work and enable the entire team to work together on tackling complex challenges.