Figma Tutorial for UI Design - Course for Beginners

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 KZbin channel: / @devanddesign
⭐️ 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: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@dreamytravelspots1427]

I spent 1 year on a UI/UX course in Dublin and wasted 3800 euros on it. I learnt 10x more from Joe than what that course gave me! Finally I am able to put together my own UX portfolio. Thank you!

[@sankarseetharaman7488]

your command helps me thanks :)

[@IfeanyiSolar]

Waw, are you serious?

[@talkinghills1635]

I believe this, am just 3hrs into the course and I can say , the sky is my starting point

[@crystabelz]

​@TALKING HILLS I started earlier on and was about 2 hours in Like a month ago. I work so haven't been able to come back to it until today. I'm one hour in and seeing things I didn't the first time. Joe is really good

[@talkinghills1635]

@@crystabelzwelcome back Am now 6hrs in ,we can grow together 😀 Learning HTML and CSS, I want to be a full stack developer.

[@thesabiqueen3887]

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

[@talabibolaji5665]

Hi

[@jojoogb6873]

Honestly 😂

[@abdulmalikyakubu9091]

This is probably the most detailed figma course on KZbin. Thanks for taking your time to explain every step, Joe. You're a great teacher.

[@akin_rufai]

Yes it is

[@anonartv]

Agreed!

[@talkinghills1635]

Very Correct, The Teacher deserves an Award on This

[@vnixz]

NO.

[@webrevolution.]

His name is Joseph.

[@quincylarsonmusic]

I want Joseph Brendan to narrate my every keystroke and click of the mouse. So soothing.

[@Aced_Dreamer]

Thank you for creating FreeCodeCamp 🤗🤗

[@nanlunglongtau2076]

I love u boss

[@oladipupoayooluwa6529]

My UI/UX journey starts today. Thank you very much. ❤

[@odebunmitobiloba8876]

Can we connect mr ola

[@luizfx8249]

@@odebunmitobiloba8876 okaayyyyyyyy

[@kumaar_art_1836]

Me today😊

[@DaviDestiny_]

I guess we're many starting today

[@habibworldilovekevin9206]

​@@odebunmitobiloba8876 Me too am interested

[@chuksjerahmeel1355]

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

[@FactsWithJules]

He's a great teacher.

[@adityatomar9548]

can you please tell that does this course contain all the concept i..e from begineer to advanced ?

[@plutonium.]

Animations with figma kzbin.info/www/bejne/l36phqh9j55_e9U

[@siddhartharoy5263]

​@@adityatomar9548Dont know

[@dhgnofn]

have you ever taken any course on youtube about desgining using these kinda technologies before/

[@miriamoxenhandlernewman4360]

I've looked at a lot of Figma classes and have learned, but your class really made it click for me. You're a wonderful teacher. Thank you!

[@OrlandoDelgadilloLuna]

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.

[@fredrickblessed2165]

Thank you Sir I appreciate

[@mr.guzwee7695]

Great for beginners and people struggling

[@edutechab]

Yh, UI tutorials are really hard to come by

[@Catheys_kings]

As a newbie to this course, I mean a complete beginner,I got intimidated at first because of the length but as soon as I stated, just 2 minutes into the course, I was blown away, interested, happy, grateful and I totally enjoyed it, as a Nigerian Lady I can only say I am so proud to have an elder brother who is an amazing teacher and I will also strive to make you proud Sir (Mr Joseph Brendan) I love every bit of it, God bless and reward you for your time, simplicity and the effort you put into this course.

[@tochukwuikechukwu6154]

Hi I'm also new here. But since your post was about 3 months ago, means you must have gone way ahead of me. So if it's appropriate for you, we could share insights together . Thanks

[@denatora7142]

@@tochukwuikechukwu6154 Hi there, am just starting newly and I am very new here. Learning this about 2 days ago. But since your post was about 1 month ago, means you must have gone way ahead of me. So if it's appropriate for you, we could share insights together . Thanks

[@donbaxxey]

​@@denatora7142Hi! I am a beginner as well.

[@donbaxxey]

