Figma for UI/UX: Master Web Design in Figma
129 Lessons (11h)
Your First Program
First SectionIntroduction2:47Download all the resources hereWhat is Figma and is it better than other design programs?13:12How to get help fast1:35The welcome screen in Figma5:00Getting started with Figma5:26Best ways to move around in Figma4:28Exercise: how to move elements around2:47Solving the exercise and a few pro tips6:30Discover Figma’s interface & why professionals use it7:36Create your first mini website7:48Editing icons: colors & size6:25Here's why so many beginners give up4:23Why I don’t code (and I don’t plan to)2:00
Discover the most important things about FigmaIntroduction0:57The biggest difference in Figma versus other programs3:26Here’s how you create buttons in Figma6:45The basics of working with color6:15How to work with color like a pro6:03How to add images: frames vs rectangles6:21Create a gallery / collage in Figma4:42How to mask in Figma4:32Here are the 3 types of text in Figma5:43Discover the properties of text layers7:10How to work with text like a pro5:02Effects in Figma: blur, shadows & more5:44Everything you need to know about grids6:17An overview of components7:50Drafts & Projects in Figma7:33Here’s makes you a good web designer3:40Conclusions1:04
First web design projectIntroduction1:53Set up the desktop version the correct way5:18Create the header5:27Create the main menu5:38Set up the search box6:06Create a dropdown menu4:19Create the most important item – the card6:20How to improve the cards5:56Set up the secondary navigation4:41Create the pagination4:06Create the foundation for the footer5:03Adding content in the footer6:48How to handle visual imperfections5:08Here’s what you need to remember3:11
The first key to great web designIntroduction1:57Best settings & website components5:39Case study: Non-standard layouts5:45Exercise: Create a standard website layout1:54How to size your web elements correctly5:26My formula for perfect text5:47Case study: text layers6:128 color contrastWhat you need to know about color contrast4:09Case study: Colors – Part 15:18Case study: Colors – Part 27:53How to align elements in the hero area6:433 rules for web design icons7:51Case Study: Visual Balance5:39Final thoughts2:01
The second key to great web designIntroduction1:51What’s the point of the website?4:20The user versus the business owner7:06Analytics in web design7:45Templates & Website Builders – The web designer’s death?9:47Case Study: 4 versions of the same website12:17E-commerce homepage layout7:00E-commerce product details4:55E-commerce checkout8:24Why aren’t websites perfect?7:27Case studies: the client’s needs7:21Lead generation in landing pages9:01Why landing pages have a bad reputation10:42Digital product landing page8:57Testing landing pages7:07Case studies: the client’s needs7:29Case study: my landing page12:22Final thoughts about the client’s needs4:58
The third key to great web designIntroduction3:43What’s UX?5:00The best example of good UX and attention to detail8:15Improve the checkout process to double sales9:52Improve the mobile version to double sales4:477 website tweaks that show attention to detail4:52Upgrading the mobile product page4:02Doing 1-on-1 sessions with a coder6:31Here's what you need to remember2:00
Redesign an e-commerce businessThe most important question when starting a new project6:45How to research/find inspiration for your project4:51Set up the foundation of the project5:21Create the top bar3:46Set up the header4:35Decide on a styling for the header6:17Create the most important part – the hero area5:37Create the secondary navigation – product categories7:04Here’s where sales are made … or not!4:22Create the first version of the card5:15Set the style for the card5:45Finishing touches for the card design5:05Don’t forget about this important detail!2:56Create the FAQ section4:41Here’s why auto-layout is awesome4:22Create a newsletter sign up form5:50Set up the footer’s foundation6:17Finishing the footer4:30Explore variations & improve your design6:03How to approach the interior pages3:44Set the top area for the product’s page5:11Adding content to the product’s page5:25How to add clear calls to action for visitors4:45Main content area5:07Create a table for the sidebar5:04Conclusions1:22
Responsive design: from desktop to mobileIntroduction to the mobile version2:21How to start the mobile version for the homepage5:45Create the header for the mobile version5:17How to rearrange the hero area4:38Set up the card for the grid of products6:36Don’t skip this step when creating product cards5:00Arrange the FAQ section for the mobile version4:01Recreate the newsletter in a narrow space2:49Create the footer for the mobile version4:11Conclusions0:57
Discover how the design gets transformed to the live versionPreparing the design for coding4:40Zeplin - the missing link!2:59How to set up the project for the coder/client4:26Server-side content and multi-layer graphics4:59Here’s what developers want from your design4:536 essential3:51
What's next?Final thoughts and what’s next1:14
Learn More about Modern Web Design with 11 Hours of Content on the Best Tips & Tricks of Figma
Chris Barin is a professional web and app designer with nearly 10 years of Photoshop experience. He's also an Adobe Certified Instructor and Certified Photoshop Expert. By being self-taught, he managed to gain the trust of over 230.000 students from all over the world through his Photoshop courses. A staple of his materials is a hand-on, down-to-Earth approach that focuses on getting maximum results with minimal effort.
Figma is one of the best design programs around, and it's super user-friendly. The thing is… you have to know how to use it! This course will teach you everything you need to know about modern web design and we're going to use Figma. The course is beginner-friendly. It goes step-by-step and lets you learn through fun exercises. Discover the best tips & tricks that will take you from beginner to advanced user in a very short time. You'll work on real-world projects that are actually live and have visitors & clients.
- Access 129 lectures & 11 hours of content 24/7
- Learn all the essential principles of UI & UX
- Prepare the design for coding
- Design principles that can be applied to any project
- Find out what clients want from you - what assets/deliverables & in what format
NOTE: Software NOT included.
- Length of time users can access this course: lifetime
- Access options: desktop & mobile
- Redemption deadline: redeem your code within 30 days of purchase
- Experience level required: beginner
- Have questions on how digital purchases work? Learn more here
- Figma is totally free. All you need is a computer and a bit of time.
- Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.