Feb 16, 2017 posted by Bas van Os van… - Designer

Read time: 6 minutes. Interesting for (UX, UI and Visual) designers and front-end developers.

In this blog I will talk about the benefits of using an Atomic design based component library. If you are not familiar with Atomic design by Brad Frost, I recommend to read the blog by Frank about the Advantages of using Atomic Design at Open Social. In this blog I use concepts such as elements and components. For example; an element is a button (Atom). A component is a complete part of the software or website, an example of this is a footer or teaser (Molecule or Organism).


A component library

A component library is a cloud based folder that consist of all the designed/styled parts of a website or piece of software. It helps a designer to work in a consistent way and becomes very time efficient, when executed correctly.

A component library is structured in the same way as front-end developer would theme a website. The component library exist of atoms, molecules and organisms. If we need to design a full page, we pick the components from the library. It’s like a puzzle, all the parts are there, as a designer you need the combine them.


Obviously; instead of only combining parts the designer is also able to customize parts or create new parts. You don’t lose creativity by using a component library. It is true, however, that you trade a bit of freedom for consistency and speed.

Example of text styles in the component library.
Example of text styles in the component library.

Six advantages of using a component library


1 - Collaborate efficiently
Working with a component library helps your designers work as a team on designs. Besides improving collaboration between UX, UI and visual designers it will improve the collaboration with front-end development.  If a designer needs to design new components it will start by checking the library and gathering all the elements he or she needs for creating a new component. If there are elements missing because they are new, the only thing the designer needs to design are the new elements. And then combine everything with the new element and the new component is there! If front-end integrated the library into their workflows as well, the process of implementing will start right after the designer adds the components to the library.


2 - Staying consistent

A huge risk in designing software, website or products with multiple designers is consistency. If multiple designers work on a product and there are no libraries or strict guidelines, the design will become inconsistent: 100% guaranteed :)

For example; if you use the a primary button it should always look the same to keep the usability as high as possible. Other designers will let their creativity decide how a button will look if you don’t work with a library. Instead of using the same button for a similar interaction there will be multiple designs for just one button. We most often see this happening at the start of projects, but after a while it is critical to even this out and create consistent styles.


3 - Extending the library is fun!

Extending the library is fun and easy! To set up a library is the hardest part because you need to start from scratch. Extending is fun because it works easy and fast and all the basic elements are already there. So you don’t need to decide which font you are going to use or how a button should look. As a designer you only need to focus on the elements that are  new. Designing the part thats makes the puzzle complete and perfect.  

Example of creating a new component.
Example of creating a new component.

4 - Customisation & flexibility

When you are customizing a design you don’t want to rediscover the design if the structure is already there. It will cost a lot of time for a designer and it also will have a huge impact on development. For Open social we are always searching for simple and effective design solutions that have a huge impact on the look and feel but don’t have a negative impact on the interaction design.  


A component library helps designers to stick to the guidelines of your product and it has less impact on development. Instead of recreating components you are reusing components. Easy customisation will help designers to be more flexible. For example: If the client is not happy with the new button style, a designer can change the master button style in the component library. This will affect all the buttons that are synced with the library. A designer can spend more time on thinking and designing the new button, instead of designing the button and spend a lot of time on replacing all the buttons with the new style :)


5 - Improving on designs with iterations
Designing a product or website  is also about improving designs, at a certain point the main elements exist and you can focus on improving the readability and usability. Improving doesn’t always mean reinventing a functionality but often it means iterating on small things to make it better. This could be the use or omission of color and creating more distinction in an element. Small details that have an impact on multiple components can be big improvements overall.  A huge advantage of using a library is that improving a design or a specific element will affect all previous made designs, so everything is always up to date.  


6 - Sketch app & Craft Library
To set up a cloud based component library you can use different tools, at Open social we use Sketch app and the craft plug-in. We’re using Sketch app to create hi fidelity component designs and craft for syncing and categorizing all the elements. In Sketch we create and maintain/improve font styles, colors, layer styles and all the elements. For every element we create a symbol.  In Sketch a symbol is some kind of master style of a certain element, if you change the style of the symbol it will be change everywhere. The symbols can easily be synced with Craft Library, so it will change in all the files (if you want) where you are using this element.

Changes  element and sync it with the library.
Changes  element and sync it with the library.


Using a component library will improve consistency and let designers work together. Design uses the same workflow as front-end development which increases collaboration and efficiency. For a designer it’s easier to create iterations with small changes, create new components and always work with files that are up to date.

We already use these methods to keep consistent and work together on our software with great success. Our next step is opening up our design libraries so others can collaborate as well on our designs.

Contributing to Open Social or Drupal

So how to go about contributing to Open Social and/or Drupal in general? For Open Social a good starting point is the Github Wiki. If you want a starting point for helping Drupal to grow you can find many different ways on the 'ways to get involved'-page on Drupal.org.

Don't miss our blogs

Mar 21, 2017 posted by Frank Graave

Progressive Web Apps

Mar 09, 2017 posted by Mieke Weismann

Open Social says hello to the Drupal Community