Learn Website UI Design like a PRO! - Figma Tutorial
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- 🚀 Get 2 free months of Skillshare Premium & watch my Course for free:
skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
In this Figma Tutorial, you are going to learn how to design UI for websites like a Pro. We will take a look at a really cool way of learning website design. By looking at the back end code of a website design, we can actually learn the best to design UI for websites. I will also show you a few Chrome Extentions that you can use to improve your workflow when designing UI for websites.
Basics of UI Design for Mobile Apps:
• Basics of UI Design fo...
Learn UI Design for Mobile Apps like a PRO!:
• Learn UI Design for Mo...
Chrome Extensions:
1. WhatFont - chrome.google.com/webstore/de...
2.ColorZilla - chrome.google.com/webstore/de...
3. Image Downloader - chrome.google.com/webstore/de...
-----------------------------------------
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Twitter : / kvschethan
Facebook : / designpilot
Mail : designpilot21@gmail.com
Portfolio : behance.net/chethankvs
Instagram : / design_pilot
Discord: / discord
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#webdesign #uidesign #uxdesign - ภาพยนตร์และแอนิเมชัน
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 4](http://i.ytimg.com/vi/e7Oqqo90x_w/mqdefault.jpg)
This is the best thing I've come across in a while! Thank you SO much! The plug ins are amazing as well!
This was a video I didn't even know I needed. Thank you for providing such valuable info! Subbed :)
Thank you so much! I’m just getting into UX with no background in coding, so this is great :)
Good to know
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!
👍
Youre amazing, thank you so much, im 17 and on my journey to become a front end developer
Thank you. All the best my friend
I’m glad there is people like you on TH-cam
Oh wow. Thank you
you have so much good tutorials!!
Already on the 8th minute, I got so much insight from you! Thank you so much for your video!!!
Thanks so much Irina
Fantastic!! This is one of the best tutorial videos I have ever watched. Thanks a lot!
🙏
It's a very helpful tutorial for every designer. Thank you very much!!!
This video is gold, thank you so much!
I have watched the DP logo intro animation more than 50 times. Awesome buddy!
👌
This was so amazing! I subscribed !
Thanks for the video! I learned so much
So much insight in one video. Thank you so much for this.
👍
Amazing tutorial ! thank you bro
Awesome, thank you!
in one word staning performance... ...... its like a rock star show. you can't take eyes
Thank you soooo much this is getting interesting 🔥🤩🙌🙌😁
Thank you very much brother this amazing tutorial .... Its a great tutorial💛💛💛💛
Another great tutorial, keep on you're a beast Chethan !
Thanks Bro
Design Pilot 😉
It wasn't what I was looking for, until I started watching further into the video. Great Content man.
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
So glad to hear that. Thank you
what a great video
Thank You awesome Content!
Thanks ...well explained
This for me is best way to learn Figma. Thank you so much 👍👍
🔥🔥
Thank you so much man. appreciate it
✌️
Fantastic tutorial - thank you!
Your welcome
Thank you informative content 👍❤👍
Nice videos, Subscribed!
great instruction man! Keep up your good work, you earn my subcribe
Thanks
owwwww!just awesome tutorial ..just love it :)thank you so much ..
🙏
😍😍😍
Awesome video! I like the content presentation style. Subscribed.
Thanks
thank you for this!!!
👍👍
I am working in XD but after watching your tutorial figma also become my working tools right now!
🙌
Thank you so so much for sharing
👍
Really helpful video for beginners
👍
Amazing Intro !!!
Thanks
ıt ıs so useful vıdeo!! exactly what ı wanted to .. thanks for sharıng!
God to hear that!
Thanks
Amazing tutorial
⚡️
helpful
Sweet video. I just subscribed.
Thanks
Big Like
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?
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.
Oh okay. Thanks foe the info
great job!! didnt understand why do we want do design on the "Smallest size"? (screen)
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.
Nice content. This tutorial makes designing a professional website less intimidating
🙏
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.
The link to the font is not in the description
You are amazing
Thanks
Can someone tell me how did he get the Graphix font ?? It is not there in my figma
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?
Some panel must have been hidden. You can google it
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...
Check out my latest Web Design Course for Beginners. It has everything you need to know
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
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 ?
Figma is for designing. Webflow is for building real functional websites.
@@DesignPilot thank you for sharing this.... I will give both a shot!!
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 :(
what height to choose for elements mentioned as 100vh? What height is needed to choose while designing so the section takes the whole screen?
If your artboard is 1440px wide, then choose 900. If it's 1920px wide, then choose 1080.
@@DesignPilot Thanks a lot!
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
dat Chrome extensions bar tho
😂
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.
Press Alt
still waiting for the part where you teach web designing
Check out my latest Figma course
I dont know coding and as I am a beginner in Figma...is this video helpful for me?
Yea
HI @DESIGN PILOT , GREAT VID!! can you please tell where are the settings to show/hide these red "location numbers"?
Not sure what you mean
@@DesignPilot for example, the red "8" in 33:50
Hold alt or option
@@DesignPilot amazing!
Thanks for this, when choosing a frame , Is it necessary that need chose MacBook Pro size instead of Desktop size? 7.27
Not really. But it’s pretty much an industry standard and the optimal size
Can you tell me please What size(width) of the layout should we take while designing a web layout?
1440px
@@DesignPilot what should be the size of hero section and the section down below which is consistent like testimonial, pricing etc.
No size. It based on the design
@@DesignPilot okay thank you.
My Question Is, After all this work, i have to code all of this to create a real Website?
Yeah 😂
@@DesignPilot C'mon !? 🤨 WTF Double Job!
@@Diplooo - Webflow brother
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?
Press delete to delete hahah
@@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!
@@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.
How to charge for Branding??
No idea
Can you send me picture's link
bro graphik font is not available in figma ??/How to enable it??
Download the font
@@DesignPilot after downloading what we should do bro?
@@ajeymuthiah8405 Bro seriously google how to install font bro
Your intro feels like a ad
Where is Figma?
Figma or Adobe XD?
Figma
why not new?
Plz sir ..do and speak a little bit slow..
do not bother, I have gotten the font.
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?
I don't mean a total copy but are you getting what I am asking?
And also you gained a new subscriber😂
Yes you can.
Idk why but I find your lower third a bit disturbing. 1:28
Okay
jesus, the music is stressful and you talk so fast.
No problem with speech speed
this is horrible, no wonder there is all this garbage "design" all over dribble. All you do is make copies of other websites.
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.
Love it dude, keep posting for Us❤🩹