⚡Make a Professional Website UI Design in Figma - Figma Tutorial (Hindi)

👉 Register for UI/UX Design workshop for FREE: web.growthschool.io/DND
👉 100% Discount for first 100 people 🔥
👉 Become the top 1% by learning and increasing your earning potential 🔥
Hey everyone in this Figma tutorial we will learn to create a clean and fresh website UI design in Figma I will take you over each and every step in detail so sit back and enjoy and get ready to learn something new today!
⚡Download Figma for Free: psxid.figma.com/bpmjxc
⚡Learn Figma in 20min: kzread.info/dash/bejne/eKyOqK2Ml9PLcsY.html
✨Download Free Project File - rb.gy/w7w2v
🎁My Transitions Pack:
(Indian Users) - www.dopemotions.com/product-page/content-creator-bundle
(Foreign Users) - dopemotions.gumroad.com/l/contentcreatorbundlev1
--
🔵Other Helpful Figma Tutorials:
10 Tips to work 10X Faster in Figma: kzread.info/dash/bejne/YmGZztqjlazNgtI.html
Design Beautiful Websites in Figma with These UI Tips: kzread.info/dash/bejne/aZl6xruGnJmZe7A.html
Figma UI Design Tutorial: kzread.info/dash/bejne/rKuiuKSuc9vOnpc.html
Figma Tutorial: Nike Website UI Design: kzread.info/dash/bejne/kZuMj86wqbCyp6w.html
Figma UI Design Tutorial: Website UI Design in Figma: kzread.info/dash/bejne/X6GWu6OjZcvcfNY.html
Create Frosted Glass Icons in Figma: kzread.info/dash/bejne/h6l-3MRrmc3bZrQ.html
🟢 My After Effects course is out now!
www.dopemotions.com/courses
--
▪️ Contact
For business, inquiries email me here: nikhil@dopemotions.com
Website: dopemotions.com
Thank you
#FREEworkshop #Growthschool #BecomeTop1%

