Learn how to use Figma to create an awesome landing page
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- Check out Designmodo's Startup: designmodo.com...
Figma is an awesome design tool. In this video, we'll look both at some design tips and tricks for when you're putting a web design together, as well as look at some of the cooler features of Figma.
The noun project: thenounproject...
Weather icon - thenounproject... created by Berkah Icon ( thenounproject... 0
#ui #design
--
Come hang out with other dev's in my Discord Community
/ discord
---
Keep up to date with everything I'm up to
www.kevinpowel...
---
Help support my channel
Get a course: www.kevinpowel...
Buy the t-shirt: teespring.com/...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
How my browser refreshes when I save: • How to automatically r...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![From design to code - HTML & CSS tutorial [ part one ]](http://i.ytimg.com/vi/hQCRU7hZldE/mqdefault.jpg)
![From design to code - HTML & CSS tutorial [ part one ]](/img/tr.png)
Now you're coming on the Road 👌👌
We also need to know about Designing.
Thank you 😊 I'm waiting for some more like that!
start at 02:51, result 35:35
Honestly Figma saves time, Thanks Kevin Powell I respect you there. I've learned some things there.
This is perfect timing. Just yesterday I was trying to find a good Figma walkthrough!
lol when you said "L for line" it reminded me of the movie Dodgeball... "L for love"
But anyway, it's helpful to see the "trial and error" you go through when designing. Good video!
Thank you Kevin Powell. I'm sold on your teaching technique and ability. A+++ for demystifying and explaining things that other teachers blow by in these tutorials and your classes. The suggestions you make (like looking up shortcuts on Figma and then using IMMEDIATELY ) are simple yet brilliant.
Thank you so much for such a great tutorial. I learned a lot.
24:49 "Relationship between the text and this guy"
You know, I think something happening here.
Thanks Kevin!
Amazing tutorial! Thank you!
Glad it was helpful!
A little bit of OCD on display with the weather icon. It looked great originally!
What's the point in using Designmodo's Startup 4 if you can't upload custom fonts? Also their pretend chatbox doesn't reply for a DAY!
Getting the links to the pictures used would be great
I struggle with learning how to design. Since I start reading about ux and ui its helping me be a better web developer i actually like design more when will the course be on scrimba the ux ui
Which course on Scrimba? Mine has been there for a few months now 😁
If you mean for UI/UX I know Gary Simon if DesignCourse is working on it now. I imagine it'll be out soon
Awesome tutorial as always Kevin. How about making a mobile version of this page?
Most users will never see this desktop version.
Oh for sure! I could definitely do a video on that. I agree, but for the most part, large screen design has a lot more decisions to make than for mobile, so I tend to focus there. But it's important to take it all into account for sure.
@@KevinPowell Would be a great video Kevin. While we are here: a video coding the page would be a perfect complement. ;)
thanks for your videos:) I'm currently making my portfolio website and design is the hardest part for me.
this vid helped a lot
Thanks for the video!!!!
I don't understand can we get code of layouts in figma cause what makes a webpage is some code In HTML CSS right?!
th-cam.com/video/hQCRU7hZldE/w-d-xo.html
This is the next part : )
I have mp3 format s and i want to make it puncNice tutorialer plzz help buddy
No explanation of how to get an image into Figma. Assumed drag & drop but can't see and that's not teaching me anything about Figma. Then image isn't the right size so is adjusted - no commentary as to how. Laughs at deleting image then brings it back. No idea how either was done. Constant moving & resizing with no mention of how. How was that button created from the first? No explanation. Very frustrating for anyone looking to learn Figma.
I think you are one the best instructors who can explain complex things easily for people. Thanks a lot.
How would you then hand this off to client for her to use in her instagram feed for clients to contact her
the demos. I don't know if tNice tutorials is a clue, but when i pause or stop the soft, there's an echo wNice tutorialch very slowly fades out.
Hi Kevin! Is the photo of the ski resort searchable in the unsplash plug in in figma? or did you got it from a different website and pasted or uploaded it in the frame? (sorry newbie here)
I think I got it from unsplash, searching on the site itself
Kevin, thanks a lot for your videos on Figma!
I was afraid of Figma for several years due to its PS-like complexity with all the layers and staff, so I just used free-hand wireframes whenever I needed a sketch. Your videos bring so much ease into the process, and all of a sudden Figma doesn't look that scary anymore!
Kevin, I am still learning web development. Do you think using pre-made templates will not allow me to completely learn web development.
Design templates, or html ones? Nothing wrong with using templates, but it's good to be able to make things from scratch as well. If you aren't a designer, no harm in using design templates
Sir also do a video on the html and css part of it
I already did :D
Instant LIKE. Yay, love that you are covering Figma. I am really looking forward to doing some fun & cool things with it!! Thank you Kevin! You are my HERO.
subscribe please
in 17:05 how do you copy? what do you press on the keyboard? bcuz (ctrl+C > ctrl+V) doesn't work
Try ctrl + d
This was great, been searching for "landing page case study" for a while now, and I think this has helped. Ever heard of - Doniden Landify Pages - (do a google search ) ? Ive heard some amazing things about it and my co-worker got cool success with it.
I’m really interested to see how you handle an image and text layout like that on mobile. Will you be coding this up?
I will be and I'll make sure to make it responsive 👍
GUY IS CONFUSED
How can I export this file as html and css to view on web browser? or should I have to write the code again?
this is nice and all that I guess but what about using grids? what happened to that?
Gracias por este
So wait...you setup the page and then what? does figma also gives you the function for buttons and links? or it is just for plain design...
Just design :). If you look at my latest 2 videos, I'm taking this and coding it up.
You can create multiple artboards and create links across them, but it's really just for previewing purposes, so devs and other team members will understand how it should work and where things need to go.
again, thank you very much. YOU ARE the amazing one!
am learning now. Not a master but dummy getting a hang on it. Appreciate your help with this videos.
Hi!
What about mobile screen size ?
Great Video! thanks :D
By the way concerning the zoom, you can use the old photoshop way too
with pushing Z and holding it, and for zoom out Z+alt. For me very fast and easy! :D
is there any platform that i can take a figma template and convert it to a website automatically without code?
What are the ubuntu shortcuts?
That was a lot of fun. I learned more here than I did in a course I bought.
Thank you. lots of great tips. And the way you present it, seems nonchalant but it shows that you know your field very well
I love how you seem to be enjoying the process. Everything about your approach is inspiring.
2 mins 50 seconds before you get to the actual content is just too much, Kevin
I agree, I was wondering if I clicked the wrong video
Sorry. I won't have any sponsors for a little while after this one, should help get started faster 👍
@@KevinPowell Oh, no need to go to that, Kevin.
I appreciate the work you put into these and your need to make a living, so sponsorship is understandable. But, in all fairness, this one did go on a bit.
@@JohnMcCormack I'm bad at keeping things short 😂
Its not because you said it either, I always want to keep them to a minimum anyway.
@@KevinPowell Hah! Not to worry, I've been accused of rambling on at times :)
Looking forward to the next one Kevin.
Your insights and your particular take on using CSS keep me coming back.
super cool design Kevin, thank you so much for all what you are doing, keep doing good and stay safe !
Yep I've been using Figma for a while now, and like helping others get started on it. So awesome!
How do we add 2nd Page to this???
I use Figma. Nice video.
thanks paul its amazing
is this basic or not
Really informative video!!
Figma is crazy good and performant
Thank you !
Hey Kevin! Great vid, Figma is something I never wanted to get into because I doubted it's performance. I use Photoshop for designs if I really have to. A question I'd like to ask is, how would you approach responsiveness? Given the position of the widget, how would you adapt the widget's position in mobile navigation without sacrificing its functionality? I would love to see you talk about this in your design to code series!
I already coded it up, so you can see in part 3.
And if you're worried about performance, Figma (and XD) are much better. You can have tons of artboards open with no hit. Nice and smooth.
loved the walkthrough!
Nice, thank you!
Sere the great..
How to upload this on wordpress please tell me
This is just design software, it doesn't produce code. Going to WP would take a fair bit of work.
Does Figma export the CSS?
You can get some CSS from it, but it's not enough to build the full page from it
I haven’t used Figma or other tools like XD or sketch, but I am curious about them. One thing that no one seems to show is what comes out the back end once you are done with a design? It kind of boils down to how do these differ from, say, Dreamweaver which everyone trashes?
This is design only, as is XD. No code comes out, you just hand off to the dev at this stage
Kevin Powell so, basically the same as laying something out in illustrator or photoshop but with better web design tools. Got it. Thanks Kevin!
Thank you so much!! I literally just uninstalled DX because I didn't like it. This looks SO MUCH better!!
They both have their strong points. There are some things I prefer from it, and some that I like better in XD, but Figma overall is a great 👍
subscribe please
love, but you talk too fast...
Sorry about that. YT does have controls to slow things down. Some people say I talk too slowly, so it's hard to find a balance.
are you going to teach us how to do copy the text like that in 7:54 or not ?
and then you need to code it?
Yup, this is just a design tool, won't output any code
is figma a free software? should I buy a license?
its free
Free, though they do have paid plans too. Depends on what you need 👍
Free version is limited only to 3 projects...
figma balls
nobody :
me : designing is easy
28:33 : ahem ahem
me : :O
great tutorial thorough indeed learned a lot Thanks Kevin
your speaking it s so fast
figma balls
What's wrong with Figma?
How do you link this to your html file