Learn Website UI Design like a PRO! - Figma Tutorial

Поділитися
Вставка
  • Опубліковано 1 січ 2025

КОМЕНТАРІ •

  • @zakrullahdosti
    @zakrullahdosti 3 місяці тому +2

    Your course is very Help me Bro Thank you 🤤🥰🥰🥰

  • @aj-lan284
    @aj-lan284 2 місяці тому +2

    why don't you make such videoS anymore?😭😭😭😭 (Requirement into UI)

  • @eclipse6936
    @eclipse6936 3 роки тому +6

    Youre amazing, thank you so much, im 17 and on my journey to become a front end developer

    • @DesignPilot
      @DesignPilot  3 роки тому

      Thank you. All the best my friend

  • @angeljuarez2189
    @angeljuarez2189 2 роки тому +4

    This is the best thing I've come across in a while! Thank you SO much! The plug ins are amazing as well!

  • @bharticsenterprises250
    @bharticsenterprises250 2 роки тому

    in one word staning performance... ...... its like a rock star show. you can't take eyes

  • @Darkness_Gaming
    @Darkness_Gaming 4 роки тому +34

    It is difficult to design a website from scratch.This tutorial was really helpful especially for a beginner as me who want to understand how websites are designed and to trait inspiration from them, keep going!

  • @irina_gladysheva
    @irina_gladysheva 3 роки тому +4

    Already on the 8th minute, I got so much insight from you! Thank you so much for your video!!!

  • @vsmalpha
    @vsmalpha 4 роки тому +4

    Fantastic!! This is one of the best tutorial videos I have ever watched. Thanks a lot!

  • @hertzdesigns9166
    @hertzdesigns9166 5 років тому +2

    I’m glad there is people like you on UA-cam

  • @brentpatteson7821
    @brentpatteson7821 4 роки тому +4

    This was a video I didn't even know I needed. Thank you for providing such valuable info! Subbed :)

  • @teaspoonful973
    @teaspoonful973 4 роки тому +9

    Thank you so much! I’m just getting into UX with no background in coding, so this is great :)

  • @letmesay2035
    @letmesay2035 2 роки тому +1

    you have so much good tutorials!!

  • @anis213_40
    @anis213_40 3 роки тому +3

    Amazing tutorial ! thank you bro

  • @NavesNiche
    @NavesNiche 2 роки тому +1

    This video is gold, thank you so much!

  • @samimaakhi3180
    @samimaakhi3180 3 роки тому +1

    owwwww!just awesome tutorial ..just love it :)thank you so much ..

  • @Iamkabera
    @Iamkabera 4 роки тому +5

    It wasn't what I was looking for, until I started watching further into the video. Great Content man.

  • @rashmi_t
    @rashmi_t 4 роки тому +1

    You work is awesome. Such a life saver. Its just wowwwwwww.
    I had no idea about figma and you make it so easy to understand
    Thank you so much
    May Almighty bless you

    • @DesignPilot
      @DesignPilot  4 роки тому

      So glad to hear that. Thank you

  • @nainilnandu9039
    @nainilnandu9039 3 роки тому +1

    Can someone tell me how did he get the Graphix font ?? It is not there in my figma

  • @pratishthajoshi3153
    @pratishthajoshi3153 3 роки тому +2

    Thank you soooo much this is getting interesting 🔥🤩🙌🙌😁

  • @Uxarif
    @Uxarif 5 років тому +3

    It's a very helpful tutorial for every designer. Thank you very much!!!

  • @HAlimabushra123
    @HAlimabushra123 4 роки тому +1

    This was so amazing! I subscribed !

  • @FueloftheFire
    @FueloftheFire 4 роки тому +1

    Thank you very much brother this amazing tutorial .... Its a great tutorial💛💛💛💛

  • @muadzrosli
    @muadzrosli 4 роки тому +1

    Awesome video! I like the content presentation style. Subscribed.

  • @nguyenxuanthang9138
    @nguyenxuanthang9138 4 роки тому +1

    great instruction man! Keep up your good work, you earn my subcribe

  • @IrshadAhamed
    @IrshadAhamed 4 роки тому +2

    Really helpful video for beginners

  • @roter13
    @roter13 3 роки тому +1

    At 18:52 how did you get Figma to show you the distance between the two objects in the navbar. I don't know how to do this.

  • @SalemDabbabi
    @SalemDabbabi 5 років тому +1

    Another great tutorial, keep on you're a beast Chethan !

  • @codewithsaj9270
    @codewithsaj9270 3 роки тому +1

    Thanks ...well explained

  • @rifatrahamanrayan
    @rifatrahamanrayan 3 роки тому +1

    what a great video

  • @olanrewajubakare3790
    @olanrewajubakare3790 4 роки тому +1

    So much insight in one video. Thank you so much for this.

  • @bhuvanece07
    @bhuvanece07 4 роки тому +1

    I have watched the DP logo intro animation more than 50 times. Awesome buddy!

  • @mbuit
    @mbuit 4 роки тому +1

    Thanks for the video! I learned so much

  • @liorc.9273
    @liorc.9273 4 роки тому +1

    HI @DESIGN PILOT , GREAT VID!! can you please tell where are the settings to show/hide these red "location numbers"?

    • @DesignPilot
      @DesignPilot  4 роки тому +1

      Not sure what you mean

    • @liorc.9273
      @liorc.9273 4 роки тому +1

      @@DesignPilot for example, the red "8" in 33:50

    • @DesignPilot
      @DesignPilot  4 роки тому +1

      Hold alt or option

    • @liorc.9273
      @liorc.9273 4 роки тому +1

      @@DesignPilot amazing!

  • @dareytemy
    @dareytemy 3 роки тому

    The link to the font is not in the description

  • @bajiraosingham9495
    @bajiraosingham9495 5 років тому +3

    Full screen capture didnt work because of Lazy loading.. Meaning the content loads as you scroll down. With this kind of websites, you should first scroll down till the end and then use that plugin.

    • @DesignPilot
      @DesignPilot  5 років тому

      Oh okay. Thanks foe the info

  • @milad8436
    @milad8436 3 роки тому +1

    Thank you informative content 👍❤👍

  • @AhmetSilapov
    @AhmetSilapov 4 роки тому +6

    ıt ıs so useful vıdeo!! exactly what ı wanted to .. thanks for sharıng!

  • @mahmoudtokura
    @mahmoudtokura 4 роки тому +1

    Sweet video. I just subscribed.

  • @ciroamore2129
    @ciroamore2129 4 роки тому

    Nice videos, Subscribed!

  • @arnav_0397
    @arnav_0397 3 роки тому +1

    Its so easy but u said earlier that its for developer also for designers, I am a web developer, do I really need to learn figma, do is this really helpful to developers, cant we do it directly as a dev, I dont understand what actually is benefit of using these 3rd party software? please reply

  • @ferdousislam5433
    @ferdousislam5433 4 роки тому +1

    I am working in XD but after watching your tutorial figma also become my working tools right now!

  • @akshayagrawal484
    @akshayagrawal484 5 років тому +1

    what height to choose for elements mentioned as 100vh? What height is needed to choose while designing so the section takes the whole screen?

    • @DesignPilot
      @DesignPilot  5 років тому +3

      If your artboard is 1440px wide, then choose 900. If it's 1920px wide, then choose 1080.

    • @akshayagrawal484
      @akshayagrawal484 5 років тому

      @@DesignPilot Thanks a lot!

  • @iUmerFarooq
    @iUmerFarooq 4 роки тому +1

    Can you tell me please What size(width) of the layout should we take while designing a web layout?

    • @DesignPilot
      @DesignPilot  4 роки тому

      1440px

    • @iUmerFarooq
      @iUmerFarooq 4 роки тому +1

      @@DesignPilot what should be the size of hero section and the section down below which is consistent like testimonial, pricing etc.

    • @DesignPilot
      @DesignPilot  4 роки тому

      No size. It based on the design

    • @iUmerFarooq
      @iUmerFarooq 4 роки тому

      @@DesignPilot okay thank you.

  • @abhinavkesarwani5750
    @abhinavkesarwani5750 4 роки тому +2

    I had always used figma for designing.... My question was that should I also learn webflow to make websites are just be carry on with figma ?

    • @DesignPilot
      @DesignPilot  4 роки тому +1

      Figma is for designing. Webflow is for building real functional websites.

    • @abhinavkesarwani5750
      @abhinavkesarwani5750 4 роки тому +1

      @@DesignPilot thank you for sharing this.... I will give both a shot!!

  • @squeakycamp207
    @squeakycamp207 4 роки тому +1

    The video is really cool, but how do you delete the things in figma? I have been trying around and its just such a bad first impression, when the program doesnt even have a shortcut for deleting things. It doesnt even say that there is one in the shortcuts menu!
    If you could tell me the answer to this mystery, which is the shortcut for deleting things, then that would be AMAZING!
    Edit: Or do you just do Ctrl X to cut it out, which is basically the same as deleting, but it also copies it to your clipboard?

    • @DesignPilot
      @DesignPilot  4 роки тому

      Press delete to delete hahah

    • @squeakycamp207
      @squeakycamp207 4 роки тому

      @@DesignPilot OH MY GOD thank you so much lmao. I couldnt figure it out but thank you so much! also, your video was really nice and taught me a bit about how to go about making the design for a website. Thanks!

    • @Astralmess
      @Astralmess 4 роки тому +1

      @@squeakycamp207 I also suggest try using Ctrl + X simply because it's closer to other very common shortcuts. Ctrl + X is Cut but I find it convenient to use it instead of pressing Delete.

  • @DJalem
    @DJalem 4 роки тому +1

    This for me is best way to learn Figma. Thank you so much 👍👍

  • @praveenpsg77
    @praveenpsg77 4 роки тому +1

    Thank you so much man. appreciate it

  • @Diplooo
    @Diplooo 3 роки тому +3

    My Question Is, After all this work, i have to code all of this to create a real Website?

    • @DesignPilot
      @DesignPilot  3 роки тому

      Yeah 😂

    • @Diplooo
      @Diplooo 3 роки тому

      @@DesignPilot C'mon !? 🤨 WTF Double Job!

    • @ahmedsaeedbj
      @ahmedsaeedbj 3 роки тому +2

      @@Diplooo - Webflow brother

  • @procamerata
    @procamerata 4 роки тому +1

    Fantastic tutorial - thank you!

  • @harshajain9347
    @harshajain9347 4 роки тому +1

    hey! when I clicked on inspect did not get the option of different screens, as you're changing in tab, mobile screen. how to get that option?

    • @DesignPilot
      @DesignPilot  4 роки тому

      Some panel must have been hidden. You can google it

  • @leonenskat8532
    @leonenskat8532 4 роки тому +1

    Thank You awesome Content!

  • @ismailaouad9097
    @ismailaouad9097 4 роки тому +1

    Thank you so so much for sharing

  • @242m9
    @242m9 4 роки тому +1

    Awesome, thank you!

  • @MustaphaHamoui
    @MustaphaHamoui 4 роки тому +6

    It's a good video, but the title is a bit misleading... I'm already a web designer and I watched the video thinking it would be about how to use Figma, only to be surprised that it's mostly about how to recreate an existing website by inspecting the elements...

    • @DesignPilot
      @DesignPilot  4 роки тому +1

      Check out my latest Web Design Course for Beginners. It has everything you need to know

    • @beeenreen5954
      @beeenreen5954 3 роки тому

      by applying to copy the websites you will learn how to use figma very practicable and fast. You dont even have to copy the website 1 to 1, you can still play around and change things...Figma works btw very simliar to xD, so im wondering what kind of webdesigner you are that you cant really use figma

  • @jaikumar7875
    @jaikumar7875 4 роки тому

    Thanks for sharing the video with us. DO you have any suggestions for photography and videography websites? Is there any UI design you would recommend?

  • @thetruthsayer8347
    @thetruthsayer8347 3 роки тому +2

    Nice content. This tutorial makes designing a professional website less intimidating

    • @DesignPilot
      @DesignPilot  3 роки тому

      🙏

    • @emanuelcarmona9930
      @emanuelcarmona9930 3 роки тому +1

      I just started using figma for my job and I love it. But just been trying to learn different techniques and draw inspiration from it.

  • @ajeymuthiah8405
    @ajeymuthiah8405 4 роки тому +1

    bro graphik font is not available in figma ??/How to enable it??

    • @DesignPilot
      @DesignPilot  4 роки тому

      Download the font

    • @ajeymuthiah8405
      @ajeymuthiah8405 4 роки тому

      @@DesignPilot after downloading what we should do bro?

    • @praveenpsg77
      @praveenpsg77 4 роки тому

      @@ajeymuthiah8405 Bro seriously google how to install font bro

  • @jano3387
    @jano3387 4 роки тому +2

    Thanks for this, when choosing a frame , Is it necessary that need chose MacBook Pro size instead of Desktop size? 7.27

    • @DesignPilot
      @DesignPilot  4 роки тому +1

      Not really. But it’s pretty much an industry standard and the optimal size

  • @liorc.9273
    @liorc.9273 4 роки тому +1

    great job!! didnt understand why do we want do design on the "Smallest size"? (screen)

    • @DesignPilot
      @DesignPilot  4 роки тому +7

      If you can design the UI such a way such that it looks great on the smallest screen size, it’s easy to scale it and make it responsive for larger breakpoints. It’s very hard if you do it the other way around.

  • @Sagar-np6zc
    @Sagar-np6zc 3 роки тому +1

    THANKS A LOT SIR, THANKSSSS ALOT, SIR PLEASE UPLOAD MORE VIDEO WE WANT TO LEARN MORE FROM YOU, WE CAN'T AFFORD 10K DESIGNERS, PLEASE UPLOAD ATLEAST 1 VIDEO PER MONTH :(

  • @dannygrio
    @dannygrio 4 роки тому +1

    thank you for this!!!

  • @ferdousislam5433
    @ferdousislam5433 4 роки тому +1

    Amazing tutorial

  • @lonelykuro5731
    @lonelykuro5731 4 роки тому +1

    Amazing Intro !!!

  • @hardikkarelia3783
    @hardikkarelia3783 4 роки тому +1

    I dont know coding and as I am a beginner in Figma...is this video helpful for me?

  • @icedtea5143
    @icedtea5143 3 роки тому +1

    Figma or Adobe XD?

  • @lanapodcast8894
    @lanapodcast8894 4 роки тому +1

    You are amazing

  • @kiddygirl__
    @kiddygirl__ 3 роки тому

    Can you send me picture's link

  • @ruggeddog3103
    @ruggeddog3103 3 роки тому +5

    still waiting for the part where you teach web designing

    • @DesignPilot
      @DesignPilot  3 роки тому

      Check out my latest Figma course

  • @StrangeIndeed
    @StrangeIndeed 4 роки тому +2

    dat Chrome extensions bar tho

  • @HaifengZhu-pn3uq
    @HaifengZhu-pn3uq Рік тому +1

    helpful

  • @aravindaupadhya1411
    @aravindaupadhya1411 5 років тому

    How to charge for Branding??

  • @saykatahmed5064
    @saykatahmed5064 5 років тому +1

    Thanks

  • @JaehoonMe
    @JaehoonMe 4 роки тому

    why not new?

  • @piycreates
    @piycreates 4 роки тому +2

    Idk why but I find your lower third a bit disturbing. 1:28

  • @SHAHIDKARIMI
    @SHAHIDKARIMI 4 роки тому

    Where is Figma?

  • @weirddev
    @weirddev 4 роки тому +2

    Your intro feels like a ad

  • @graphic-nations
    @graphic-nations 4 роки тому +1

    Big Like

  • @ayazabidi7741
    @ayazabidi7741 3 роки тому +1

    One of my reason for commenting is that I saw you replying to almost everyone😂... BTW thanks for such valuable information and I have a question like can we actually design websites like this in a professional job like taking other website info and then making it from the scratch?

    • @ayazabidi7741
      @ayazabidi7741 3 роки тому +1

      I don't mean a total copy but are you getting what I am asking?

    • @ayazabidi7741
      @ayazabidi7741 3 роки тому +1

      And also you gained a new subscriber😂

    • @DesignPilot
      @DesignPilot  3 роки тому

      Yes you can.

  • @techprogramer7794
    @techprogramer7794 4 роки тому +1

    Plz sir ..do and speak a little bit slow..

  • @dareytemy
    @dareytemy 3 роки тому +1

    do not bother, I have gotten the font.

  • @DeepfriedBaby
    @DeepfriedBaby 4 роки тому +1

    jesus, the music is stressful and you talk so fast.

  • @F85-w6g
    @F85-w6g 5 років тому +4

    this is horrible, no wonder there is all this garbage "design" all over dribble. All you do is make copies of other websites.

    • @DesignPilot
      @DesignPilot  5 років тому +9

      You have no idea what you are talking about buddy. Why don't you send me your portfolio and let's see who is better. FYI, I wasn't copying websites. I was teaching a process of learning UI design.

  • @MUHAMMAD_USMAN_1
    @MUHAMMAD_USMAN_1 2 роки тому +1

    Love it dude, keep posting for Us❤‍🩹