Learn how to use Figma to create an awesome landing page

Рет қаралды 104,569

4 жыл бұрын

Check out Designmodo's Startup: designmodo.com/startup/
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.com/
Weather icon - thenounproject.com/search/?q=... created by Berkah Icon ( thenounproject.com/berkahicon/ 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.kevinpowell.co/newsletter
---
Help support my channel
Get a course: www.kevinpowell.co/courses
Buy the t-shirt: teespring.com/stores/making-t...
Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 106

@preeve4061 4 жыл бұрын

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.

@iUmerFarooq 4 жыл бұрын

Now you're coming on the Road 👌👌 We also need to know about Designing. Thank you 😊 I'm waiting for some more like that!

@R0ckKing 4 жыл бұрын

This is perfect timing. Just yesterday I was trying to find a good Figma walkthrough!

@gothicwave7761 4 жыл бұрын

I love how you seem to be enjoying the process. Everything about your approach is inspiring.

@anastasiyak.1977 2 жыл бұрын

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!

@JennyMind 3 жыл бұрын

I think you are one the best instructors who can explain complex things easily for people. Thanks a lot.

@minstreet_studio6265 4 жыл бұрын

Honestly Figma saves time, Thanks Kevin Powell I respect you there. I've learned some things there.

@GrantHawkey 4 жыл бұрын

Yep I've been using Figma for a while now, and like helping others get started on it. So awesome!

@mohammedezzinehaddady7252 2 жыл бұрын

super cool design Kevin, thank you so much for all what you are doing, keep doing good and stay safe !

@yanuar1420 2 жыл бұрын

Thank you. lots of great tips. And the way you present it, seems nonchalant but it shows that you know your field very well

@digigoliath 4 жыл бұрын

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.

@fox_massi1366 3 жыл бұрын

subscribe please

@ohhellothere1111 4 жыл бұрын

thanks for your videos:) I'm currently making my portfolio website and design is the hardest part for me. this vid helped a lot

@aci25tv 4 жыл бұрын

Thank you so much for such a great tutorial. I learned a lot.

@AnthonyMorant 3 жыл бұрын

am learning now. Not a master but dummy getting a hang on it. Appreciate your help with this videos.

@KyleMerl 4 жыл бұрын

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!

@sonnybrown4758 2 жыл бұрын

That was a lot of fun. I learned more here than I did in a course I bought.

@gmoksh 4 жыл бұрын

loved the walkthrough!

@sirisiri2416 3 жыл бұрын

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

@khaledlebiar1530 2 жыл бұрын

again, thank you very much. YOU ARE the amazing one!

@delfinaferrari4553 3 жыл бұрын

Amazing tutorial! Thank you!

@KevinPowell 3 жыл бұрын

Glad it was helpful!

@shaziakanwal909 3 жыл бұрын

thanks paul its amazing

@crousdioll 4 жыл бұрын

Nice, thank you!

@sheneshperera 4 жыл бұрын

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!

@KevinPowell 4 жыл бұрын

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.

@GCom0 3 жыл бұрын

Thanks Kevin!

@javariakhan1680 3 жыл бұрын

Really informative video!!

@ne9835 4 жыл бұрын

Thanks for the video!!!!

@s.a6668 4 жыл бұрын

Congratulations on getting the KZfaq award. You are a great teacher

@beka_tl7763 2 жыл бұрын

Thank you !

@ThiagoVieira91 4 жыл бұрын

Awesome tutorial as always Kevin. How about making a mobile version of this page? Most users will never see this desktop version.

@KevinPowell 4 жыл бұрын

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.

@ThiagoVieira91 4 жыл бұрын

@@KevinPowell Would be a great video Kevin. While we are here: a video coding the page would be a perfect complement. ;)

@brianpatrick817 3 жыл бұрын

great tutorial thorough indeed learned a lot Thanks Kevin

@mukhtarakinloye7958 3 жыл бұрын

Getting the links to the pictures used would be great

@kingkhi8931 4 жыл бұрын

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

@KevinPowell 4 жыл бұрын

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

@amyp.575 4 жыл бұрын

Thank you so much!! I literally just uninstalled DX because I didn't like it. This looks SO MUCH better!!

@KevinPowell 4 жыл бұрын

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 👍

@fox_massi1366 3 жыл бұрын

subscribe please

@ZhengCheng 4 жыл бұрын

start at 02:51, result 35:35

@MartinGarnett 4 жыл бұрын

I’m really interested to see how you handle an image and text layout like that on mobile. Will you be coding this up?

@KevinPowell 4 жыл бұрын

I will be and I'll make sure to make it responsive 👍

@Stellaxmixie 2 жыл бұрын

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)

@KevinPowell 2 жыл бұрын

I think I got it from unsplash, searching on the site itself

@BucurIonNiculae 3 жыл бұрын

I use Figma. Nice video.

@himbary 4 жыл бұрын

Figma is crazy good and performant

