Contact

Design system / Atomic design

Deliverable

A dynamic component library that acts as a reference for designers and developers

The design system exhaustively describes the visual components of the product being built (typography, colours, element sizes, element states such as hover, focus, clicked, and so on). It can be seen as a component library. This kit is meant to evolve as new needs and features come up. The design system makes the work between designers and developers smoother, since both teams share a common, shareable reference. From the user's perspective, this kit keeps your platform or service coherent overall, and that supports a better experience. Be careful though: the design system requires every existing component to be catalogued and properly organised. If it's done poorly, it can lead to duplicates and you'll quickly lose consistency.

See our design system offer

What is a design system / atomic design for?

  • Giving interface components the same names in Figma and in the code
  • Reusing an existing component instead of drawing a new variant for every screen
  • Spotting duplicates in an interface that has grown: two buttons for the same action, three almost identical cards
  • Changing an element in one place, such as a colour or border radius, and propagating it everywhere the atom is used
  • Documenting a component once, with its variants and usage rules, instead of answering the same question for every project

Why build a design system / atomic design?

  • When to create a design system
  • If you notice an overall consistency issue across your site or product
  • When you decide to build a service with many elements and pages
  • To create a basis for discussion and shared work between your developers and designers
  • To evolve your site faster and get it tested

Where does atomic design come from?

For a long time, designing an interface meant drawing pages based on the print model. Screens have multiplied, from watches to wall projections, and a fixed page no longer holds up: interfaces are now conceived as assemblies of components.

Brad Frost formalised this logic in 2013 under the name atomic design, borrowing its vocabulary from chemistry. An interface is broken down into five levels, from atoms to pages, each assembled from the previous level. The value of the method lies less in the breakdown than in the shared vocabulary it creates: when a designer and a developer say “molecule”, they mean the same thing, and that thing exists on both sides, as a component in Figma and a component in the codebase.

How to build a design system

From an atomic-design perspective, the kit is made up of several levels:

01

Atoms

individual elements. For example: an image template, a button, an icon.

02

Molecules

made up of atoms that form a whole. For example: a navigation menu is a molecule, built from atoms like the logo, a button, the various links, and so on.

03

Organisms

made up of molecules. They correspond to groups of blocks.

04

Templates

templates that represent the overall structure of the page (but without the final content). Then pages, holding all the final elements (along with text and images).

En pratique

Your design system should also include a style guide. It picks up the visual style guide (colours, typefaces, logos and so on) along with the usage rules for each element. For instance, knowing when red should be used, when typeface #1 should be used, and so on. Before starting this work, prioritise the elements that recur most across your product, such as buttons or navigation elements (menu, footer). Once your base is solid and properly built, you can move on to variations and other elements. Remember to test your “parent components” (the main one, used as the model) before building “child components” (variations of the main one).

Still with a view to improving communication and work between developers and designers, it’s important to name your components properly. Each element should be named in lowercase, with words separated by hyphens. This convention gives developers elements that are easy to implement. Start with the letter representing the atomic-design level (a for atom, m for molecule, o for organism, and so on), then the type of element and its variations.

Example for your primary button: a-btn-primary. Be careful to name components based on their function, not on their form (colour, shape, visual style). Don’t forget that your style guide will evolve. Example to avoid: a-btn-red.

Frequently asked questions

Example of design system / atomic design 1 of 7

A few of our case studies

Related methods

Visual style guide

The visual style guide brings together a brand's visual rules: colours, typefaces and logo, along with the permitted or prohibited uses for each.

Read more about Visual style guide

Design Kit

The design kit, or UI kit, brings together a product's components in a design file: buttons, forms, cards, navigation, icons.

Read more about Design Kit

Information architecture

Information architecture organises content and navigation so that users find what they're looking for. It guides interface design

Read more about Information architecture

Interface design

UI design shapes the visual layer of a product: layout, colours, typography, components. It turns the experience into tangible elements.

Read more about Interface design

Curious to learn more about us?

Everyone talks about user experience, service design, ergonomics...
It's not always clear, and you'd like to find out, or sharpen what you already know.

Let's talk