Creating Design system & Hero section with Figma | Low-fi to Hi-fi Prototype | #19

Posted on

September 30, 2023

Creating Design system & Hero section with Figma | Low-fi to Hi-fi Prototype | #19 | Urdu / Hindi

Learn how to create a Design system of colors and typography for any project and further more create banner and navigation area with Figma, a popular design tool for web and mobile interfaces. This video tutorial will cover the basics of using Figma to create a simple banner and navigation bar, as well as more advanced techniques for creating more complex layouts.

We will cover topics such as:
00:00 – Introduction to Video.
02:36 – Recap of Previous Video.
04:20 – Add Pages into Figma.
07:42 – Loading or Splash Screen Design in Figma.
07:46 – Why are we using Loading Animations on the Website.
12:04 – Design Homepage in Figma.
12:33 – How to Turn Off Desktop Grids in Figma.
14:19 – How to Create Colors Design Systems in Figma.
15:18 – How to save bulk Colors in the Library through Figma.
16:48 – Typography Design System in Figma.
21:55 – Add Hero Image in Prototype.
25:03 – Add Gradient to Hero Section.
28:58 – Design Navigation in Figma Design.
29:49 – How to Create A Component in Figma Design.
32:58 – What is UX writing???
34:27 – Creating Glass Effects in Navigation Bar.
36:06 – Add Icons in UI Design with Figma.
39:00 – Fixed Header in Figma Design.