Пікірлер: 184

  • @NikhilPawarr
    @NikhilPawarr9 ай бұрын

    👉 Join Growthschool workshops for FREE: web.growthschool.io/DND 👉 100% Discount for first 100 people (Reshare this with your friends who will need this ❤) 👉 Become the top 1% by learning and increasing your earning potential 🔥 🌟 Growthschool has already taught more than 800,000 students and helped thousands of learners to grow in their careers. ✅ Join the workshop today and start your journey to become top 1%

  • @rohit_vaishnav

    @rohit_vaishnav

    9 ай бұрын

    Facing submission error

  • @mjawwad073

    @mjawwad073

    8 ай бұрын

    Nikhil Try to Make Tutorial on How to Make Wireframes in Figma or any UI Design Tool.

  • @Ammar_J
    @Ammar_J9 ай бұрын

    Kal mene apki figma wali saari playlist khatam ki or soch rha tha k ab dhoondo koi or designer jo or sikha sake thank god apki video agayi love you

  • @GamingGuruImMortaL
    @GamingGuruImMortaL8 ай бұрын

    You can do basic arithmetic operations(+, -, *, /) in text input boxes(height, width, x and y coordinate etc) in figma and to find center of a frame in figma just divide the corresponding measurement(height or width) by 2. I hope this helps people who are new to figma🙂

  • @BeanStalkUXUI
    @BeanStalkUXUI9 ай бұрын

    You Can try Pressing the Alt Key while selecting the frame/box etc. and hover the mouse cursor to know the pixel distance.

  • @Sagarika_here
    @Sagarika_here9 ай бұрын

    Bohot bohot cool lagta hai aapke tutorials follow karke ...I have created few stylish projects applying your methods ... and that's it everything going great ❤😊😊thanks alot by the way may hamesha may aapke figma tutorials k liye wait karti hu ...kuch new project pay kaam karne k liye ...here aaj v may beth gayi 😂apko follow karke khudke idea lagake new kuch banane ka ... we all have fun while designing ❤🎉

  • @jisnukalita
    @jisnukalita8 ай бұрын

    Nikhil bro, except for the snapping or guide, I got a way out of your problem. To your problem create a horizontal straight line in Figma, first, press 'L' to activate the line tool. Then, while holding the SHIFT key, drag your mouse horizontally. After that, select both the frame and the line by clicking on the background frame in the layer panel while holding the control button. Finally, you can achieve center alignment by clicking on the "Center Align" option in the properties panel on the right side, or simply use the keyboard shortcut "Alt + V" for a quick center alignment.

  • @hmasheikh8285
    @hmasheikh82859 ай бұрын

    To find Center, I mostly divide the width Or height by 2. suppose wdth is 1080, then I will write 1080/2 on width panel. Then it will automatically set it into half.

  • @user-it5dl4km4u
    @user-it5dl4km4u9 ай бұрын

    Great , I'm waiting for your more Figma content. Please add more to your Figma playlist, we will love it.

  • @jsaugat_
    @jsaugat_9 ай бұрын

    Impressive, I was waiting for you more figma content. Please add more to your Figma playlist, we will love it.

  • @sazalsarkar2130
    @sazalsarkar21309 ай бұрын

    Really Excellent Tutorial Boss. May God Bless You ♥

  • @abdulazeem5927
    @abdulazeem59275 ай бұрын

    Just use the layout grid section to make margins, rows or columns, that is a good design habit and of course you can also see the center point as well.

  • @RohitGupta-bk3mc
    @RohitGupta-bk3mc9 ай бұрын

    Thank you so much brother 🤗 Aap itna ache se explain karte ho Great 💯

  • @user-ic5wn4wt2n
    @user-ic5wn4wt2n8 ай бұрын

    This is an Amazing tutorial. I really appreciate your work. 👍

  • @blurrygirl661
    @blurrygirl6619 ай бұрын

    To find center there is red line suggestion center if we expand rectangle (make sure your snap is on)

  • @jihadrahman6208
    @jihadrahman62089 ай бұрын

    Wonderful video , good quality, good content & love you Nikhil Dada ❤️❤️❤️

  • @budhrajkumar2587
    @budhrajkumar25879 ай бұрын

    It really very helpful for Me.. thanx nikhil Bhai for this very knowledgeable video❤

  • @anythingsomething8025
    @anythingsomething8025Ай бұрын

    thank you bhaiya aapki wajah se ab me figma achhe se use kar pa rahi hu

  • @shubhamtokas7977
    @shubhamtokas79779 ай бұрын

    I've noticed you make a rectangle on text to make buttons instead select text and click shift+ A to make auto layout as frame you can adjust space between text and whole frame also, it will save a lot of time. And great design btw

  • @saamira86

    @saamira86

    6 ай бұрын

    thanks, I must say I got to know something new today

  • @saistachhipa3053
    @saistachhipa30539 ай бұрын

    For typography in ui design , aap 4 ya 5 ke multiplication use kar sakte hai bcs jo pixel grid use hoti hai wo always divided by 2 hoti hai in web and mobile both that's why , and try not to go below 16/14 , and for banner me Jo button hai you can try black button , because login and pre product seems same , I think one should have that attention to check the product , hope this helps ❤

  • @surajgupta6515

    @surajgupta6515

    9 ай бұрын

    honestly thoda complex lga.. though I'm new to ui ux but typography in general mere liye thoda nya h

  • @dhruvvashist6947
    @dhruvvashist69479 ай бұрын

    Sir from where can we get the vector minimal images like the electric scooter in this project. Or how can we create such images. ?

  • @user-nl3bf2vz3u
    @user-nl3bf2vz3u9 ай бұрын

    Love ❤ this creative tutorial

  • @darkovitorovic1244
    @darkovitorovic12448 ай бұрын

    Can you tell what type of glasses are you wearing in this video, name a specific model please? thanks in advance

  • @designsrs
    @designsrs8 ай бұрын

    Nice work, but there's a better way to design using Figma, especially when it comes to buttons, grids, and alignments. It makes a developer's life easier and improves the design process overall. Still, your content is great, and you've made smart choices with colors and contrast. Keep it up!

  • @ahmarshahab73
    @ahmarshahab737 ай бұрын

    NICE TEACHING, THANKS A LOT

  • @LalitaKumawat-ko8kr
    @LalitaKumawat-ko8krАй бұрын

    For center Select frame and rectangle And then go to auto layout Then wrap and align right

  • @gokugaming9048
    @gokugaming90489 ай бұрын

    After long time figma but stillllllll osmmmmmmmm booom eye-catching 🔥🥵

  • @theuniversejustbreaks
    @theuniversejustbreaks7 ай бұрын

    What buttons u click to select the elements one by one

  • @aakritikhanduri8370
    @aakritikhanduri83703 ай бұрын

    Got alot tips from yu 1) the shadow should not be totally black 2) the font size if Yu took 14 then the range is in even like 12 or 16 3) the style of font not more than 2 Thanks for the tips

  • @nikunjpandya549
    @nikunjpandya5492 ай бұрын

    Just do simple arithmetic here to find center (screen height/2). 4:36

  • @souvikbhattacharyya3438
    @souvikbhattacharyya34388 ай бұрын

    Aap ko age kisi rectangle ka half janna hai to usko frame height se match krke uska height ko divide 2 kr shakte ho. jaise 982 hai idhar to udhar aap direct likhdo 982/2. Vo automatic half calculate krlega.

  • @bilalrasheed8272
    @bilalrasheed82726 ай бұрын

    Bro you can use layout grid (rows or columns ) to find center

  • @coderanas
    @coderanas7 ай бұрын

    Kuch raham karo Frontend Developer par😂

  • @NasrinSultanaLipi-yh6vq

    @NasrinSultanaLipi-yh6vq

    2 ай бұрын

    😂

  • @Travelsandmore407

    @Travelsandmore407

    Ай бұрын

    Frontend developer chor ho gaye h 😅😅😅 isliye ye ho raha h

  • @sanjeevgupta9472

    @sanjeevgupta9472

    22 күн бұрын

    UiUx designer hi front end wale ko design banake deta hai taki vo systematically develop kre website ko.

  • @muzammalrana571

    @muzammalrana571

    10 күн бұрын

    Bhai developement chor k designer e bn jaty

  • @designwithabir
    @designwithabir9 ай бұрын

    It is very asthetic no doubt. But is it practically user friendly or not? Suppose when it will practically be implemented how it will look in mobile version?

  • @maulikmakwana5758
    @maulikmakwana57583 ай бұрын

    bro from where we could find images which you are using in figma projects?

  • @user-iz7sv9fq5f
    @user-iz7sv9fq5f7 ай бұрын

    aap project banane k liye kon c side use karte hai ?

  • @sudeepsaha391
    @sudeepsaha3918 ай бұрын

    4:48 you can directly do calculation where inputs the dimension ✌✌

  • @Eren_yeager77
    @Eren_yeager777 ай бұрын

    bro where you got that scooter componenet

  • @devenderkumar8937
    @devenderkumar89378 ай бұрын

    how can i downlaod that scooter image like what these type of images are called??

  • @Sagarika_here
    @Sagarika_here9 ай бұрын

    Aur intro mast lagta hai .. I do vibe with this

  • @AkshitBisht01
    @AkshitBisht018 ай бұрын

    Bhai kya baat h kya clear sumjatay ho Thankyou so much bhai or bhai mujay basic se figma ki vedio dekhni h apko to kese dekhu

  • @shankar66
    @shankar663 ай бұрын

    Last me jo shadow diya ye shadow browser me kaise dikhega? Browser me to sirf frame k andar k elements dikhega

  • @vikramgupta1404
    @vikramgupta14045 ай бұрын

    Sir apne " Iconsax Icon Setby Iconduck" ye plugin kese run kiya plz Btado SIr

  • @tanukoshti6152
    @tanukoshti61522 ай бұрын

    Thank you so much sir, this video is really helpful to me 😊 , I saw your video for the first time and after 5 minutes I subscribed to your channel., again thank you sir, I request you sir, make more videos about UI design, figma tips, idea, color theory and more... 😊

  • @ammartahir7851
    @ammartahir78516 ай бұрын

    is project me jo iner circle h wo Main Rectangle k andr kaisy krna h ?

  • @shreerajghorpade9878
    @shreerajghorpade98789 ай бұрын

    @NikhilPawarr to know the centre, see the height of the frame, eg here the frame is of 982, So now select the rectangle and put height as 982/2 you will get the exact half the height as that of the frame

  • @studyhub1512
    @studyhub15127 ай бұрын

    Awesome bro .... bro ye logo or scooter wali image kaha se li apne ?

  • @btswattpad-ps7xe
    @btswattpad-ps7xe5 ай бұрын

    Where can we get these types of vectors from sir Nikhil?

  • @neeleshgaur8424
    @neeleshgaur84249 ай бұрын

    Sir, graphic designer ke liye laptop kon sa acha hoga, 35,000 ke budget mein

  • @samratjikadara4028
    @samratjikadara40287 ай бұрын

    Sir how to download and where to download this bike type 3d images ya components object's?

  • @acnorr
    @acnorr9 ай бұрын

    Where do you get these high quality graphics, illustrations and images?

  • @Explorewithshagor
    @Explorewithshagor9 ай бұрын

    A Lot Helpful Videos

  • @aditivyawhare8056
    @aditivyawhare80569 ай бұрын

    I've problem with opening the project file could you tell me how to do that

  • @Yuvraj_27
    @Yuvraj_278 ай бұрын

    bhaiya aapne jo electric scooter ki picture lagayi hai esi tarah ke picturs hame kahan se mil sakte hai

  • @fahadazhar801
    @fahadazhar8018 ай бұрын

    please upload more of these figma tutorial videos

  • @jagadishkittu1920
    @jagadishkittu19205 ай бұрын

    i have downloaded project file but it is not working how to make it work, can u pls help me

  • @NINJACODER-ht2rr
    @NINJACODER-ht2rr4 ай бұрын

    Bhai plz muje koi batao ki me front language sikhu ya fir ui ux desginer

  • @Shama12870
    @Shama1287013 күн бұрын

    Sir hamne figma me design krna to sikh rahe hae or bht kuch aap ne sikhaya is ke liye thanks. But is ko kaise dilever krte hain or clint ko app me kaise dilever krte hae as a freelancer bataye

  • @sherry.mughal
    @sherry.mughal9 ай бұрын

    Bro teach us complete auto layout , responsive design too ❤

  • @ajithkumar23798
    @ajithkumar237988 ай бұрын

    Hi bro I watched your video and copied your same design and modified it slightly for mobile. and thanks

  • @ShubhamPandey-th4ox
    @ShubhamPandey-th4ox5 ай бұрын

    Figma sirf framework aur design ke liye hai ya isko internet par post bhi kar sakte hai?

  • @advanced-developers
    @advanced-developers5 ай бұрын

    I built complete design watching the tutorial. I really enjoyed and learned a lot. thanks Nikhil

  • @NikhilPawarr

    @NikhilPawarr

    5 ай бұрын

    Glad it helped

  • @anuragghosh8419
    @anuragghosh84193 ай бұрын

    Thanks you vii❤

  • @TheUmersharif
    @TheUmersharif18 күн бұрын

    Nikhil, I have registred. why it is asking to use watsapp web?

  • @Leonard_15
    @Leonard_159 ай бұрын

    Love From Bangladesh Sir ♥️

  • @Coding_Tricks771
    @Coding_Tricks7715 ай бұрын

    -20:24. Sir I am a student learning figma too. Here you asked how to get center. So there in the right panel's top there alignment options with that you can get center. At first i aslo get confused about center. I haven't telled fully

  • @Lakramusic-BehindTheSeeN
    @Lakramusic-BehindTheSeeN9 ай бұрын

    i have to learn graphics design.. Where should i join

  • @user-to1fv9um9z
    @user-to1fv9um9z7 ай бұрын

    Can you tell me the name of the bike?

  • @zakatechnology9964
    @zakatechnology9964Ай бұрын

    How to use Figma design website in my shopify store?

  • @uifry
    @uifry9 ай бұрын

    Amazing !!

  • @anandtdevadas1285
    @anandtdevadas12854 ай бұрын

    From where can we find such Scooter png from?

  • @AkshayVinchurkar
    @AkshayVinchurkar9 ай бұрын

    You can do math operations in figma so if the height is 860/2 figma will give you half. I learn after effects from your videos 😊 I have been a Designer for more than 8 years now. If anyone has questions around Visual Design I am available on adplist for mentorship sessions.

  • @QuantumCanvas07

    @QuantumCanvas07

    5 ай бұрын

    As a beginner web developer should I be moving to figma without making my raw CSS strong? It seems like it would take years but I get a lot of confidence after building projects from scratch.

  • @MudassirHussainD
    @MudassirHussainD9 ай бұрын

    Design wise its a great tut. But In the way you make it is not a right approach... For example the way you make menu and buttons is not a good way instead you can use auto layout feature of figma to make responsible buttons menus and even you can make the whole page responsive.. You are a great designer and I really like your videos ❤

  • @TOONTREK_9999
    @TOONTREK_99996 ай бұрын

    where we find photo of your work which look great

  • @codenine
    @codenine8 ай бұрын

    Can you make a video on exporting this project as HTML and CSS?

  • @Afsharocksss
    @Afsharocksss8 ай бұрын

    hi used autolayout n constraints in design

  • @vineetsingh2308
    @vineetsingh23084 ай бұрын

    Is there any job role in pigma

  • @vidhyadhar64
    @vidhyadhar64Ай бұрын

    Nice design and good video.. Best wishes..

  • @NikhilPawarr

    @NikhilPawarr

    Ай бұрын

    Thank you so much

  • @joyjain3111
    @joyjain31112 ай бұрын

    good✨

  • @user-nl3bf2vz3u
    @user-nl3bf2vz3u9 ай бұрын

    Sir UI UX men grid system samjhaye. Alignment men problem ati hai decision kese lun Koe Kuch bol raha to koe Kuchh. Hm ap sy seekhna chahten hen.

  • @amalangaonkar75
    @amalangaonkar756 ай бұрын

    Very Interesting design

  • @antifragile4681
    @antifragile468128 күн бұрын

    Personal portfolio using figma plz. For backend developer

  • @mrkammytv
    @mrkammytv14 күн бұрын

    Is this responsive?

  • @sakshirawat296
    @sakshirawat2963 ай бұрын

    Can you give figma file of the same?

  • @anamshaikh4330
    @anamshaikh43303 ай бұрын

    Hi Nikhil - your Vedio was knowledgeable- could you please provide one more Vedio on how to create a website with figma as we see on Pinterest it’s quite mesmerising- thanks

  • @tarunpatel4591
    @tarunpatel45919 ай бұрын

    Intazar ki gadi Puri Hui🥺🔥

  • @fahad-riaz-edits
    @fahad-riaz-edits9 ай бұрын

    Hi nikhil bro aik video coffee poster pr bhi bnao figma mein jo k dekhny mein bohat amazing ho glassmorphism effect bhi use kiya ho us poster mein plz.

  • @Web0001
    @Web00014 күн бұрын

    aesi images kha se download kre??

  • @anildhaka2195
    @anildhaka21959 ай бұрын

    sir figma to learn kr liya but clients kase project deta h please tell me

  • @faizfarooqi3810
    @faizfarooqi38107 ай бұрын

    i understand your lecture

  • @kirtijain8506
    @kirtijain85069 ай бұрын

    Pls make more Figma tutorial and animation also

  • @Irshad12231
    @Irshad122319 ай бұрын

    Bahut hi accha tha

  • @abhi-ss1ug
    @abhi-ss1ug9 ай бұрын

    It's not happening how you are coping the color code it's not happening in my figma the same problem also occurred before so give me some solution sir by the way you have amazing speaking sir and voice also awesome

  • @fatimafayyazfatimafayyaz6510
    @fatimafayyazfatimafayyaz65105 ай бұрын

    Bhot piyara

  • @pankajchakraborty414
    @pankajchakraborty4149 ай бұрын

    bro when will you launch the after effcts pro course????????????????????????????????????

  • @nikhilpakhloo
    @nikhilpakhloo8 ай бұрын

    How to use this in website?

  • @sahilparmar5350
    @sahilparmar53509 ай бұрын

    Sir koi figma par koi app kaa full project pe video banao pls ❤

  • @rushilaggarwal514
    @rushilaggarwal5142 ай бұрын

    Sir Figma banane ke baad usko website paar kaise laye?

  • @suryasahi9450

    @suryasahi9450

    9 күн бұрын

    Usko code karke

  • @theconceivable
    @theconceivable9 ай бұрын

    bhai yr figma me autoframe, variable, components ye sb ko kaise use krte hai... iska bhi video tutorial lao😇

  • @devendrakumar7970
    @devendrakumar79709 ай бұрын

    Bhai figma prototype par bhi ak video bna do ❤

  • @vedantpatil6486
    @vedantpatil64869 ай бұрын

    Amezing

Келесі