We will learn together to design a Dashboard website using Figma. The dashboard that we will create is Responsive, which means that our design will easily adapt to various breakpoints, both Desktop Web and Mobile Web.
In this tutorial we use the Atomic Design Approach method, where the design process starts from the smallest element (Atom) to the largest element (Template/Page). Although it is not written implicitly, this concept is at the heart of making our Dashboard.
We take the inspiration for this Dashboard Design and modify it from the most complete Design System currently in the industry, namely UntitledUI (highly recommended to check). We choose a design that is quite complex and then we breakdown and restructure it for us to make a tutorial from ZERO.
In Chapter 1, we will design the Deposit Card which is one of the six main elements in the Financial Dashboard.
As we go along, we will learn some of the fundamentals in Figma, namely:
-> Create Styles (either Color, Typo, or Shadows)
-> Create Master Components
-> Management Icons
-> Maintaining and Syncing Data with Google Sheets automatically.
