After this video you’ll be able to build almost any website design in figma!
Previous video: https://youtu.be/sEvlKQTx4Tc?feature=shared
Come hangout with me every friday in our Discord prodigy community
https://discord.gg/GG4wJkxh
__________________________________
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/