​@@tochukwuikechukwu6154Hi, am a beginner i dont mind if we can share

[@babareditx5618]

@@denatora7142 Hi there, am just starting newly and I am very new here. Learning this about 3 days ago. But since your post was about 1 month ago, means you must have gone way ahead of me. So if it's appropriate for you, we could share insights together . Thanks

[@EdwardVarner]

6 minutes in and it’s blatantly obvious that you Sir are a phenomenal teacher. Thanks for the time and energy you have put into this course.

[@agyenblessing8927]

❤

[@agyenblessing8927]

❤❤❤❤❤

[@mykolaskucinskas9473]

I really love these long format, detailed tutorials. This one is really great. Unlike some other tutorials, that are short and only touches the surface.

[@abubalo]

That's my Nigerian guy, the accent is tick😂. Thank you for the tutorial.

[@umarbnnaseer]

Yeah 😅😅😅

[@oluwagbengajohnhaastrup2109]

😂😂😂

[@GlobalDee_]

😀😀😀😀🇳🇬🇳🇬🇳🇬

[@adenikebanjo]

🇳🇬🇳🇬🇳🇬🇳🇬🇳🇬🇳🇬🇳🇬

[@Dolabomi_Peace]

Likeeeeeeeee, there's no way you won't know he's a Nigerian 😌💕😂

[@asquareful]

Figma should be working with you. You know the in and out of it, and you are a born teacher. Thank you sir.

[@hiddenworld8280]

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!

[@elishaoreunomhe2943]

1000%

[@koleoshokehinde3662]

The most detailed, simplified and intriguing course I offered on product design so far. Thank You Mr. Brendan. May your source of knowledge never run dry.

[@DanVanDamme]

This is a VERY comprehensive tutorial. Thanks so much for sharing this with the world!

[@jaydenmoon1165]

lol - I am laughing so hard - I was thinking this year would be perfect to start learning Figma - and then you guys pop up - thank you!!!!!

[@daviesthecoach]

Same here. Lol

[@KaranChowdhury]

Same here lol

[@volod-one]

Same here lol

[@naimawalendo5341]

same here lol

[@itzboyon6983]

same here lol

[@ADELL_A]

The best UIUX course so far. This is so great! Detailed, well explained! This teacher deserves an award. He did it so well... 🙌

[@therealp7667]

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 🙏🏼

[@kuntalray9613]

It is so easy to understand how you teach, you are exactly what a student needs in a mentor. Very good to start anyone from here.

[@Max-ns3db]

for beginers this course is gold.

[@danope4k]

This is by far the most beginner friendly Figma course I undertook. Thank you so so much.

[@djtsanga]

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

[@titilopealayaki7528]

Hi were you able to access material.io?

[@wyattorangeblock7644]

Can’t believe I’m chilling in Germany my whole life and that amazing guy from Nigeria just explains everything to me. Man I want to support you!

[@eyongachare5669]

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

[@killerdroid99]

this is what I always needed, FCC has developed a mind reading algorithm

[@cody_code]

You're not kidding, I was literally looking for this last night

[@onyedikachiozoani]

I just finished this tutorial yesterday. Right now, I'm very comfortable that I'm no longer a newbie to figma and UI/UX design. Joseph Brendan is such a wonderful teacher, and I'm very thankful he's a fellow Nigerian.

[@LoveworldActivist]

I love the instructor...he breaks everything down totally!...best course ever

[@igboerikauzoma4127]

LOVE how extremely detailed this tutorial is

[@NandoDevlop]

A really good teacher who explains things very clear 😌👌🏿

[@yaxxee]

I'm just starting this free course alongside the front-end development course also on freecodecamp. I'm amazed by the quality of this free education, it looks better than my university degree where a lot of irrelevant and uninteresting subjects were taught. This is exactly what I need to become a front-end developer... So thanks for the work put into creating this course!

[@tonys490]

my friend probabaly u are the only one who didnt ask to like and subscribe on internet after sharing so much knowledge for free.. thanks from bottom of my heart.. love from South India ...

[@tryphenepower6652]

