Figma Tutorial For UI Design

Поделиться
HTML-код
  • Опубликовано: 11 дек 2024

Комментарии • 259

  • @DevAndDesign
    @DevAndDesign  2 года назад +25

    If you cannot find the typography system values for material design it's fine. I have uploaded a new material design video that covers that. There was an update from Google and that's why the values were removed. Check the new material design video I uploaded. Thanks

    • @muminatadeyemo8833
      @muminatadeyemo8833 2 года назад +1

      Thank you, I really appreciate

    • @DanVanDamme
      @DanVanDamme 2 года назад +2

      Thank you! I created a screen shot from your video. Why would Google remove these values?

    • @DevAndDesign
      @DevAndDesign  2 года назад

      @@DanVanDamme I think it's an update they had to make

    • @adamukashaabdullahi5739
      @adamukashaabdullahi5739 2 года назад +1

      Hi Good Evening sir😊, I’m really enjoying the course 💯 but i have issue my own card “first card” the button are not responding ( ACTION 1 & ACTION 2) they’re just stagnant even after making the layout responsive. Please help me out. Thanks 😊

    • @CristinaJeanDonato
      @CristinaJeanDonato Год назад

      I love your tutorials and your voice. Will there be a video on the new features of figma?

  • @marthatoni9143
    @marthatoni9143 2 года назад +13

    I'd recommend anyone starting Figma to start with this. The 10 hours are definitely worth it!

  • @anyajustina1011
    @anyajustina1011 2 года назад +33

    Wow! I finally finished the course, It's super detailed and straight to the point.
    This video was exactly what I needed. Prior to watching this video, I had a lot of questions and was confused on how to use the design system.
    But after taking this course I know better and feel more confident to create good designs.
    Thank you so much!

  • @shiponraza2070
    @shiponraza2070 Год назад +1

    it's a shame u have only 18k subscribers...u deserve millions for ur beautiful and detailed teaching method..may Allah guide u to paradise

  • @Zhizk
    @Zhizk 2 года назад +4

    I'm here from the freeCodeCamp channel where your video was featured just to leave a like and sub because this content is amazing and free. Thank you very much!

  • @isaacfash580
    @isaacfash580 2 года назад +4

    I'm just about to watch, but from the comment session, reading through almost all, I want to say a big thank you sir, this kind of contents are rare to come by. I will drop my comment once I'm done.

    • @DevAndDesign
      @DevAndDesign  2 года назад +1

      Thanks for the commendation and I hope you find the course interesting

  • @md.digitals
    @md.digitals 2 месяца назад

    This is arguably the best course on Figma on RUclips. Thanks Joe, for taking your time to put this together

  • @shahincrash5315
    @shahincrash5315 3 года назад +14

    nice video and figma tutorial all around the youtube. i started designing with figma by watching your video.
    thanks

  • @kmim80
    @kmim80 2 года назад +9

    Like everybody else, we can't thank you enough. Thank you so much for taking your time to create this great detailed tutorial.

  • @pentouchgalleria
    @pentouchgalleria Год назад

    I have never seen any tutorial as this before where you haven't done anything on something and boom 💥 you can do so much....that's my testimony on this very tutorial. I followed every step of the way and was never afraid of missing any point. I believe anyone can tutor but not every can be a great teacher....I'm blessed to have come across your channel sir. Wish I can see u physical 🎉❤.

  • @kahanx10
    @kahanx10 2 года назад +1

    The first "complete" Figma course on RUclips. Love you man!

  • @more_swagg8708
    @more_swagg8708 2 года назад +1

    Started the course and I'm finally done. You helped me a great deal. Started as a novice and now I can design to a very good extent, can't thank you enough.

    • @simisolaodukomaiya151
      @simisolaodukomaiya151 2 года назад

      Hi, what course is it and where can I also find the course?

    • @more_swagg8708
      @more_swagg8708 2 года назад

      @@simisolaodukomaiya151 you just commented under the video. that's the course.

  • @jimaneto
    @jimaneto 2 года назад +3

    been looking for a good place to learn ui/ux you have blessed me with this knowledge and I really appreciate, your video has put me on a path to a career I want to go into. Words cannot thank you enough, God bless you

    • @DevAndDesign
      @DevAndDesign  2 года назад

      Amen. And I am glad I could be of impact

  • @gloryefien7053
    @gloryefien7053 2 года назад +6

    Thanks so much Joseph , I feel like someone just held me by the hand , this tutorial is amazing. God bless you !

    • @DevAndDesign
      @DevAndDesign  2 года назад

      You're welcome Glory. I appreciate your commendation

  • @afiabatool450
    @afiabatool450 4 месяца назад

    Mr. Joe, you nailed it! I watched your tutorial till the end and it was really interesting and amazing! Thank you soooooo much for making me a Figma Pro from a Figma Noob!!

  • @darshanpandya4417
    @darshanpandya4417 2 года назад +6

    a big Hats Off to you buddy this kind of teaching is very very rare. thanks for this course. please let this course here on youtube

    • @DevAndDesign
      @DevAndDesign  2 года назад +1

      Thanks for your commendation. I appreciate it

  • @kuntalroy9210
    @kuntalroy9210 2 года назад +6

    You are really awesome sir!
    Thank you so much . This is gold actually!
    After completing your tuitorial i'm now very confident to start began as a UI/UX designer. The way you have shared its just awesome.

    • @DevAndDesign
      @DevAndDesign  2 года назад

      Thanks for your feedback. I Appreciate it

  • @mariamqueen4007
    @mariamqueen4007 11 месяцев назад

    I'm just 27 minutes into this video and all I can say is wow! I have been so confused .....thank you so much😄😄... I'm coming back to leave another comment once I'm done.

  • @CreativePeers
    @CreativePeers Год назад

    I have tried many learning from many courses but this course was the best and beyond my expectations! I have learned so much more from this that I couldn't learn from a paid course! You are the best teacher in the world, I appreciate you!❤❤❤

  • @chideradigitalfreak
    @chideradigitalfreak 2 года назад +2

    And that's cool (in your voice) 😊
    Wow ❗ you taught me design in a fun and easy way, thank you.
    I'm watching at the speed of 1.25× and I'm yet to finish it but I'll definitely finish it.
    What other creators are packaging as a paid part of a free Figma essential course, you gave it out without withholding anything.
    You are the best 👍

    • @DevAndDesign
      @DevAndDesign  2 года назад

      Thanks for the commendation. I appreciate your words

  • @hammedtukur
    @hammedtukur 2 года назад +3

    This tutorial is ending my suffering and struggle with Figma. Shedloads of thanks to you.

  • @fedychewech2084
    @fedychewech2084 2 года назад +7

    Great content sir I truly appreciate your effort this was super helpful 🤗!
    I only have one small detail to point out, at 7:21:00 I think instead of nesting multiple auto layouts to the elements of the top nav bar to make it responsive an easier solution is to select the whole nav bar auto layout (with both right and left elements) then go to the "alignment and padding" menu and choose the 2nd option "Space between" instead of "Packed" and it will be adjusted right away avoiding all the hustle..! please correct me if I'm wrong and have a nice day.

    • @DevAndDesign
      @DevAndDesign  2 года назад +2

      Great observation

    • @tonys490
      @tonys490 2 года назад

      Hi mate , why is he making auto layout for every single sentence after typing a line or word? when making another autolayout by selecting all child autolayouts ? say for example he is making 3 headlines one after other .. can you not do a single auto layout by selcting all at end than make single autolayout??rather than doing child autolayouts and parent autolayout on top? i might be wrong , please explain

    • @fedychewech2084
      @fedychewech2084 2 года назад

      @@tonys490 hey, yeah if the lines you're adding are only text based lines you can combine them all at once, but if you have a text line with an extra element like an icone right next to it for example you have to select them both and make them into a child auto layout

  • @alemayehumuhabaw6532
    @alemayehumuhabaw6532 2 года назад +1

    I love the way you teach !!!!!!!!!!!!!!! great Job!!!!!!!!!!!!

  • @stelkemmusicbeauty5498
    @stelkemmusicbeauty5498 2 года назад

    All I can say is thank u soooo sooo much.I jst finished the course and also enrolled in ur bootcamp coming up sept5th.I just can't wait .God bless u

  • @karenzurabyan4862
    @karenzurabyan4862 2 года назад +1

    Hey! whats up everone! this is really great course! i learnt a lot ) although most of the actions I've knew thanks to "poke method" ))) meanwhile there still a lot of little actions which are important, and this guy are making understand how to deal with it.
    Thanks to the buddy who done this 10 hour video! it really helps !

  • @KemiToba
    @KemiToba 2 года назад +2

    Wow i finally finished this course and i must say it’s very detailed, easy to follow and understand. Thank you very much for this. It’s super helpful for budding designers like me.

  • @kachybenita68
    @kachybenita68 Год назад +1

    It is the coherence in your speech for me 👌🏾🙌🏾

  • @opeyemiayomide3213
    @opeyemiayomide3213 Год назад

    This is a great video with tons of values, it a novice to pro course for UI design. Recommend this for anyone just getting started. I thought the 10 hours was too long but I still wished it continues after seeing a lot of values this videos has to offer. Good Work Joseph 💖💖

  • @henrykmatthew3900
    @henrykmatthew3900 Год назад

    I FINISHED THE COURSE. BEST TEACHER EVER

  • @pentouchgalleria
    @pentouchgalleria Год назад

    This is the first longest video ove seen on youtube and yet o was happy i exhausted my data on it. I finished the course from beginning to the end. First wstched it on one white guys channel until from there i traced him here😅

  • @shelleytrump
    @shelleytrump 2 года назад +2

    Thank you for this amazing course. Everything is explained so very well and in a way that makes it easy to understand
    Totally worth the time spent!

  • @tonys490
    @tonys490 2 года назад

    by far the best figma tutorial ever... this man is legend .. than you sir.. please do more of new feature launches on figma and IOD design guidelines. that be great

  • @thesimpleartofchanging
    @thesimpleartofchanging Год назад

    the best tutorial for figma. (period) thank you!

  • @ezehebuka3790
    @ezehebuka3790 2 года назад

    I love the way you break everything down. I just cant stop watching and taking note.

    • @DevAndDesign
      @DevAndDesign  2 года назад

      Thanks for the feedback. I appreciate it

  • @CoreyDasilva
    @CoreyDasilva 2 года назад +2

    This is super packed. i might have been designing for a while but i am going to be learning some cool new stuff with this.. I am most grateful

  • @burakass5399
    @burakass5399 2 года назад

    I am here from free cood camp, after serching if u have an acount, at least to say txs on your Chanel by watching ads for the rest 8 hrs of my journey.

  • @loyaltyjosh3777
    @loyaltyjosh3777 2 года назад +1

    U are the best tutor i have ever come across

  • @olhaatamanchuk1940
    @olhaatamanchuk1940 2 года назад +5

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

    • @DevAndDesign
      @DevAndDesign  2 года назад

      You're welcome. I am glad I could be of impact

  • @davidasiegbu2646
    @davidasiegbu2646 2 года назад +3

    The more problem we encounter and solve, the better we become 7:33:19 - Joseph Brendan 🔥🔥🔥
    You've simplified product design and also made it interesting. Thanks, brother.

    • @DevAndDesign
      @DevAndDesign  2 года назад +1

      You're welcome. I appreciate your commendation

  • @praiseolowe
    @praiseolowe 2 года назад +1

    Wow! Wow!! Wow!!!. Thank you for the effort put into this. The tutorial is well explained and easy to follow. I have tried following several shorter version tutorial on Figma and could not get myself to finish them. This, though long, land well with me. This is due to the way you clearly explained each step. Thank you once again. (I watched the entire tutorial at speed - 2x)

  • @daniel.vela.artista
    @daniel.vela.artista 2 года назад

    Thank you so much. I don't know why auto subs are in German, but I understand your accent.

  • @naimgalib
    @naimgalib 2 года назад

    At 7:46:45 my image is not scaling with the frame. I have converted the ellipse into the frame and changed the constraints to "center" for both ellipse and Image. But when I scale the frame the Image is not scaling. [ go to 7:42:10 if you do not understand my question.]

  • @saranadaf5413
    @saranadaf5413 2 года назад

    This is just the perfact video , channel , person 🔥 i have came across , amazing man , its so hard to find a good mentor on youtube , there are some but they never share whole knowledge and you are out of this totaly 💯
    Thank you so much , now i understand why did i made so many mistakes and what are they called , please never stop teaching , we need a good mentor like you 💫✨
    We love your work Dev and Design , hats off 💯💥✨🌟🎉

  • @simmysingh563
    @simmysingh563 2 года назад +1

    Hi Joseph, thank you so much for this amazing tutorial. Looking forward to more from your channel. It is gold! God bless you

  • @raheemteslim3005
    @raheemteslim3005 Год назад

    All time best video on UI/UX design. 🙌🏽

  • @hammedtukur
    @hammedtukur 2 года назад +1

    I feel I am in a new world of Figma. Thank you for sharing.

  • @Cultifar
    @Cultifar 2 года назад +4

    This is a really elaborate tutorial, I learnt a lot, thanks Joe for all you do!

    • @DevAndDesign
      @DevAndDesign  2 года назад

      You're welcome and thanks for your time

  • @Enavieve
    @Enavieve 2 года назад +1

    Finally finished the course. It's so easy to follow. Thank you so much for all you do.

  • @akindunnidaniel
    @akindunnidaniel Год назад

    wow, God bless you for this. This is loaded!!! Thank you

  • @yewandeadeyemi5882
    @yewandeadeyemi5882 Год назад

    This is an amazing video!! Wow!!! GOD BLESS YOU IMMENSELY for this🙏🏼

  • @nobevhendahchiedza4329
    @nobevhendahchiedza4329 2 года назад

    Phenomenal teacher......keep doing the Lord’s work Dev!

  • @mavricktv985
    @mavricktv985 2 года назад

    Thank You so much for this tutorial video. Finished it and it is very detailed, God bless you sir.

  • @cryptopuncher
    @cryptopuncher 2 года назад +1

    Best complete video on figma

  • @adewolefikayo5331
    @adewolefikayo5331 2 года назад

    Wow finally finished this🙌. Was very amazing. Thank you so much for sharing ❤️

  • @thenewyorkean
    @thenewyorkean Год назад

    wow ! marvelous walk through the Figma universe, thanks for much :)

  • @gozieprince9530
    @gozieprince9530 2 года назад +2

    Nice video have seen on RUclips, slow and clear please make video on how to setup behance

    • @DevAndDesign
      @DevAndDesign  2 года назад

      Thanks for the feedback. I will make the Behance Video

    • @gozieprince9530
      @gozieprince9530 2 года назад

      @@DevAndDesign Thanks will be waiting for it

  • @TRBA_9
    @TRBA_9 2 года назад +3

    This tutorial is fire 🙌. Thank you sir.

  • @babygirlb123
    @babygirlb123 2 года назад

    thank you so much for this video, I’ve gained so much knowledge, I’m so happy. the everytime auto layout seems a bit confusing and complicated though😭 but I’ll keep learning till I get it, thank you!

  • @rolandnaazie9442
    @rolandnaazie9442 10 месяцев назад

    an amazing course i must say. Thank you so much for this tutorial

  • @alexmachined
    @alexmachined 5 месяцев назад

    I am currently at 4:01:59. This is very insightful.

  • @calebdauphin8895
    @calebdauphin8895 2 года назад +2

    Thank you so much for this now I can work on a case study. Would you be able to do a video on how to build a case study, please?

  • @fullrelaxation1446
    @fullrelaxation1446 Год назад

    Thank you! The best video on figma and well detailed

  • @javlontursunov6527
    @javlontursunov6527 2 года назад

    Full support.
    Pls make a video on how to tackle material design issues on android studio

  • @AbdulRehman-ir4dt
    @AbdulRehman-ir4dt 2 года назад

    Joseph! You are a LEGEND ❤️. Thank you for this Gold Content

    • @DevAndDesign
      @DevAndDesign  2 года назад +1

      You're welcome. Thanks for the commendation

  • @somtochiafam
    @somtochiafam 2 года назад +1

    You are the best that's all I can say.
    I wish I found this video earlier

  • @goodnesschibuzo1143
    @goodnesschibuzo1143 2 года назад

    Finally finished this class and all i can say is that this is the best online class ever, very detailed. Thank you for this.
    One problem i have is that i cant seem to get the material design to load on my laptop, does that happen to some systems?

  • @timicodes
    @timicodes 2 года назад +3

    I would rate this video a 10/10 its can stand side by side some of the figma courses on Udemy... I have a question Brendan Timestamp 5:18:38 when you wanted to increase the Button Height to 40 I don't quite understand the maths there... Pls I would appreciate if you could explain hw u added 12 to 32 to get 40px... Thanks

    • @timicodes
      @timicodes 2 года назад +1

      @@DevAndDesign I'm sorry, I still not get the maths if there's a better way you can explain this, I would really appreciate that... The font size was 14px, while the padding was initially for the 8px top & 8px for the bottom but the button initial height was 32px and but you wanted to achieve a 40px height... Pls can u explain hw you got the 4 you added to the initial 8px padding which made the new height 40px. Thanks

    • @DevAndDesign
      @DevAndDesign  2 года назад

      @@timicodes you can send a dm to the Instagram handle in the description. I'd explain through a Google Meet or something

    • @timicodes
      @timicodes 2 года назад

      @@DevAndDesign thanks would do that now

  • @thehacker645
    @thehacker645 2 года назад

    Thanks sir. I personally benefited a lot from this comprehensive tutorial. Haven't finished it yet but I'm at the last bites of it ^^. Planning to go take a look at the token design system video after that. Good luck on your career path.

    • @DevAndDesign
      @DevAndDesign  2 года назад +1

      Thanks for the feedback. I appreciate it

  • @SourabhSingh-r9o
    @SourabhSingh-r9o 11 дней назад

    at 10:00:00 why didn't you put the spacing between the icons to be auto ??

  • @Nehaaingjbdiahskab
    @Nehaaingjbdiahskab Год назад

    You Joseph just amazing teacher.
    It is fantastic 😊

  • @fedraa3967
    @fedraa3967 2 года назад

    Great, very detailed course! Thank you so much.

  • @mfirafi
    @mfirafi 2 года назад +1

    Why did you take an extra frame when making FAB where you can easily get the icon and make it an auto layout to surround it on a frame?? (time 5:40:00-5:42:00)

    • @mfirafi
      @mfirafi 2 года назад

      and another thing is why you did not make the icon middle align with the frame??

    • @DevAndDesign
      @DevAndDesign  2 года назад +2

      I Did that to make it easily understood by beginners. Due to the fact that some Icon plugins have extra elements in their Icon frames and If an auto layout is created on them those frames get scattered. This can be complex for beginners. That's why I did it that way

    • @mfirafi
      @mfirafi 2 года назад

      @@DevAndDesign ok...thanks for making it clear

  • @curious.akshat
    @curious.akshat 2 года назад +1

    Thank you thank you so much your teaching skills are really amazing. Thank you ☺️❤️

  • @Healthyliving_withChisom
    @Healthyliving_withChisom 2 года назад +2

    Thank you soo much for making this video

  • @designcoded7585
    @designcoded7585 2 года назад +2

    sir please do make it as a seperate part by part playlist , even though it has time stamps its difficult to move throught , please do make a seperate seperate playlist , really thanks great information and nice tutorial

  • @roubletrace9030
    @roubletrace9030 2 года назад

    Great tutorial! I can't imagine how on earth I could miss it.
    Please sir I'd like to join one of UX/UI classes. But first, if you don't mind, I'd like to chat with you privately.
    Thanks.

  • @odunayoolorunda8816
    @odunayoolorunda8816 2 года назад

    Thank you for this amazing video. Please I got stuck at Auto Layout. As soon as I added auto layout, my work scattered. it didn't behave how it ought to. I guess I'm missing someting

  • @TheAremoh
    @TheAremoh 2 года назад +1

    Super awesome tutorial. Thanks for this

  • @ernesto8273
    @ernesto8273 2 года назад +2

    Great video... What screen recording are you using?

  • @JenniferEvunobi
    @JenniferEvunobi 9 месяцев назад

    Thank you a lot for this video, it has helped me a lot. How do we get projects to work on.

  • @oluwatisesekumade
    @oluwatisesekumade 2 года назад

    Hello sir.. please I’m facing a challenge @ 6:59:40 when I transfer my component into my frame… it doesn’t fit into the frame. It’s wider and I don’t know how to correct that

  • @coolplay7780
    @coolplay7780 2 года назад

    sir one question
    5:00:05
    now material design does not have type size table as per screen size.
    how to check it now...
    pls pls pls help, this was really very helpful video but now the table you are showing us in video, it is missing in material design

  • @tobimiracle3581
    @tobimiracle3581 2 года назад

    Nice video and a wonderful tutorial. Honestly speaking i have learnt a lot thanks for taking your time to make this video. God bless you.

    • @DevAndDesign
      @DevAndDesign  2 года назад

      Amen and thanks for the commendation

  • @echefuprince2767
    @echefuprince2767 Год назад

    Thanks for this amazing tutorial.... Im having issues at 6.20.09 where u merged the buttom autolayout into the half auto layout... whenever i try to do it, the buttom layout goes on top of the half autolayout instead

  • @LovethAudu-nm5jx
    @LovethAudu-nm5jx 8 месяцев назад

    @DevAndDesigns
    the figma token plugins has been updated can you please post a new video on that, finding that aspect difficult to grasp

  • @oseyilijoel4021
    @oseyilijoel4021 Год назад

    Good day I have issues understanding the component and variety or properties section I’m trying to create mine but I’m not able to edit other properties 😢

  • @codeHacker693
    @codeHacker693 2 года назад

    Thank you very much!!! Absolutely helpful!

  • @josephokwudi3817
    @josephokwudi3817 2 года назад

    Good morning! I can't find the resizing property on my figma page 2: 45

  • @simonlasky1034
    @simonlasky1034 2 года назад

    i have real learnt alot from this tutorial.thanks soo for this wonderful video.But please i have a little problem with creating of styles
    if i creat styles and done with what im doing and decides to close my browser, i lost all the styles .So i want to know if its normal for that to happen or there is something im not doing right? i was think styles are something you can still keep after using it ......PLease i need help on this

  • @xeonace
    @xeonace Год назад

    Great tutorial mister...

  • @segunayomide2969
    @segunayomide2969 6 месяцев назад

    The independent button isn't showing in my figma,

  • @helenotowo6443
    @helenotowo6443 2 года назад

    Great tutorial
    I will like to ask
    Please how can one add a video to a figma project,I tried using Anima, but wasn't getting what I wanted.

  • @alex-pattison
    @alex-pattison 2 года назад +1

    Great course! Thank you!

  • @fuzzyfredy4010
    @fuzzyfredy4010 2 года назад

    Amazing video, well-detailed thank you. But please what's the difference between "material design 3 and material design 2"?

  • @stephanieedebeatu7980
    @stephanieedebeatu7980 2 года назад

    hello Joseph... i just started this tutorial video and everything has been going great till the part were you talked about Auto Layout. I tried recreating a frame with text in it like you showed in that part of the video but when i clicked on auto layout property, the whole text in the frame became scattered and disarranged. please what would be the cause of this issue?

  • @menaoweibo7661
    @menaoweibo7661 2 года назад +1

    amazing video ...so informative , thank you so much
    however i noticed my typography hierarchy on material design website does not have the numbers
    i'm a bit confused

    • @DevAndDesign
      @DevAndDesign  2 года назад +1

      Hello. The typography system got updated. Check my latest material design Video to have that sorted

  • @salonimishra9046
    @salonimishra9046 2 года назад

    I'm not getting that typography style table for different devices. Can you please help or share the link.

  • @atejacob2108
    @atejacob2108 2 года назад

    Hello Joseph, Good day. I think the material 3 design guideline has a different display from what they had when this video was made. I am having difficulties locating the typography table for line heights, letter spacing and font size. Kindly help with this. Thanks

  • @faizaazam7730
    @faizaazam7730 2 года назад

    I have an issue in tailwind project section. When I set fill container width of two sections and then group by using another auto layout then if affects their responsiveness. Because their fill container width gets changed to fix automatically .. I am just confused at these points

  • @arupde6320
    @arupde6320 2 года назад +1

    keep uploading bro .