Atoma
Atoma is a Design System for Sketch that helps you to build amazing users experiences…really fast.
Atoma is a Design System for Sketch that helps you to build amazing users experiences…really fast.
Team
With Eliot Besson
Role
Lead designer
Need
Designing a scalable design system for StudioLabs and many other companies to optimize their daily productivity.
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 ?
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
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
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
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
The application allows you to have your vehicle cleaned when you want and where you want.