@MrJayspeaks 3 жыл бұрын

A little bit of OCD on display with the weather icon. It looked great originally!

@rehanali1949 3 жыл бұрын

24:49 "Relationship between the text and this guy" You know, I think something happening here.

@deepeshsingh7717 4 жыл бұрын

Kevin, I am still learning web development. Do you think using pre-made templates will not allow me to completely learn web development.

@KevinPowell 4 жыл бұрын

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

@trinkel8 4 жыл бұрын

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?

@KevinPowell 4 жыл бұрын

This is design only, as is XD. No code comes out, you just hand off to the dev at this stage

@trinkel8 4 жыл бұрын

Kevin Powell so, basically the same as laying something out in illustrator or photoshop but with better web design tools. Got it. Thanks Kevin!

@nandhakumarvelumani142 3 жыл бұрын

Sir also do a video on the html and css part of it

@KevinPowell 3 жыл бұрын

I already did :D

@pskrpo2476 3 жыл бұрын

How can I export this file as html and css to view on web browser? or should I have to write the code again?

@owilliammotta 3 жыл бұрын

is there any platform that i can take a figma template and convert it to a website automatically without code?

@wilsonfujinaga1717 2 жыл бұрын

this is nice and all that I guess but what about using grids? what happened to that?

@evgeniyartemyev8188 2 жыл бұрын

Hi! What about mobile screen size ?

@TheShubham67 3 жыл бұрын

What are the ubuntu shortcuts?

@wgalloPT 4 жыл бұрын

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...

@KevinPowell 4 жыл бұрын

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.

@maleekyaqob 2 жыл бұрын

in 17:05 how do you copy? what do you press on the keyboard? bcuz (ctrl+C > ctrl+V) doesn't work

@redpadweb 2 жыл бұрын

Try ctrl + d

@avatr7109 3 жыл бұрын

How do we add 2nd Page to this???

@ortizclarissa0225 Жыл бұрын

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.

@ishmartishtiaq371 2 жыл бұрын

I don't understand can we get code of layouts in figma cause what makes a webpage is some code In HTML CSS right?!

@ishmartishtiaq371 2 жыл бұрын

kzfaq.info/get/bejne/nrdzhbhozcDQlHk.html

@ishmartishtiaq371 2 жыл бұрын

This is the next part : )

@gbbowler 4 жыл бұрын

Does Figma export the CSS?

@KevinPowell 4 жыл бұрын

You can get some CSS from it, but it's not enough to build the full page from it

@BMikel 4 жыл бұрын

is figma a free software? should I buy a license?

@dullalboss5309 4 жыл бұрын

its free

@KevinPowell 4 жыл бұрын

Free, though they do have paid plans too. Depends on what you need 👍

@sonarsphere 4 жыл бұрын

Free version is limited only to 3 projects...

@avoidspamplease1680 Жыл бұрын

How do you link this to your html file

@fashionfabric8902 3 жыл бұрын

How to upload this on wordpress please tell me

@KevinPowell 3 жыл бұрын

This is just design software, it doesn't produce code. Going to WP would take a fair bit of work.

@egliselessemeurs4981 Жыл бұрын

I have mp3 format s and i want to make it puncNice tutorialer plzz help buddy

@postnatalmotcoach1006 2 жыл бұрын

How would you then hand this off to client for her to use in her instagram feed for clients to contact her

@TungNguyen-uu9br Жыл бұрын

Sere the great..

@coderlady_ 4 жыл бұрын

and then you need to code it?

@KevinPowell 4 жыл бұрын

Yup, this is just a design tool, won't output any code

@jasonsiu1441 3 жыл бұрын

are you going to teach us how to do copy the text like that in 7:54 or not ?

@join_devhub 2 жыл бұрын

GUY IS CONFUSED

@RobinJohnson 3 жыл бұрын

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!

@scdighital 4 жыл бұрын

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.

@SALMANKHAN-zz4gi 4 жыл бұрын

nobody : me : designing is easy 28:33 : ahem ahem me : :O

@Cookieglue 2 жыл бұрын

figma balls

@calvinraldajo8565 3 жыл бұрын

is this basic or not

@JohnMcCormack 4 жыл бұрын

2 mins 50 seconds before you get to the actual content is just too much, Kevin

@himbary 4 жыл бұрын

I agree, I was wondering if I clicked the wrong video

@KevinPowell 4 жыл бұрын

Sorry. I won't have any sponsors for a little while after this one, should help get started faster 👍

@JohnMcCormack 4 жыл бұрын

@@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.

@KevinPowell 4 жыл бұрын

@@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.

@JohnMcCormack 4 жыл бұрын

@@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.

@Radman_web_design 2 жыл бұрын

your speaking it s so fast

@wgalloPT 4 жыл бұрын

love, but you talk too fast...

@KevinPowell 4 жыл бұрын

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.

@kazzbeast5132 2 жыл бұрын

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.