1.
Using Atomic Design
to Make Your Site Manageable
and Adaptable
Tassos Koutlas - UK Technical Director, FFW
Rob Fitzgibbon - UX Manager, Acquia

2.
ffwagency.com
Introductions
Rob Fitzgibbon Tassos Koutlas

3.
ffwagency.com
Contents
• Introduction
• Benefits
• How we use it
• How you can use it
• Q/A

4.
ffwagency.com
Introduction to Atomic Design
• Definition
• Origins and history
• Methodology of problem solving

5.
ffwagency.com
Definition
• Atomic design is a methodology to create design systems which is inspired by/borrows
from, the Linnaean system of biological taxonomy and the Atomic Table of Elements
• Just as you can sort living things by size and complexity into
kingdom/order/class/family etc., you can do the same with a design system using
atomic design.
• It’s 5 levels are Atoms/Molecules/Organisms/Templates/Pages
• Consider it an evolution from an “artisan” to a more “industrial” method of design
creation/production

6.
ffwagency.com
Definition
Brad Frost, a web developer from Pittsburgh, PA,
created the concept back in 2013.
He wrote a book, it became popular, he gave
talks, he became popular, etc.
“Create Systems, Not Pages!”
source: http://atomicdesign.bradfrost.com/chapter-1/

7.
ffwagency.com
Benefits of Atomic Design
• Process
• Brand
• Innovation potential
source: https://io9.gizmodo.com/the-
terrifying-age-of-radioactive-toys-for-kids-
1501777693

8.
ffwagency.com
Process Benefits
source: http://hereandnow.legacy.wbur.org/2013/10/16/assembly-line-anniversary

9.
ffwagency.com
Brand Benefits

10.
ffwagency.com
Innovation Potential
• Quicker to deploy
• Faster time to market
• Team collaboration
• Easier coding
• Quicker prototyping
• Fewer components
• Modular
• Agility
• Build, measure, learn

11.
ffwagency.com
How to use Atomic Design
A few steps into it:
1. Design components
2. Use a style guide
3. Integrate with Drupal
4. Align with content
5. Innovate

12.
ffwagency.com
Need to share with the rest of the team
Need components to become code
Need to test and optimise based on devices, viewports
and browsers
Using a style guide

13.
ffwagency.com

14.
ffwagency.com
Library structure for all the patterns.
Deliver front end work faster
Unified experience
Parallelise work with the backend development
Guideposts of atomic design very early in the process.
Test the UX early with real code
Iterate on designs rapidly
Benefits

15.
ffwagency.com
Integrate with Drupal

16.
ffwagency.com
Modern web authoring with Drupal Paragraphs.
Paragraph components map into atomic design patterns.
Data model per component instead of per page.
Specific template per component.
Align with content

17.
ffwagency.com
Produce content structure and see the result when
real content is added
More editing power to end users
Each component can be used to create content and
then piece together to make a fully functional page.
Core components can be defined for a functional
page and extended with more components
Components are not dependent on each other but
instead work together
Benefits

18.
ffwagency.com
Adding components
Components present:
• atoms: text, subtitle, image
• molecule: text with image on the side
As these components are added, they contribute to
the page authoring process
Components are reused in other pieces of content.

19.
ffwagency.com
Adding components
a. Subtitle (atom)
b. Text (atom)
c. Text with image on the side - left position (molecule)
d. Text with image on the side - right position (molecule)
e. Text with image on the side - left position (molecule)

20.
ffwagency.com
Adding components
Vary templates by reusing components in different order.
For extendability, a new component can be easily added
to extend page features.

21.
ffwagency.com
Now that we talked about how atomic design works with content
components, what about editors? Some benefits are:
• Design systems speed up team’s workflow through reusing
already established UI.
• UI components establish a shared vocabulary for editors which
creates more collaboration workflows.
• Create more future-friendly foundation to modify, extend and
improve over time.
• Give editors the flexibility to structure pages (via components)
as they wish and add different features depending on purpose.
Editorial experience

22.
ffwagency.com
Reusable components speed up features and deliverables
Product owners interact with a functioning site at early stages
•Early feedback
•Establish visual direction
•Discard waterfall
Components make it easier to change scope
•A change reflects in all pages used
Product is adaptable and maintainable
•Adapting means better budget control
•Future-proof the implementation
Agile experience

23.
ffwagency.com
• Before you begin
• Design setup
• Technical setup
•Style guide (Pattern Lab)
•Theme (Drupal)
•Components (Paragraphs module)
• Maintenance on the future proofness of design (easy it is to update the
site design)
• Content (think about content in the same way as design)
How You Can Use Atomic Design

24.
ffwagency.com
Technical setup
There are 3 main moving parts:
1.Pattern Lab 2 (uses twig)
2.Theme
3.Content components
Design
Pattern Lab Patterns
TemplatesDrupal theme
Content
components

25.
ffwagency.com
Technical setup - Pattern Lab
Design
Pattern Lab Patterns
TemplatesDrupal theme
Content
components
Browsing the Pattern Lab github repository
there are quite a few options.
We suggest to start with Pattern Lab Twig
Standard Edition for Drupal.
Contains:
• Pattern Lab twig edition
• Data transfer plugin (e.g. use Attributes
class in PL)

26.
ffwagency.com
Technical setup - Theme
To enable a Drupal theme to register templates
outside its root you need a module!
Find Component Libraries. It works by
registering namespaces that twig understands
For example you can do the following:
> {% extends "@organisms/header.twig" %}
Design
Pattern Lab Patterns
TemplatesDrupal theme
Content
components

27.
ffwagency.com
Technical setup - Content
Design
Pattern Lab Patterns
TemplatesDrupal theme
Content
components
Use Paragraphs. Define templates per component using standard Drupal notation (they are entities!)
Include, extend or embed to pull in the pattern templates from PL as well as pairing the vars together.

28.
ffwagency.com
Design maintenance

29.
ffwagency.com
Q/A

30.
Thank You!