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.

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.

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.

I watched all 5 Figma Community Videos on Youtube: https://www.figma.com/community/file/867135839870202854

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.

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.

I Finished the inventory. 

I got snippets from following webpages:

www.besins-healthcare.de (old & new)

www.hormonspezialisten.de

www.mannvital.de

www.progesteron.de (old & new)

www.sicher-verhueten.de

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

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

I found the answer in an article from Lennon Cheng

https://uxdesign.cc/handing-over-design-with-spacers-in-figma-6c5bfd76a6d5

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.

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.“

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.