‍

We love Atomic Design as a methodology for almost everything we build: client projects, website designs, style guides, marketing collateral, etc.

A huge benefit of using Atomic Design for our Google Display ads is that it allows marketing professionals to A/B test and optimize ads independently from a designer. Although it requires more hours up front to set up, it pays off in the long run.

‍

What is Atomic Design?

Atomic Design is a methodology inspired by chemistry created by Brad Frost. Just as all matter is made out of atoms that combine to form molecules, which in turn make up more complex organisms; Atomic Design involves breaking an interface down into its basic components and then working up from there to create a cohesive design system.

The basic idea is to separate and organize each design element and build more complex layouts using smaller parts. Design systems are often modeled after object oriented programming principles. As designers we want structure but also flexibility in the creative process. Atomic design principles are most commonly utilized to create user interfaces and websites, but they can be applied to other design projects as well.

‍

Project Goals

• Create a system that can quickly generate different variations of Google Display ads in multiple sizes.

• Enable a marketing professional to change content, colors, backgrounds, buttons and other visual elements with ease, even if they aren’t as well-versed in design systems or Figma, while keeping the designs within a set parameter.

‍

Step 1: Atoms/Molecules

Figma is a great design tool for creating design systems of any kind. Designers can create and utilize components and streamline the process.

Atoms and molecules were created by breaking down elements required to create a successful ad. This includes ad sizes, overlays, background image fills, colors, buttons, text styles and company logos.

‍

Ad Sizes and Overlays

Ad sizes and overlays were created for the most commonly used Google Display ad dimensions.

‍

Buttons, Logos, and Text Styles

It was challenging creating buttons, logos and text styles that fit all display ad sizes. This process required quite a bit of testing and refining of each element.

‍

Background Images

The background images are saved as a fill so they automatically adjust to the size of the display ad.

‍

Step 2: Organisms

Creating display ads doesn’t require us to go further than organisms, since we are not creating an interface with more complexity.

This is where the power of Figma and plugins can be utilized. We wanted the users (marketing professionals) to operate with ease.

Each ad size has custom constraints for text and buttons using auto layout. This is a great way to give users feedback on how much content can fit on each ad. Content that goes outside the constraint will be clipped.

‍

Step 3: Plugins

Two Figma plugins are used to give users creative freedom with ease.

Find and Replace plugin

This allows the user to look for text and replace copy on all ads at once.

‍

Select Layers plugin

This allows the user to replace layer styles such as buttons, logos, and text styles. Each ad component follows the same naming convention, therefore the user can mass select layers to edit.

‍

Step 4: Publish Library and Train Users

Once the design process was finished, it was published as a library that can be accessed by other users. It’s important to lock the source file in order to avoid the user creating changes in the system. The next step is to train the user on how to use the library, plugins, and how to export the finished ads.

‍

Step 5: Design Starter File

A separate file was created using a few ideal combinations of visual elements while allowing the user to change specific elements, like text, logo or buttons. This is a great way to showcase what visual elements go well together and it gives the user something concrete to start with.

‍

Closing Remarks

The last step in building a design system for Google Display ads was to test out the system. The results? Our marketing team was able to create and export four versions of ads to A/B test in less than 30 minutes. This type of testing can provide a strong basis for growth design or data-driven design, therefore a system that supports these goals can be incredibly valuable. The marketing team can also optimize ads independently from a designer. As the data comes in through Google Analytics, the team is able to change minor and major elements quickly and easily.