Brief

Client:

Big Meal Share

Role:

Designer

Date:

December 2022

Design an Atomic Design System so that all Digital Assets for Big Meal Share maintain visual consistency.

Objectives

Appropriate use figma components to represent Atoms, Molecules, Organisms, Templates & Pages.
Coherent heading progressions.
A unified color palate.
Determine which components should be used in Webflow.

Tools

Figma

Process

Step 1

Design System Research

As my previous role as UX Lead for 345 Global I was responsible for implementing a company wide design system in 2021. Since then the landscape has changed slightly so I went about researching more Atomic Design Systems structures, and also found a variety of Figma files to use as inpiration.

Step 2

Atoms

Because I had already created a basic version of the BMS WebApp and Landing Page I had a rough Idea of which icons would be important to include. Using the Iconify Plug-in I chose a variety of icons to include. One problem I faced was that most icons were of a different weight, so I had to re-create them using lines in Figma to achieve visual consistency.

Step 3

Molecules

Creating molecules from the existing Atoms was the next step. This helps determine which Atoms might be missing. Fortunately Webflow now allows nested components so Atoms can be embedded inside molecules in the developer environment as well as the design environment.

Step 4

Components

With the Atoms and Molecules assembled, now came components. From my UX background I knew that there would be significant changes regarding the layout so was careful to only create the components which would be necessary for the MVP. After testing with users I would be able to go back and makes necessary changes.

Outcome

Summary

Overall this was a great project to improve my Figma design and Webflow development skills. I learnt a lot about the Client-First framework and will definitely use this more going forward, however the Fligma to Webflow plugin seemed to be more of a burden than benifit.

Learnings

Finsweet Client-First takes time to learn, but once understood it's makes development much more unified and improves visual consistency.
The Figma to Webflow plug-in uses the figma frame name as the webflow class, unless two frames have the exact same properties, in which case it will repeat the class name.
Figma to Webflow plug-in can be useful in some cases, but with the Client-first framwork I found that this plug-in slowed down my workflow.

Atomic Design System