Learning the theory behind Atomic Design is exciting, it’s all so simple make atoms for your design once and use it across your interface. But, when it comes to implementing the theory into your design files all of it can feel a bit overwhelming. Take it for me it took me weeks before I finally tailored a formula that works for the interfaces I built.
Since this is a method that I have been using for only a few months, thus it is not a time-tested formula so there might be some changes to my approach in the future. However, I feel this might be a good starting point for anyone looking to systemise their design process.
So, let's get started:
1. Dividing my Files into Pages
Figma provides us with an infinite canvas thus this step is not quite necessary but I prefer to keep my design assets on a different page than my actual designs. Doing this allows me to easily navigate back to the components without having to scroll and pan a humongous page in order to find a component that I want.
2. Setting up atoms
a. Colour
Colour sets up the mood and brand tone of the interface you are trying to design and would require a lot of consideration beforehand. But, once you have done your part of the research and know what colours suit the most for your brand or application, you are ready to make colour components.
Here are a few colours that you need:
a. Primary Colour- This colour is basically your brand colour and is the most dominant colour of your UI. This colour can be used in CTA buttons, headings and backgrounds. Pro tip: Try not to overdo it.
b. Secondary Colour- Take this colour as the accent colour to your design that compliments as well as balances your primary colour. You can also use this to draw attention to components.
Many suggest using a third colour for your interface, but I usually stop at 2 while picking out aesthetic colours for the interface design.
Let us say these two are your Primary and secondary colours.
We are still going, we need more colours. Namely, base colour- dark and light and status colour- success, error and warning.
a. Surface Colour: Sure, you can use a white surface or a black to design your UI, but that doesn’t allow you to have a sense of depth in your design. I suggest you use a colour that has the same hue as your Primary Colour.
b. Text Colour: If your surface is dark you need your text colour to be light and vice versa.
There are a lot of ways to choose these colours but that exceeds the scope of this article, so instead here are a few tools that I use to take inspiration.
For the next step, you need to go read colour theory, have 5 plus years of experience in Graphics design and have a colour wheel readily available on your desk. Or, you can use the Foundation Colour plugin to generate a colour system in minutes.
I usually use Material to generate a colour palette for my primary and secondary colours.
And for the base colour, I use the Orbit design system.
Feel free to play around with the plugin till you find a system or combination of systems that work for you.
Once you are happy with the colour palette click on “Create Style” and also “Create Palette”. Creating a palette will help you better document your design system.
b. Typography
Typography like colour sets the tone of the interface being designed. While this might not be obvious at first but typography has a huge impact on how a digital product is perceived by users.
So, one of the first steps for the setting of a typographic system is to find the right font or pair of fonts (obviously). Again there is a world of tips, articles and videos you can skim through before getting your typography right, but for the scope of this article here are a few tips that can get you going:
- Be clear on what your target audience is going to look like.
- Try finding fonts that match the message you are trying to send. Pro tip: Use your CTA or tagline in Google Fonts itself to test out the fonts.
- Don’t go overboard with it stick with two typefaces at max and have few weight values to play around with
Once you have your fonts locked and loaded you are ready to systemize your typography.
A way to make your job easier while making a design system of your own is to see the guidelines of other design systems. I did the same and here is one of the many things I learnt from Material Design System: Be aware of what device you are building your interface for while setting up your base font size.
Say you are designing for a mobile device, it is suggested that you don’t go below 14 pt as it is difficult to read. I thus use 16 pt as my base size and try not to go below 14 pt, but during desperate times I have used 12 pt as well.
Now that you have your fonts and base size ready now you need to fix a scaling factor.
A scaling factor is a number with which the base size is multiplied or divided so as to create uniformly scaled font sizes.
Here are a few scale factors that have been used:
- Golden Ratio (1.618)
- Major Third (1.25)
- Perfect fifth (1.5) and more
Most of the scale factors used for typography are borrowed from musical notes and why- the answer to this question I don’t know. So, please comment below if you happen to know the answer.
I am going to go with a Material design system with the scale factor- Major third.
Now we whip out a calculator and start calculating or we use type scale to find the values.
Once we have scaled for the value we are going to need a type scale set up for the following conditions:
- Headline 1
- Headline 2
- Headline 3
- Headline 4
- Subtitle 1
- Subtitle 2
- Body text 1
- Body Text 2
- Button Text
- Label
- Caption
and a few more specific to the interface.
Here is a typography sheet that I use.
Once all of this is set, we turn each of it to style in Figma.
Then we are done with typography.
c. Iconography
I will be honest here, I have not made an icon set yet. This doesn’t mean the interfaces I design go without an icon. I do need icons and here are a few icon sets that I have grown to like over time.
- Iconsax (Can’t beat this one)
- https://icons.getbootstrap.com/
- https://css.gg/
Get a Figma file of the icon set and frame it together.
and select all icons and turn them into individual components.
Framing all the icons together in a singular frame enables us to swap instances of icons with other icons later.
These are some of the major atoms that need to be fixed before moving forward with the design system.
Apart from these, there are grids, depth and effects that need to be treated as an atom. However, for the sake of my sanity as well as developers, I have actually incorporated grids the same as that of material design. To do that all that needs to be done is to place the material design community file in the same team project as the design file and publish the component.
Shadow is particular to each interface so I usually see which one looks visually pleasing to me.
I have also created a file with all the atoms we talked about in this article. You can find it in the following link:
This is a work in progress and I will add more atoms, molecules and organisms as I keep exploring the topic alongside each published article.
Do let me know if you have any feedback and/or suggestions.
Happy Designing.