Figma Course – Web Design Tutorial for Beginners

Ecommerce Empire Academy

Learn how to use Figma to design websites.

💻 Figma link:

✏️ Course developed by Joy Shaheb. Check out his channel:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:04:32) Figma Setup
⌨️ (0:08:05) Left Panel
⌨️ (0:14:34) Top + right Panel
⌨️ (0:40:57) Text Tool
⌨️ (0:59:10) prototype test
⌨️ (1:03:54) Auto Layout
⌨️ (1:17:06) Layout Grid
⌨️ (1:22:27) Constraints
⌨️ (1:29:07) Components
⌨️ (1:36:54) Desktop Design
⌨️ (2:32:54) Mobile Design

🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

30 thoughts on “Figma Course – Web Design Tutorial for Beginners”

  1. Thank you Mr. Beau and @freecodecamp for featuring my works in your wonderful platform. I hope everyone loves it 😄

    Looking forward to post more amazing tutorials in the future ❤ 🌟🌹
    You guys can send me content suggestions as well

    1. Thank you for making this, you said in the video if it reaches 2000 likes you will makes advanced figma course, where can I find it?


  2. This came right on time. I started a group project for school and majority of my team are familiar with figma but I’m not This is super helpful, thank you!

  3. In the previous tutorial someone said that this channel reads your mind and publishes the thing you want to learn in that moment… I´m starting to think it’s true.

    1. @Let’s Talk about with Lady Tee
      He didn’t say youtube suggested what he was searching for .. He said this channel *Published* about what he was searching for and this has nothing to do with algorithms

  4. Hey Guys
    , love your videos as a suggestion can you make a video or explain what is Cumulative Layout Shift (CLS) ?

  5. Ramgopal Jayaraman

    Hi Joy. Thanks for posting the video. Can you please let me know where cani find the dropdown list , radio buttons readily available for a drag and drop like a rectangle or a text.

    Is there a way that we can make it interactive that when the Play button is pressed the system should type in a value like email id : field as if a user is typing it and clicking on Sign In button like that.. Can we make that in figma ?

  6. A step by step guide on how you download the illustrator project to your desk top is needed. As well as how to transfer a download project to your own project was missing in this tutorial.
    Otherwise tou did a great job

  7. I am pretty sure this is the best figma tutorial for beginner, the author covers everything with great explanations/examples/illustrations, thank you Mr. Joy Shaheb for creating this amazing and awesome figma tutorial, it helps so much for people to get right in, you know 😀

  8. CHITUS💖⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    It’s really helpful. Thanks for this course

  9. Parlier Thierry

    Thank for this tutorial. Was looking for a good one to take me on the way to understand this figma thing 🙂

  10. This is a great course. It’s easy to understand and helpfull. Thanks for this course and instructor

  11. @JoyShaheb is extremely thorough and such an amazing instructor. I learned so much from this tutorial.

  12. I watched a couple of tutorials teaching how to use figma, and this was by far the most thorough. Perfect for a beginner like me 🙂 thank you!

  13. Sefty Yunitasari

    Thank you freecodecamp and Shaheb for this amazing tutorial video! It is very easy to understand and covers a lot of things for beginners. I would love to watch the intermediate figma tutorial soon.

  14. Rachael Caruso

    Hi Joy, you are so likeable! You totally won me over with the car you said you hope to buy, although I do hope you actually have a fancy car – thank you so much for teaching me Figma!! 🤗

  15. This is the best tutorial on Figma, and you gave it all for free. You’re the best!

Comments are closed.