Envato Tuts+ | Awesome Figma UI Design | FREE COURSE @envatotuts | Uploaded August 2023 | Updated October 2024, 1 week ago.
This Figma course is all about designing websites for IMPACT. If you use Adobe XD and want to move to Figma, then this course will help! Join Daniel White, aka Dansky, to learn how to create a high-impact website design with Figma. ► Download unlimited Figma templates with Envato Elements: elements.envato.com/graphic-templates/compatible-with-figma?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
We’re going to start with a wireframe which you can download, then we’ll turn it into a high-quality Figma website design with plenty of tips and tricks along the way. We’ll finish off by adding some quite sophisticated animation to our prototype.
► Source Files: figma.com/community/file/1268883180317468055
Assets Used in This Video:
• 3D Avatar: stock.adobe.com/uk/images/3d-icon-avatar-cartoon-hipster-character-stylish-smiling-man-with-beard-with-tablet-cartoon-close-up-portrait-on-isolated-on-transparent-png-background-generative-ai/590598870?asset_id=590598870
• Cyberpunk Cat: stock.adobe.com/uk/images/cyberpunk-cat-at-night-time-in-city/554976257
• House on a Hill: stock.adobe.com/uk/images/generative-ai-illustration-of-a-captivating-an-extraordinary-house-in-a-hill-one-side-oriented-cabin-placing-the-modules-between-the-trees-ecological-exterior-wood-deck-with-infinity-pool/593238821
• Cabin at Sunset: stock.adobe.com/uk/images/beautiful-view-of-a-old-simple-cabin-or-house-with-a-river-nearby-a-meadow-and-hills-at-sunset-beautiful-serene-rustic-landscape-illustration-ai-generated/594795754
• Spooky House: stock.adobe.com/uk/images/spooky-house-or-witch-hut-dark-and-scary-night-halloween-scene-with-fog/601175696
Here's what we'll cover in this course:
00:00:00 Introduction
00:02:48 Get consistent with grids
00:05:53 Don’t be dull and grey
00:08:55 Tips for icon design
00:12:48 The great thing about Figma components
00:13:11 The 60-30-10 colour balance principle
00:15:36 Honestly, one font is enough
00:18:46 Lead your users through the page
00:23:28 When to go centred with text
00:24:52 Adobe XD vs. Figma colour styles
00:40:25 The importance of hero images
00:42:04 “Ah love me a good gradient!”
00:54:41 The rhythm of a page layout
01:09:33 Background blur for hi-fidelity depth
01:17:37 Introducing subtle motion
01:23:20 Advanced animation in Figma
► Read more on Envato Tuts+: webdesign.tutsplus.com/how-i-design-for-impact-with-figma--ytc-63c
Read free Figma tutorials on Envato Tuts+: webdesign.tutsplus.com/categories/figma?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envato.com/?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: twitter.com/envato
► Follow Envato on Facebook: facebook.com/envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
This Figma course is all about designing websites for IMPACT. If you use Adobe XD and want to move to Figma, then this course will help! Join Daniel White, aka Dansky, to learn how to create a high-impact website design with Figma. ► Download unlimited Figma templates with Envato Elements: elements.envato.com/graphic-templates/compatible-with-figma?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
We’re going to start with a wireframe which you can download, then we’ll turn it into a high-quality Figma website design with plenty of tips and tricks along the way. We’ll finish off by adding some quite sophisticated animation to our prototype.
► Source Files: figma.com/community/file/1268883180317468055
Assets Used in This Video:
• 3D Avatar: stock.adobe.com/uk/images/3d-icon-avatar-cartoon-hipster-character-stylish-smiling-man-with-beard-with-tablet-cartoon-close-up-portrait-on-isolated-on-transparent-png-background-generative-ai/590598870?asset_id=590598870
• Cyberpunk Cat: stock.adobe.com/uk/images/cyberpunk-cat-at-night-time-in-city/554976257
• House on a Hill: stock.adobe.com/uk/images/generative-ai-illustration-of-a-captivating-an-extraordinary-house-in-a-hill-one-side-oriented-cabin-placing-the-modules-between-the-trees-ecological-exterior-wood-deck-with-infinity-pool/593238821
• Cabin at Sunset: stock.adobe.com/uk/images/beautiful-view-of-a-old-simple-cabin-or-house-with-a-river-nearby-a-meadow-and-hills-at-sunset-beautiful-serene-rustic-landscape-illustration-ai-generated/594795754
• Spooky House: stock.adobe.com/uk/images/spooky-house-or-witch-hut-dark-and-scary-night-halloween-scene-with-fog/601175696
Here's what we'll cover in this course:
00:00:00 Introduction
00:02:48 Get consistent with grids
00:05:53 Don’t be dull and grey
00:08:55 Tips for icon design
00:12:48 The great thing about Figma components
00:13:11 The 60-30-10 colour balance principle
00:15:36 Honestly, one font is enough
00:18:46 Lead your users through the page
00:23:28 When to go centred with text
00:24:52 Adobe XD vs. Figma colour styles
00:40:25 The importance of hero images
00:42:04 “Ah love me a good gradient!”
00:54:41 The rhythm of a page layout
01:09:33 Background blur for hi-fidelity depth
01:17:37 Introducing subtle motion
01:23:20 Advanced animation in Figma
► Read more on Envato Tuts+: webdesign.tutsplus.com/how-i-design-for-impact-with-figma--ytc-63c
Read free Figma tutorials on Envato Tuts+: webdesign.tutsplus.com/categories/figma?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: tutsplus.com/?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: elements.envato.com/?utm_campaign=yt_tutsplus_HvkmJ3Ec-hU&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: twitter.com/envato
► Follow Envato on Facebook: facebook.com/envato
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