Honestly speaking, your voice by his own have already impacted my understanding. You're super talented in teaching! Before I watched some videos over the same topics , Didn't get it clear but now a windy came and blow my mind and brought into it a freedom breakthrough....Keep it up .

[@adwoaagyeiwaaankomah5740]

This is by far the best tutorial video I've ever come across. I'm on the 5th hour but have been more than impressed. Thank you so much

[@user-sl8ku3tr4d]

This has to be the most detailed UI UX video I have seen on KZbin, thank you Joe

[@mixedmesh3404]

I had never completed watching a video so long till now. Thankyou very much Joseph, this was the most helpful figma tutorial.

[@ancitasharma]

I just finished it and GOD its great. Its very easy to learn from you. Your teaching skills are on another level, my curiosity was same during the whole video.

[@Splash__Tech]

i have never seen a dedicated Tutor like you sir. am so much glad. thank you so much. words cant express how i feel after watching this video

[@gopighashreeravichandran2843]

Completed the course today & instructor done a great job ..........thanks for this absolute beginner course.

[@Babygirlforlife]

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.

[@nanlunglongtau2076]

Good luck

[@kudamurungu]

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

[@Haturr]

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

[@manahiljamil6034]

I want to do course of figma what i should buy on Udemy or this course is better?

[@Kumar_harsh]

Ty Joseph Sensei! I planned to learn figma this year ...ig this recommendation is the sign 😅 ------------ gonna update how much I watched/ learned here ----------- Session 0 - 36:38 ( 7 -jan 3:30 am ) session 1 - 01:01:43 (8 -jan 8:24pm) session 2 - 01:44:30 (9 - jan 3:30 am) session 3 - 02:16:50 (10 - jan 3:30 am ) session 4 - 03:26:00 (11 - jan 3:40 am ) session 5 - 04:20:01 (12 - jan 10:00 pm) session 6 - 06:28:50( 16- jan 2:52 am ) session 7 - 07:25:55 (4 - feb 11:00 pm)

[@NyPk92]

why you stopped?

[@Kumar_harsh]

