Figma for UI/UX: Master Web Design in Figma

11 Hours
$12.99$200.00
You save 93% -

129 Lessons (11h)

  • Your First Program

  • First Section

    Introduction2:47
    Download all the resources here
    What is Figma and is it better than other design programs?13:12
    How to get help fast1:35
    The welcome screen in Figma5:00
    Getting started with Figma5:26
    Best ways to move around in Figma4:28
    Exercise: how to move elements around2:47
    Solving the exercise and a few pro tips6:30
    Discover Figma’s interface & why professionals use it7:36
    Create your first mini website7:48
    Editing icons: colors & size6:25
    Here's why so many beginners give up4:23
    Why I don’t code (and I don’t plan to)2:00

  • Discover the most important things about Figma

    Introduction0:57
    The biggest difference in Figma versus other programs3:26
    Here’s how you create buttons in Figma6:45
    The basics of working with color6:15
    How to work with color like a pro6:03
    How to add images: frames vs rectangles6:21
    Create a gallery / collage in Figma4:42
    How to mask in Figma4:32
    Here are the 3 types of text in Figma5:43
    Discover the properties of text layers7:10
    How to work with text like a pro5:02
    Effects in Figma: blur, shadows & more5:44
    Everything you need to know about grids6:17
    An overview of components7:50
    Drafts & Projects in Figma7:33
    Here’s makes you a good web designer3:40
    Conclusions1:04

  • First web design project

    Introduction1:53
    Set up the desktop version the correct way5:18
    Create the header5:27
    Create the main menu5:38
    Set up the search box6:06
    Create a dropdown menu4:19
    Create the most important item – the card6:20
    How to improve the cards5:56
    Set up the secondary navigation4:41
    Create the pagination4:06
    Create the foundation for the footer5:03
    Adding content in the footer6:48
    How to handle visual imperfections5:08
    Here’s what you need to remember3:11

  • The first key to great web design

    Introduction1:57
    Best settings & website components5:39
    Case study: Non-standard layouts5:45
    Exercise: Create a standard website layout1:54
    How to size your web elements correctly5:26
    My formula for perfect text5:47
    Case study: text layers6:12
    8 color contrastWhat you need to know about color contrast4:09
    Case study: Colors – Part 15:18
    Case study: Colors – Part 27:53
    How to align elements in the hero area6:43
    3 rules for web design icons7:51
    Case Study: Visual Balance5:39
    Final thoughts2:01

  • The second key to great web design

    Introduction1:51
    What’s the point of the website?4:20
    The user versus the business owner7:06
    Analytics in web design7:45
    Templates & Website Builders – The web designer’s death?9:47
    Case Study: 4 versions of the same website12:17
    E-commerce homepage layout7:00
    E-commerce product details4:55
    E-commerce checkout8:24
    Why aren’t websites perfect?7:27
    Case studies: the client’s needs7:21
    Lead generation in landing pages9:01
    Why landing pages have a bad reputation10:42
    Digital product landing page8:57
    Testing landing pages7:07
    Case studies: the client’s needs7:29
    Case study: my landing page12:22
    Final thoughts about the client’s needs4:58

  • The third key to great web design

    Introduction3:43
    What’s UX?5:00
    The best example of good UX and attention to detail8:15
    Improve the checkout process to double sales9:52
    Improve the mobile version to double sales4:47
    7 website tweaks that show attention to detail4:52
    Upgrading the mobile product page4:02
    Doing 1-on-1 sessions with a coder6:31
    Here's what you need to remember2:00

  • Redesign an e-commerce business

    The most important question when starting a new project6:45
    How to research/find inspiration for your project4:51
    Set up the foundation of the project5:21
    Create the top bar3:46
    Set up the header4:35
    Decide on a styling for the header6:17
    Create the most important part – the hero area5:37
    Create the secondary navigation – product categories7:04
    Here’s where sales are made … or not!4:22
    Create the first version of the card5:15
    Set the style for the card5:45
    Finishing touches for the card design5:05
    Don’t forget about this important detail!2:56
    Create the FAQ section4:41
    Here’s why auto-layout is awesome4:22
    Create a newsletter sign up form5:50
    Set up the footer’s foundation6:17
    Finishing the footer4:30
    Explore variations & improve your design6:03
    How to approach the interior pages3:44
    Set the top area for the product’s page5:11
    Adding content to the product’s page5:25
    How to add clear calls to action for visitors4:45
    Main content area5:07
    Create a table for the sidebar5:04
    Conclusions1:22

  • Responsive design: from desktop to mobile

    Introduction to the mobile version2:21
    How to start the mobile version for the homepage5:45
    Create the header for the mobile version5:17
    How to rearrange the hero area4:38
    Set up the card for the grid of products6:36
    Don’t skip this step when creating product cards5:00
    Arrange the FAQ section for the mobile version4:01
    Recreate the newsletter in a narrow space2:49
    Create the footer for the mobile version4:11
    Conclusions0:57

  • Discover how the design gets transformed to the live version

    Preparing the design for coding4:40
    Zeplin - the missing link!2:59
    How to set up the project for the coder/client4:26
    Server-side content and multi-layer graphics4:59
    Here’s what developers want from your design4:53
    6 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

BC
Barin Cristian Doru

Cristian Doru Barin | Certified Photoshop Instructor & Expert, Web & App Designer

4.7/5 Instructor Rating: ★ ★ ★ ★ ★ ★

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.

Description

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.

4.7/5 average rating: ★ ★ ★ ★ ★ ★

  • 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.

Specs

Important Details

  • 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

Requirements

  • Figma is totally free. All you need is a computer and a bit of time.

Terms

  • Unredeemed licenses can be returned for store credit within 30 days of purchase. Once your license is redeemed, all sales are final.
Your cart is empty. Continue Shopping!
Processing order...