Introduction To Atomic Design

In this blog Donata, a UX Designer here at Newicon, explores the idea of Atomic Design. Read the blog to find out what it is and how to get started with it.

Donata Lesiak UX Designer
·3 min read (712 words)
Design system components displayed on the monitor screen

If you read our previous post, you should know already what a design system is and how it can benefit your business. Within this article, we will explain the modular approach used as the foundation of many design systems – atomic design.

Atomic design – what is it?

Atomic design is a methodology for creating design systems and final products. It consists of atoms, molecules, organisms, templates, and finally pages. Flashback to chemistry lectures? Hm, sort of! It’s not as complicated as it may sound though, some people like to compare this approach to Lego blocks.


Atoms are the smallest, basic, universal building blocks that can be used to build molecules at a later stage. You can think of them as HTML elements, but atoms can also include foundation elements like colour palettes, fonts, styling or animations.

YSUeDqyFV-HXgKaUqB3KYCeLDAAPhMZo84TsTpCwN9jupZLtYgxiWBg_O39szDLwbQFVr0MHNWnc3vWLIzM-6ConOuvlUcmcHVEC3ObSaKdI-Xvlz_mw3FBTDkq7IoKy1I2V4WJN

Molecules, like mentioned above, are atoms put together into fundamental units – components that can work on their own.

 

G6si4QTohDlT0sHQYSqKTvFJEX8DgWXsEqf42STn-UYQ_-8-HIiJasrikl3J-BoXfFrLGyXlMspLll06vQstGuS75XR5ee9vq2Vzmx8kBmmMRb_3SG1o7JpSqgQ55QikT4HdcCye


 

Organisms are grouped molecules forming together a distinct section of an interface. They are complex components or sections that can be reused across the whole system.

xjfmwNkA-NLDB4bAaTptT02uhD4b_s3yPtU608vD4FNVlg554rDuQ0b4KTMmxLu2JKGF1bM4jrz4bfbMJv7ckL0xPwA92Tquot6YGFdrMT6Yv2J2wecZtUlNrM73kq9g9G4b25fm

Templates are usually a combination of molecules and organisms together forming whole pages without content – sort of like wireframes. Templates can inform about the layout and the general feel of the product in action.

Pages come together when placeholders from templates are replaced with desired images, content etc. forming high fidelity design representation.

 

Benefits of atomic design

 

Generally, the main benefits of the atomic design are the same as that of a design system. It makes elements accessible to the team and reusable across a brand's multiple products keeping them consistent and on-brand. But atomic design also helps teams to create or innovate efficiently and at pace, with the ability to focus on the user's pain points and improvement of the user experience.  The biggest advantage of the atomic design is adaptability to change – like when a client wants to make significant changes in the product — such as a typeface. Without atomic design, each component would need to be changed manually, really slowing down the progress; with it, it’s a matter of a click (well, if done correctly!)

 

How to get started with atomic design

 

You should start building your system from atoms, then progress with the UI design. However, there is no “one fits all approach”, there are no boxes to be ticked along the way. For example, if you already designed the product and only now decided to build a design system you can take a step back and review all of your components. Cut out all components, look for common patterns, define atoms, molecules, organisms and change the ones that don’t match.

Moreover, there are no strict guidelines on how elements should be organised, if you feel like a button fits under molecules, not atoms, that’s completely fine. The system needs to be functional for the people using it. This is why it’s important to speak to them and discuss their needs and vision at first.

But what is essential to keep in mind is that when we truly design with atomic, the same component is going to be reused in very different contexts. All elements should be generic (a 'list' rather than a 'contact list') and use consistent, clear naming that reflect the element and its variant/property e.g., atom/colour/blue/90 or atom/button/primary/active.

One of the great tools you can use to start building the design system is Figma, the super-powerful design and prototyping tool that we at Newicon have been using for a while now. Features that Figma offers are helpful in creating reusable elements that can be shared with the whole team within the workspace library.

Here are some of the features:

 

bFpw9HDp-5LWW_Qv74V23B0Wu1E5o33IDEjidSnNh8nG3GHZpNVvoupWLk1emsvItQVAirZXEoE7vp_8iZnSAwOxzdNT9AHfqRGRegZRHgGJWtBLu2Rx0mXw_ggjU91PvQEI2HbZ

 

 

 

ZkDOqMPSXf8-KFK-95_G3B3erKlZlZHRU-xKAFjKiLMobJxzEuIKeUu-YcyIoCofPCTUpl7yFRO_yYXPeTqU5XytzeSHWaCJGp5z02joeh3SFjT7f9tzqj-pinI2Tt0Ql6utevGq


 

 

 

gN4FX5va4rfoV8obH01P9oT9pT1jYQ5-TiCvgqOtvBlVMgFn7qvRASlTAWyrR9YFg5zS2VFmI5haKr2g9ocFwIsC0OdtmMQhRx9tu-BKPKltHhS2FV5Kb8nx9D3qUhfzQKOVGwGT

 

sizapnTG9vsu5AyijiTXIkfxb3N-fKLTtxtPjgzoRLIxEtzV9gTJ3tZ0pUo8UXCfCyd4C3vW0YNOG8VV5ygwJd8dVbr7_RmnLg9f9MgtflyaDLK8WyQG19qHy27crN7Pny26qrdU


 

In summary, treat atomic design as a mental model that helps you think of a user interface as both a cohesive whole and a collection of parts at the same time. And don't worry, there is always a place for creativity and design iterations!


Do you want to build your project with an atomic approach? Find out how Newicon can help you implement it and build a comprehensive design system - contact us today.


Donata Lesiak UX Designer at Newicon

Join the newsletter

Subscribe to get our best content. No spam, ever. Unsubscribe at any time.

Get in touch

Send us a message for more information about how we can help you