How to implement “Atomic Design” in your current project

Now, if you read my previous post about what is Atomic Design and the basics of it, you might be wondering… “This is awesome but how I implement that on my current project with 30+ screens?”, here I will try to explain how I did it.

1: Notice the common patterns on your design, look for the basics

We will target here the basics, “The Atoms” in our screens. What I did was looking for small and common things like colors, buttons, and fonts. What I end up was with a folder full of buttons, like login, register, submit, and how and where use the yellow, red, blue.

2: Change the atoms that don’t match

I figure out that there was a couple of fonts and buttons that where not matching the design system so I change them to match, you might not do this because you already did it creating that screen… It was my fault for not paying attention or not using any design system… Yeah, my bad.

3: Define your “Molecules” so they can match in the entire project

Now you have your basic atoms define and ready, where do you put them?. Let’s imagine the more basic example, the contact form of your website/app/project. What does it have? A name, email, and message input with a submit button? Do you have another input in your website/app/project? See where I’m going? Make one component, use the atoms and create that beautiful molecule so when you need to add another contact form, you will have something that already matches the brand identity.

4: Now let’s make those “Organisms” look great again!

Do you have some product listing? That’s an organism, a footer also, so try to create a uniform container, something like the header, the hero container (or you can call it content), and then the footer. When you have that, now you can have the next thing.

5: “Templates & Pages” for all

Using all the organisms together, you can have a template, with a template you have a page, and if you look close you will see the similarity between all your screens!.

Now, you have turned your normal project into an “Atomic Design project” but why? Why did I do that?. Now if you want to change something in your project you just need to change the atoms, or maybe the molecules but it will change in your hole project! That makes it easy for you to change faster and efficiently, also when a new designer comes to the project will be a lot easier and faster to catch up and start working fast.

I know Atomic Design is one way of looking at Design and Component Systems and if you think about it, but this way of naming the components, naming the way of work and unifying how we see our screens, so when we create new we don’t have to create them by 0 or creating different layouts for each page disrupting the brand identity.