About

I working on building a design system template on Figma that help to ease project creation from the start. The template will start from covering styles, component, templates, and ultimately as a flow.

Example of the high level concept

The concept

Building this also adopt atomic concept with a little iteration, where styles and components are considered as an atom, combining multiple atom will form a molecule considering it as a template, and the end goal each molecule will be combined as one into organism , which in my context is the particular flow .

Start by prepping color tokens using Figma variables. Starting as basic, the naming of color tokens are being grouped into few intent:

1. Background
2. Border
3. Content - (icon and text)

Dialogs are one of the templates prepared, I’ve also prepared a few types of variants to use.

Here’s an example of checkout flow template.