Figma for UI/UX: Master Web Design in Figma

Course Outline

• Your First Program

  Preview

• First Section

  • Introduction - 2:47
  • Download all the resources here
  • What is Figma and is it better than other design programs? - 13:12
  • How to get help fast - 1:35
  • The welcome screen in Figma - 5:00
  • Getting started with Figma - 5:26
  • Best ways to move around in Figma - 4:28
  • Exercise: how to move elements around - 2:47
  • Solving the exercise and a few pro tips - 6:30
  • Discover Figma’s interface & why professionals use it - 7:36
  • Create your first mini website - 7:48
  • Editing icons: colors & size - 6:25
  • Here's why so many beginners give up - 4:23
  • Why I don’t code (and I don’t plan to) - 2:00

• Discover the most important things about Figma

  • Introduction - 0:57
  • The biggest difference in Figma versus other programs - 3:26
  • Here’s how you create buttons in Figma - 6:45
  • The basics of working with color - 6:15
  • How to work with color like a pro - 6:03
  • How to add images: frames vs rectangles - 6:21
  • Create a gallery / collage in Figma - 4:42
  • How to mask in Figma - 4:32
  • Here are the 3 types of text in Figma - 5:43
  • Discover the properties of text layers - 7:10
  • How to work with text like a pro - 5:02
  • Effects in Figma: blur, shadows & more - 5:44
  • Everything you need to know about grids - 6:17
  • An overview of components - 7:50
  • Drafts & Projects in Figma - 7:33
  • Here’s makes you a good web designer - 3:40
  • Conclusions - 1:04

• First web design project

  • Introduction - 1:53
  • Set up the desktop version the correct way - 5:18
  • Create the header - 5:27
  • Create the main menu - 5:38
  • Set up the search box - 6:06
  • Create a dropdown menu - 4:19
  • Create the most important item – the card - 6:20
  • How to improve the cards - 5:56
  • Set up the secondary navigation - 4:41
  • Create the pagination - 4:06
  • Create the foundation for the footer - 5:03
  • Adding content in the footer - 6:48
  • How to handle visual imperfections - 5:08
  • Here’s what you need to remember - 3:11

• The first key to great web design

  • Introduction - 1:57
  • Best settings & website components - 5:39
  • Case study: Non-standard layouts - 5:45
  • Exercise: Create a standard website layout - 1:54
  • How to size your web elements correctly - 5:26
  • My formula for perfect text - 5:47
  • Case study: text layers - 6:12
  • 8 color contrastWhat you need to know about color contrast - 4:09
  • Case study: Colors – Part 1 - 5:18
  • Case study: Colors – Part 2 - 7:53
  • How to align elements in the hero area - 6:43
  • 3 rules for web design icons - 7:51
  • Case Study: Visual Balance - 5:39
  • Final thoughts - 2:01

• The second key to great web design

  • Introduction - 1:51
  • What’s the point of the website? - 4:20
  • The user versus the business owner - 7:06
  • Analytics in web design - 7:45
  • Templates & Website Builders – The web designer’s death? - 9:47
  • Case Study: 4 versions of the same website - 12:17
  • E-commerce homepage layout - 7:00
  • E-commerce product details - 4:55
  • E-commerce checkout - 8:24
  • Why aren’t websites perfect? - 7:27
  • Case studies: the client’s needs - 7:21
  • Lead generation in landing pages - 9:01
  • Why landing pages have a bad reputation - 10:42
  • Digital product landing page - 8:57
  • Testing landing pages - 7:07
  • Case studies: the client’s needs - 7:29
  • Case study: my landing page - 12:22
  • Final thoughts about the client’s needs - 4:58

• The third key to great web design

  • Introduction - 3:43
  • What’s UX? - 5:00
  • The best example of good UX and attention to detail - 8:15
  • Improve the checkout process to double sales - 9:52
  • Improve the mobile version to double sales - 4:47
  • 7 website tweaks that show attention to detail - 4:52
  • Upgrading the mobile product page - 4:02
  • Doing 1-on-1 sessions with a coder - 6:31
  • Here's what you need to remember - 2:00

• Redesign an e-commerce business

  • The most important question when starting a new project - 6:45
  • How to research/find inspiration for your project - 4:51
  • Set up the foundation of the project - 5:21
  • Create the top bar - 3:46
  • Set up the header - 4:35
  • Decide on a styling for the header - 6:17
  • Create the most important part – the hero area - 5:37
  • Create the secondary navigation – product categories - 7:04
  • Here’s where sales are made … or not! - 4:22
  • Create the first version of the card - 5:15
  • Set the style for the card - 5:45
  • Finishing touches for the card design - 5:05
  • Don’t forget about this important detail! - 2:56
  • Create the FAQ section - 4:41
  • Here’s why auto-layout is awesome - 4:22
  • Create a newsletter sign up form - 5:50
  • Set up the footer’s foundation - 6:17
  • Finishing the footer - 4:30
  • Explore variations & improve your design - 6:03
  • How to approach the interior pages - 3:44
  • Set the top area for the product’s page - 5:11
  • Adding content to the product’s page - 5:25
  • How to add clear calls to action for visitors - 4:45
  • Main content area - 5:07
  • Create a table for the sidebar - 5:04
  • Conclusions - 1:22

• Responsive design: from desktop to mobile

  • Introduction to the mobile version - 2:21
  • How to start the mobile version for the homepage - 5:45
  • Create the header for the mobile version - 5:17
  • How to rearrange the hero area - 4:38
  • Set up the card for the grid of products - 6:36
  • Don’t skip this step when creating product cards - 5:00
  • Arrange the FAQ section for the mobile version - 4:01
  • Recreate the newsletter in a narrow space - 2:49
  • Create the footer for the mobile version - 4:11
  • Conclusions - 0:57

• Discover how the design gets transformed to the live version

  • Preparing the design for coding - 4:40
  • Zeplin - the missing link! - 2:59
  • How to set up the project for the coder/client - 4:26
  • Server-side content and multi-layer graphics - 4:59
  • Here’s what developers want from your design - 4:53
  • 6 essential - 3:51

• What's next?

  • Final thoughts and what’s next - 1:14