Below is a 2022 version of ARM's Design System. We worked in a team of two designers to manage this system with over 100+ screens. My role was to lead and create the Design System as the primary Visual UI Designer. I assigned and followed up with the subcontracted UI Designer as we split the work according to time. **Please note that the Design System will continuously be evolving.

ARM's Figma Design System needed to be easily maintained for 100+ screens across current and future teams (in consideration for scaling ARM).

We applied the Atomic Design Methodology (ebook link by Brad Frost) with Figma's components, auto layout, and definitions.

Goals/Requirements: By utilizing the methodology as a guide, we would have a more cohesive and universal language of the system. • Consistent • Understandable to teams • Easier translation to code

The Atomic Design Methodology helps build Design Systems from atoms, molecules, organisms, templates, and pages. I applied my understanding of this methodology to ARM's Design System.

When initially constructing the Design System, I first defined the elements in Figma such as typography and colors from a style guide I had created back in 2019-2020.

Below is an example of a molecule design: a search bar. The atoms that make up the molecule are the following: search icon, label, and background container.

The organism is the search navigation bar that consists of molecules such as the search bar and buttons.

The template is the table with fillable rows and columns, to hold data.

The page is on the macro level of the system, which can be edited and reused across different ARM modules.

Applying the Atomic Design Methodology enables a more cohesive and universal system so that cross-functional teams can speak in a universal design language from design, development, branding, and to users.

I learned a lot and I am continuing to learn more about this methodology in detail while updating ARM's Design System. I shared the methodology with the ARM team. And I plan to learn a lot more through understanding and application.