@@NyPk92 oh! thanks for checking on me :) i was trying out stuff in my free time the other days yk learning and then trying stuff yourself...sometimes go back and re- watch particular part which making some trouble! all those stuff !(that's why didn't updated cause i didn't watched ahead) but today i continued further with the tutorial ! will update the last checkpoint soon :) , TY! for making me feel more responsible.

[@NyPk92]

@@Kumar_harsh keep going, I'm practicing too.

[@Kumar_harsh]

@@NyPk92 Yes! may the force be with you too comrade

[@anushag6742]

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

[@bhekindlovu5595]

This is the best teacher I have ever came across since primary school days...deeply explained that u can't miss a thing....incredible

[@mariavictoriaoliveiraespin1749]

I'm only two hours in this course and I have learned more than 1 year in college lol. I'll come back here to make a full comment on the video once I'm finished.

[@onyedikachiozoani]

Still haven't finished the video yet?

[@auntypelz]

Thank you so much for this, it was super helpful for someone like me whose first exposure to design and Figma is this video.

[@samsonakinsanya1810]

The best and greatest tutorial I have ever seen on KZbin on Figma, thanks so much for your hardwork on this

[@temitopeadebayo1175]

This is the most detailed beginners course that I’ve come across so far👏🏽👏🏽 thank you so much

[@oshinowokolawole4339]

The best teacher I have seen so far. Thanks for taking us though with every details. the 10hours was never regretted

[@usmanjoseph3638]

The way he took time to explain every details is exceptional Thank you so much 🎉

[@MartinsYewande]

The material design guide has much changed since this video was made. Making it a bit hard to navigate, I do hope your videos are updated soon enough, I really enjoy them. Well done sir.

[@Kdo2345]

Thank you so much, Joseph. I loved every bit of this course, and I'll come back for courses taught by you.

[@olhaatamanchuk1940]

I finally got through the course! Thank you so much! It is so detailed and easy to follow! Thank you! Thank you! Thank you!!!

[@abdullahjuma9169]

How far are you with Figma? UI UX Design? I am a newbie and currently going through this tutorial.

[@jitendrashelar4123]

Thank you very much sir! you saved my life... I had to prepare a web page and need present it to ma boss. Now, because of this tutorial I am able to do my given task. really appreciated for our efforts. all I can say god bless you and your family!

[@osajiemichael8043]

This is the most detailed free video course I have ever seen, I was just searching youtube for the last time for a well detailed UI/UX design course after leaving my previous one cos I couldn't understand it

[@thevijaykumar]

Just finished the entire video. I can say that I'm now confident to design anything I wish to do. Thank you so much for this content. I'm very grateful for this.

[@dhivyas30]

Hi vijay

[@dhivyas30]

will u able to view the tables in typography

[@thevijaykumar]

@@dhivyas30 In the latest Material Design 3 guide, they have removed the tables. So I took the screenshot of the table from this video because I couldn't find it anywhere else.

[@3yearslost]

This is a fantastic video, I'm only 4 hours in, but Joseph is a great teacher. Thank you so much!

[@klyuvert]

After almost one month, finally finished from watching this 10 hour video plus many others from different exercises, thanks a lot man.

[@Yunhomatata]

This is brilliant. Watching this makes it seem like this is something I could actually do.

[@ozgurgondiken6094]

This is the BEST Figma course ever! And you are a great teacher. Thank you soooo much for your efforts. People do not explain many details that are necessary especially for beginners or mid-levels, but you do this. When I complete the entire video, I think I won't have any questions, but if I have, I will ask you. =) Regards.

[@david_bensonux]

Great tutorial. Thanks with our Nigerian accent. That was strong and proud. 🔥🔥

[@theprinceofcode9348]

I 'm from Zimbabwe and I'm proud that a fellow African has pulled masses towards this tutorial ❤💯🔥

[@david_bensonux]

@@theprinceofcode9348 one love 🔥

[@lekandar4889]

GOD BLESS YOU SIR. I have been looking for a Figma Course for a long time

[@cajaaib1]

what an amazing course, i watched 3hour of the course till now, and i am suprised your explaining way. thanks teacher.

[@unaalexandar8865]

Very detailed,very patient,very good explanations! Thanksfor this tutorial! You are very good teacher,you have a talent to teach others!

[@dialornonso276]

This is the best Figma tutorial on KZbin-very easy to understand and perfect for beginners. I started with this and went on to watch your 3+ hours tutorial on mobile app design. I'm really proud of how far I've come. Thank you very much, Mr. Joseph.

[@nanaosei-ox3fv]

Can you please share a link to his 3+ hours tutorial on mobile app design?

[@dialornonso276]

kzbin.info/www/bejne/hnnWh32emNRpmrsfeature=shared

[@akeemkazeem2164]

Please can you share the link for the 3+ plus

[@dialornonso276]

@@nanaosei-ox3fv kzbin.info/www/bejne/hnnWh32emNRpmrsfeature=shared

[@dialornonso276]

@@akeemkazeem2164 kzbin.info/www/bejne/hnnWh32emNRpmrsfeature=shared

[@chidiofficial01]

This course is awesome. It has opened my eyes to design concepts I never knew. Thank you very much Mr Joseph ❤️

[@habibworldilovekevin9206]

This is the best UI/UX design course i came across on KZbin, ton of value and really beginner friendly. Just finished it and all i can say is thank my AFRICAN BROTHER JOSEPH. Love from Ivory Coast.

[@zehrajahangeerkhan7853]

Ohhh how can someone explain so nicely... loved it .. have no more words to appreciate it 🤩😍❣️Thank you so much :)

[@blaises8221]

This is really really deep Depp deeper deepest beginner lessons...wow God Bless you

[@ifeyinwalucy5068]

This is the best course I ever encountered, thank you so much for taking the time to simplify things. I just started newly in this journey and your course has been more than helpful, thank you so much, you're such an amazing and awesome TEACHER, THANK YOU VERY MUCH, and may GOD BLESS YOU!

[@esraahamada4784]

