Wireframing Essentials in Figma | # 14 | Urdu / Hindi
Learn how to create wireframes in Figma, a powerful design tool. Wireframes are a great way to visualize your website or app design before you start coding. In this video, I will show you how to create a simple wireframe in Figma, covering all of the basics.
By the end of this video, you will know how to create wireframes in Figma and have a better understanding of what wireframes are and why they are important.
💎Topics in this Video:
00:00 – Introduction of Video.
02:45 – Basics of Wireframing.
03:16 – Creating a New Figma file.
04:25 – Understanding Frame Size for Web Design.
05:34 – Take Frame Sizein Figma.
07:04 – Rename Frames in Figma.
07:18 – What is Wireframe?
09:30 – Creating Loading Screen – Wireframe.
10:48 – Set Web Layout Grids in Figma.
12:43 – Understanding Fluid Layout or Full Screen Layout.
14:35 – Save Grid Layout into Library.
16:44 – How to Layout Header’s Wireframe.
20:25 – How to Save Color Variants in Library.
23:27 – How to Layout Hero Section’s Wireframe.
23:31 – What is Hero Section?
25:46 – How to Layout Content Area Section?
27:28 – Competitor Analysis for Layout Design.
31:33 – Stacking in Figma.
33:10 – Creating Blog Section – Wireframe.
33:52 – Creating Footer Section – Wireframe.
More Links
✨Adobe XD Playlist
https://www.youtube.com/playlist?list=PLspW40rZgNelVnl3o0izoM8E78N0jNHx1
✨UI & UX Design Playlist
https://www.youtube.com/playlist?list=PLspW40rZgNemcESvd7g9mz8gldTKTLy-d
Follow us for more design tutorials, tips, and inspiration:
YouTube: https://bit.ly/3afex5a
Facebook: https://bit.ly/2kEvEaL
Instagram: https://bit.ly/31vRyOB
Pinterest: https://bit.ly/2kebaFG
#AdvancedTypography #CreativeTextDesigns #FigmaTutorial #TypographyInDesign #GraphicDesign #DesignInspiration #UIUXDesign #DesignTutorial
