{"id":4423,"date":"2022-01-06T20:08:49","date_gmt":"2022-01-06T19:08:49","guid":{"rendered":"https:\/\/bridgestudio.co\/?p=4423"},"modified":"2022-01-06T20:10:43","modified_gmt":"2022-01-06T19:10:43","slug":"whats-wrong-with-the-atomic-design-system","status":"publish","type":"post","link":"https:\/\/bridgestudio.co\/whats-wrong-with-the-atomic-design-system","title":{"rendered":"What’s Wrong with the Atomic Design System?"},"content":{"rendered":"\n

Atomic Design<\/a> is a way of organising a design system from small components to large components. These components are referred to as atoms, molecules, organisms, templates, and pages. They all work together to create an effective interface design system. An atom is the smallest building block and combines with other atoms to form molecules. A button is considered to be an atom and when combined with other elements like an input field it will create a form which is considered to be a molecule.<\/p>\n\n\n\n

\"UI<\/figure>\n\n\n\n

The Atomic Design System Flaw<\/strong><\/h2>\n\n\n\n

Sounds great eh? But wait, Atomic Design has one flaw that makes it difficult to work with.<\/p>\n\n\n\n

So you've organised your design components into atoms, molecules, organisms, templates and you feel like some kind of design god. Then you come to look for those components when building a design like a form on a website. In your design god head, buttons and more complicated things a dropdown button are fairly similar. But according to Atomic Design they sit in two different categories. We have now encountered the problem that is technically know as, \"Is this an atom or a molecule, what the hell is it, Jimmy?\".<\/p>\n\n\n\n

They are both navigational tools that should sit somewhere in the same group but in Atomic Design they are split based on their complexity. It would make more sense to organise components into groups based on their functionality.<\/p>\n\n\n\n

\"Atomic<\/figure>\n\n\n\n

At Bridge Studio we encountered this problem when creating a design system from scratch for one of our clients. Atomic Design was actually a useful frame work to use when creating the components. We started with the smallest components then worked our way up to combining them to create more complicated molecules and organisms. However, halfway through this we realised it's flaw. We decided to finish creating the components in this manner and then reorganised them in a more logical way after. <\/p>\n\n\n\n

Our design system<\/h2>\n\n\n\n

This is how we organised our design system for our fintech clients.<\/p>\n\n\n\n

Foundation<\/strong><\/h3>\n\n\n\n

This is the core of our design system and will effect everything going forward. It contains the following elements:<\/p>\n\n\n\n