Stunning SaaS Website Design In Figma (2023)

Stunning SaaS Website Design In Figma (2023)

115.3K views · 2023-08-30 UI Design
🔴 Last day to join Prodigies University at a discount is 31st December (LIMITED SPOTS ONLY): https://webprodigies.com/?utm_source=slidedescriptionpu

After this video you'll be able to build almost any website design in figma!
Previous video: https://youtu.be/sEvlKQTx4Tc?feature=shared

Here is the discord if you want to hangout or get support: https://discord.gg/amjqmdyKHp

Start your own agency for Free: https://www.gohighlevel.com/?fp_ref=webprodigies
__________________________________

Today You will learn:

- The full design process from start to finish
- How to create a UI system with typography and automated color palettes using foundation
- Components, component variants and properties
- Trendy Glassmorphism
- Responsive layouts for both Mobile and Desktop devices
- Figma prototyping with smart animate
- Figma's NEW wrap property
- Advanced figma and design concepts
and so much more!

Timestamps
00:00 - What you'll learn
00:51 - Next big video!
01:23 - Project setup - Screen break points
01:48 - How to use grids in figma
02:16 - Figma plugin for our color palette
07:18 - How to create Figma typography
11:25 - Edit a styles that is already created
12:10 - Figma instance swap Icons
14:15 - How to create buttons in Figma
19:10 - Component set in Figma
20:55 - Component properties in Figma
27:03 - How to create a responsive navigation bar in Figma
31:01 - Component variants
32:22 - Figma website design for desktop
48:19 - How to create boolean properties in Figma
49:00 - Gradients in figma
50:54 - Glassmorphism in figma
54:45 - Prototyping with smart animate in Figma
01:01:17 - How to create a side bar in figma
01:08:24 - Design Challenge!
01:08:34 - Figma website design for mobile
01:10:59 - Wrap in Figma

Let me know in the comments if you got stuck anywhere and if action-driven-content helps 💪🏼

Link to Assets: https://drive.google.com/drive/folders/1LOIVwdYHfA59Ncs2kwOrCP94NOP7XjTc
Link to Icons: This is the pack we used in our video but it is no longer published - https://www.figma.com/community/file/1082985704150596841

New Icon Pack (I like this one better) - https://www.figma.com/community/file/1097525503669326714/iconex-freebie-icons

All that I ask in return is that you subscribe and follow us on insta: @webprodigies so that I can provide you with more value like this! ♥️

Instagram: https://www.instagram.com/webprodigies/