Final Major Project Interactive Media Practice MA – Westminster University

Project Deliverables:

  1. Industry feedback and evidence of feed-forward mechanism within the project.
  2. Student blog with relevant project activity. Every student must maintain this pertinent to the project.
  3. Interface inventory
  4. Design Systems (Atomic Design)
  5. Figma File
  6. Video Demonstration
  7. Documentation related to the components

I am building a design system for a pharmaceutical company. The design system is to be used for digital intervention between the company and its internal and external stakeholders, in order to speed up the development process for future projects.

During the research process, I received permission from the company to use Figma as a tool and Atomic Design as a framework. Prior to starting, I outlined all the advantages to using a design system with the Atomic Design methodology and principles.

The outcome is a Figma document with a basic design system following the atomic design principles, along with a style guide containing live code snippets to copy and documentation on how to integrate the design system.

My team’s goal is to establish a design system for digital products.

Design systems provide consistency and considerably speed up the web development process. 

We also want to create a learnable experience for our users via visual repetition.


The main objectives are:

  • Deciding which prototyping tool to use
  • Testing the tool in a project
  • Identify our main beneficiaries
  • Research on how to build a design system
  • Research the benefits of a design system
  • Adding implementation documentation to our style guide
  • Analysis of financial costs
May 24, 2021
Design System
Atomic Design by Brad Frost

Brad Frost refers in his book to Pattern Lab, they use the include feature of Mustache, a logicless templating language. I don't want to use Mustache because I agreed with my client to Build a Design System with Figma. I think that is OK. Most important is to use a long-living tool. The launch of Figma was at the same time, 2018 when Brad Frost wrote his book. Maybe he would prefer Figma if he knew how successful it is in the design community now.

May 25, 2021
Design System
Building Design Systems

Today I have finished reading the book "Building Design Systems" by Sarah Vesselov and Taurie Davies.

I learned a lot about all the steps to implement a Design System. Therefore I have got some elements already from the style guide I developed at the beginning of the year: typography and colors for example. 

A good start will be an interface inventory.

My painpoint at the moment is: How to implement code for the components.

May 31, 2021
Design System
A design system isn’t just for summer, it’s for life.

I enjoyed last week the webinar with The Bio Agency. I have got fantastic insights on how to set up a design system with Atomic Design using Figma. Hopefully, they provide a video from their event.

Juni 18, 2021
Design System
Build it in Figma: Design Systems

I watched all 5 Figma Community Videos on Youtube:

This was very helpful.

I think I will dig a bit deeper into Typography and spaces. I found out it's better for line space to use a percentage instead of hardcode it in pt.

July 4, 2021
Design System
Buttons vs Links

During my work at the inventory, a question came up to me: “What is the difference between a button and a link?”

I have done some research and found out there is a lot of confusion about this issue. And this confusion often begins with Design and UX. A design comp comes with boxy interface buttons, and they have to be coded as links. 


The solution is to Push back on Design to make links look like links and buttons look like buttons. 

The starkest difference between a link and a button is that a link navigates the user to a new resource. A button toggles something in the interface, like a video player; or triggers new content in that same context, like a popup menu.

July 4, 2021
Design System

I Finished the inventory. 

I got snippets from following webpages: (old & new) (old & new)

I think I have a good start for my “Atoms” now.

July 7, 2021
Design System
Spacer in Atomic Design

For a while, I was wondering how to use spacers in Atomic design.

I found the answer in an article from Lennon Cheng

A spacer is a transparent box with your color of choice and a label telling you what’s the pixel value of the vertical or horizontal space.

There is a hierarchy in your design. There also could be one in your spacers. For example, the spacers you created for an Atom need to be distinguished from the spacers for a Molecule. We can differentiate spacers by assigning them different roles by using colours.

July 13, 2021
Design System
Is a button "Atom" or "Molecule"?

A lot of designers label wrongly buttons as „molecules“ because they think you can break them down further in color and typography.

But Brad Frost says: „If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.“

July 25, 2021
Design System
My Figma File is ready to use

My Figma file is ready to use with the most useful and important components. It will never be "done". A design system is a living system and follows an agile approach with permanent iteration and growth. 

Atoms: UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
Molecules: collections of atoms that form relatively simple UI components.
Organisms: relatively complex components that form discrete sections of an interface.
Templates: these place components within a layout and demonstrate the design’s underlying content structure.
Pages: these apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.

Critical Analysis