Atoma

Atoma is a Design System for Sketch that helps you to build amazing users experiences…really fast.

About

01

Team

With Eliot Besson

Role

Lead designer

Need

Designing a scalable design system for StudioLabs and many other companies to optimize their daily productivity.

Immersion

Research

02

Even before I started creating my first pixel, I had to learn how to use Sketch and the entire design system universe. Medium articles, YouTube trainings or even whole nights on the tool were the basis of my approach.

My partner and I are the target users of this project. It was an advantage in order to identify all of our needs and to understand our frustration points. We have therefore identified a lot of points such as the need for scalability for all projects, a well-thought-out nomenclature or even thinking about the complex design of each component.

Main targets

designer

As a designer, how can I be productive using Atoma while responding to project issues ?

lead designer

As a lead designer, how can I manage and build quickly a design system adapted to the graphical guidelines of a project ?

developer

As a developer, how can Atoma increase my productivity ? How can I easily convert components into functional code ?

Conceptualization

Co-conception

03.a

In a digital project, we can find many components common to all: buttons, alerts, inputs and many others. At the beginning at StudioLabs, we created a unique symbol library for each new project. We were wasting a lot of time starting from scratch each time. So we made an inventory of all the components needed for a digital project to find them on Atoma and no longer have to create them for each new project.

Knowing all the components to be created allowed us to establish a precise nomenclature. This is a very important step in maintaining clarity in the system design and increasing the productivity expected from the product.

Components list (non-exhaustive)

With their sizes or states

Creation

03.b

The next step was to establish graphic guidelines. To do this, we had to keep in mind our need for scalability on all projects while maintaining consistency in the composition of components. We have therefore created colors typologies: primary, secondary and tertiary as well as those for alerts: success, danger, warning and info.

The guidelines also include the types of text we need: from H1 to H6 through paragraphs and subtitles,…etc. Other elements were added later, such as shadow levels or states.

Graphic guidelines

Implementation

Prototyping

04

That's it, I could finally create my first button, my first input or my first text style. After months of testing, research and concrete applications, we are testing it on many projects such as iZclean and many others! Atoma is therefore constantly updated as a result of these daily tests: more components, optimized layouts and even more scalability !

Test, improve and redo

Components

Showcase

Review

Introspection

05

Basically, I just wanted to know more about the design system’s world. I finally found myself fascinated by it and maintained the product on a daily basis. I could never thank my partners enough for their feedbacks and suggestions, which are always relevant! If Atoma sees the light of day today it is also thanks to them !

thanks to Eliot Besson for his help

Next