Figma Tutorial for UI Design – Course for Beginners

Ecommerce Empire Academy

In this Figma course, you will learn how to use Figma for UI Design. Figma is a vector graphics editor and prototyping tool.

✏️ Joseph Brendan developed this course. Check out his YouTube channel:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:00:55) Creating A Figma Account
⌨️ (0:02:32) Creating & Naming A Figma Design File
⌨️ (0:04:47) Creating Shapes In Figma
⌨️ (0:07:16) Selection In Figma
⌨️ (0:12:02) Editing Shapes In Figma
⌨️ (0:36:14) Introduction To Typography In Figma
⌨️ (1:01:41) Design Tree In Figma
⌨️ (1:06:43) First Design Task
⌨️ (1:20:44) Colors In Figma
⌨️ (1:44:22) Drawing Tools In Figma
⌨️ (1:49:20) Margin And Padding In UI UX Design
⌨️ (1:56:08) Figma AutoLayout
⌨️ (2:13:48) Formatting Principles In Figma
⌨️ (2:34:32) Figma Constraints And Resizing
⌨️ (2:51:11) Website Design in Figma
⌨️ (2:55:52) Jakob's Principle Of Design
⌨️ (3:00:25) Introduction to Styles and components
⌨️ (3:25:29) Figma Component Variants
⌨️ (3:36:18) Layout Design & Configuration For Websites in Figma
⌨️ (3:40:07) Layout Grids In Figma
⌨️ (4:01:22) Introduction To Responsive Design
⌨️ (4:07:32) Material Design Guide
⌨️ (6:26:24) Introduction To Tailwind UI
⌨️ (6:28:24) Tailwind UI Design Project
⌨️ (7:25:45) Responsive Landing Page Design Project
⌨️ (8:45:54) Designing Mobile Apps
⌨️ (8:56:47) Iconography In Figma
⌨️ (9:02:32) Boolean Groups
⌨️ (9:09:52) Figma Tokens
⌨️ (9:18:29) Animation In Figma With Figmotion
⌨️ (9:36:29) Mobile Design Project

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

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:

28 thoughts on “Figma Tutorial for UI Design – Course for Beginners”

  1. Medard Bitangimana

    Well I have just started. And I’m loving it. At first I was intimated by the 10 hour length but I trust the designer of the course felt the need to be exhaustive. Secondly I want to thank the folks at freecodecamp for the diversity in the people creating the content.

  2. Thanks greatly for the massive value shared here
    … This tutoring is to another level the pace is just so awesome keep the good work

  3. Wow I am so Glad to have my course posted here On FreeCodeCamp. Thanks A Lot FreeCodeCamp.

    1. Shyamendra hazra

      Thank you sir for your hard work and dedication. I hipe everyone will be highly benefitted by thus course. Thank you 💖

    2. Can you do a course on IOS guidelines and some practical projects designs to see your work flow thanks .. amazing course

    3. Charles Onyibe

      Thanks so much for this course. I can’t tell you how Happy I am. Please what is your Twitter handle.

  4. Orlando D. Luna

    I was about to give up since there is basically zero full free courses in UI, and then you guys just drop this. Thank you so much.

  5. Ebonyi First Girl

    Thank you so much for this video. I am a newbie in this course. Your explanations are very easy to understand. I am loving this new path I took this year. I believe with this video, I’ll make you proud. I’ll keep coming back for this video until the end of my course on figma. Thank you so much and may God Almighty bless you. This is from your Nigerian sister who have so much interest in becoming a UI/UX designer. I hope to make it with this course.

  6. God bless you for this course.
    So explanatory
    Even though I am not a complete beginner,the load of information I have gotten from this course is just wow.
    Thank you very much

  7. Im just starting up and had already bought a course on Udemy and found this. This is priceless and thanks for sharing it for free

    1. Anny-Ekunie Esomchukwu Olive

      Please what course did u buy on udemy? I need help selecting one to buy

  8. This is how ALL courses should be, overly simplified AND thoroughly explaining the what, how and why so that people at all levels of experience can instantly pick up on it at whatever level they need further learning. Kudos!

  9. Thanks a lot, freedataorg and @Lo lo Jenkins for this amazing course. Really loved the course. It is a perfect example of teaching a tool and a topic. It covered Figma but also taught about design to beginners like me. Would love to have more such courses on google analytics and SEO.

  10. I found it one of the best courses for the absolute beginners in web design field. Everything is explained in a very uniques way. From selecting a thing, how to select that thing, purpose of selecting or using that thing, etc. everything has been covered in a unique way in this tutorial. Really loved it and learned a lot from it. Thanks!

  11. Thanks Joseph.. really appreciate this🙏..been looking for a way to learn how to use FIGMA in a structured, simple and effective way..and your training is 💯💯

  12. FCC i’m surprised you guys don’t have a course about this on your website! Feels like the final piece of the puzzle to an amazing curricula. Consider adding it in. As an aspiring front end dev i’m kinda wishing i had learned ux/ui *before* “raw” code like html/css. I like to begin with the end in mind. Amazing video and site nonetheless. Appreciate everything you guys do 🙏🏼

  13. I learnt in depth of figma here. Thanks a lot to the teacher who taught us perfectly.

  14. Chuks Jerahmeel

    Even as a designer that has been in the industry for 9 years, I can say that this is great, helpful and simplified

  15. Wow!
    This UI/UX design course is detailed!
    The tutor is really good.
    As soon as I land my first job, I will give him some tips from the proceeds.
    Thank you! Free code camp

  16. 1 hr into this course and I’m already feeling like a baddass, thanks you Joe I love your teaching style, I love it

  17. This video is highly intensive. It covers all you need to know to get started with UX!!
    Thanks A lot Sir👍!!

  18. The first 10 hour video i finish watching on YouTube, the content is detailed and clearly explained. Great job Brendan. You gave me the power to keep learning Front End Development.

  19. It’s a worthwhile tutorial ☺♥
    but it could be half the length. 😅
    The entire thing took me a few days to watch at 2X speed because otherwise it is very slow. It doesn’t seem necessary to repeat every subject so many times.
    Apart from that, everything was perfect! I learned the entire program and feel very confident. Thank you very much it was very informative.

Comments are closed.