I just finished this course , It's an awesome one even that I work as a programmer it helps me a lot in understanding design better, thanks Joseph 😄

[@a.qayyum1697]

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

[@odobipaul8988]

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

[@adedejiadams7969]

Did you land your first job?

[@clintonkingsley6675]

@@adedejiadams7969 lol brooo...

[@fola_baky7639]

Don't be mean?

[@natasyazuelda1954]

Definely love his teaching style!!!!!!!!!! Thank you so much for making this video!!!

[@odetteribeiro1440]

Thank you so much for your time and for being so patient, clear, and for speaking slowly for non-native english speakers 🥺

[@tallurirohan4353]

who asked?your mom?

[@tomaszsledz6600]

thank you very much! It was very helpful.

[@MDARIFULISLAM-lq4hq]

I've just completed the whole course. This is one of the most beginner-friendly tutorials on Figma. Now, I feel confident that I can use Figma for my design projects. Thanks a lot, man! 🙂

[@KhairunnisaKairu-mw2de]

hy brother can i see your portfolio

[@abdulhakdavutburcek5227]

Watched the whole 10 hours thing? Respect!

[@omarshorbagy5062]

i watched the whole video and it's really useful, now i can use figma really well, this video is a life changing.

[@aramideadesanya253]

I come back to this course over and over again and as a beginner, it has really helped me. Thank you so much!🥳😘

[@edwarddijkstra8261]

came as a sigma left as a figma

[@ashishroshan5946]

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.

[@muhammedweezy8551]

I must confess This is best figma tutorial ever. A friend gave me this link and it was very helpful honesty

[@muhammedgodil8399]

Just completed the course and it was really helpful, Thanks Joseph for uploading such amazing content.

[@aarondantley1293]

This is incredibly helpful and makes designing a website from scratch very straightforward -- may not be easy, but this shows very clearly how to start and what the steps are to making a good design. Thanks!

[@tsatsralt9112]

Oh what i just needed

[@mohammadfawad3629]

I really appreciate your amazing work. This course is amazing as compare to other courses I checked on Figma Basics. Keep up your great work. Thanks a lot sir.

[@parinsheth4971]

Dude! You're amazing! Just enjoying the learning process! Figma seems easy now ty sir

[@therealsholz]

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 💯💯

[@abdulrahmaniliyas5691]

Are there more lectures oby you. Do you have a specific lecture that covers color styling separately. I really want to know how to choose color right for Primary, secondary, etc. Is there any platform where we can also drop a replication of what we have done. Please I need this.

[@oluwatobiakinola25]

This was so helpful. Very comprehensive! Thanks a lot.

[@browix2045]

Truly amazing course. I was looking for something like this to understand how to create modern design in figma. I can easily recommend it to everyone. Thanks to Joseph!

[@kishoregowda5551]

This is stupendous

[@abiolaadesola3438]

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

[@Catheys_kings]

From a grateful heart I say thank also and especially to the organizers for the diversity, Mr Joe you're truly a great teacher.

[@basharel-habbash9646]

Amazing Course! So detailed and meticulous. I benefited a lot! Well done! Thanks!

[@pala9983]

6:29:23 ✅ 7:26:00 ✅ 8:00:00 ✅ 10:16:50 ✅ This course amazing!!!🔥

[@MuratKarakus-to4tr]

good work!

[@pala9983]

@@MuratKarakus-to4tr thanks 😊

[@ginasta7575]

I literally need this for my website development class

[@RAGHAVENDRASINGH17]

is it free?

[@carminevitello3041]

@大厅王雷 thought it said fugma at first

[@Inifavour]

thank you so much for this cause, so simplified, i could not get my eyes away from this tutorial, he teaches like he is teaching a child and i love it, now am so confident about using figma, thank you for a job weldone

[@marufhassan634]

I always wanted to know how people made such butter smooth designs and animations on Dribbble, now I know. Thank you very much for this tutorial, you are a great teacher.

[@puneetshakya3001]

Thank you so much ❤️ this is the ultimate beginner FIGMA course everything was explained from the scratch 🔥.