UX/UI Design Tutorial in Figma - Design Modern Website from Scratch

[@ZKHAX]

Unbelievable, i really appreciate your hard work and Tqsmmmm😍🙌🔥

[@uxpeak]

Thank you very much for such a nice comment ❤It made our day.

This has helped me SO MUCH! 🥳

[@uxpeak]

Oh, thank you for your lovely comment Vivian! Really appreciate it! :) More exciting tutorials coming soon!

@@uxpeak no, thank YOU for the time and effort you put on this. It is very much appreciated 💜

[@uxpeak]

@ You are so kind! ❤

[@FeliciaOmotayo-ru8ni]

So detailed! I love it😚

[@uxpeak]

Thank you. We are super happy to hear that you like it :)

[@lenkakocisova133]

Great tutorial! Thank you so much

[@uxpeak]

Thank you very much :) We are really happy to hear that!

[@вѕѕ07]

awesome design 😍, Literally what an amazing and professional looking website. Plz make on wireframing and thinking process

[@uxpeak]

Hey, we are happy to hear that you liked it! :) Perhaps, we will do a new video in the future with wireframing and thinking process too. We are currently working on a new video with some really great ui design tips.

[@tabish344]

inspirations are important when you start designing for products

[@uxpeak]

Definitely! 👍

[@shamshadkhan3088]

Thanks a lot, I'm new to design and have learned a lot from this video.

[@uxpeak]

Ah, we are so happy to hear that :)

[@dominikd9436]

Love this tutorial 😍😍 This is exactly what I was looking for. Thank you uxpeak. I love you

[@uxpeak]

This is really lovely feedback, thank you

[@dominikd9436]

You are welcome, more like these please. I've joined the course as well and loving it. @@uxpeak

[@nehaashfaq824]

I am new to UI UX design field and mannn I am just in love with the tutorial 😍🤌🏻

[@uxpeak]

Oh, we are so happy to hear that 😇

[@RASTUDIO_0]

Make more videos on this topic, I am first time watching video on your channel...

[@uxpeak]

Glad that you liked it :) And welcome to the community.

[@alinalarybe3362]

Amazing Style ...just love it

[@uxpeak]

Oh, made our day. :) Glad that you enjoyed it

[@aliakram1812]

GREAT tutorial,i appreciate your hard work umaaah happy

[@uxpeak]

Thank you for your kind words :)

[@aliakram1812]

@@uxpeak 😘

[@suryatamil631]

Nice one. I gained a lot tricks and design knowledge😍

[@uxpeak]

Very happy to hear that :)

[@uxpeak]

Thank you

[@lastspoil5547]

Should I learn Figma before taking this tutorial? Also, how may hours is the complete UX/UI course you offer on your website?

[@miroslavak.3666]

Veru useful tutorial, great work 👍

[@uxpeak]

Thank you very much. We are very happy to hear that :)

[@Irfan_Aaryan07]

Hello sir if you have source code plz give me?

[@ekeneodakpo2066]

I love this. I just subscribed... Thanks

[@uxpeak]

That's awesome. Glad to have you with us :)

[@kjcao_]

this is so good!

[@uxpeak]

Thank you so much.

[@abdullahbukhari8534]

This is mind-blowing!!

[@uxpeak]

Thank you very much 💗

[@morshlab]

last 10 min video blacked, no footage plz fix it

[@uxpeak]

Thank you for pointing it out. We are on it and it will be fixed soon :)

[@ahmadfarid15]

Thank you, I like this tutorial and it adds new inspiration for me

[@uxpeak]

We are very happy to hear that :)

[@SaimorAlam]

Informative and awesome work ❤

[@uxpeak]

We appreciate your positive feedback :)

[@Rickcrafted]

This looks amazing. Is there a plugin to convert this into HTML CSS code?

[@uxpeak]

Thank you very much. Yes, there are many plugins for that. Have a look here: www.figma.com/community/tag/css/plugins. Hope this helps :)

[@Rickcrafted]

thanks@@uxpeak

[@avisionthroughchrist]

This is such a remarkable tutorial! What a beautiful site Thank you so much for sharing 🙏☀️

[@uxpeak]

Thank you for such a nice comment :)

[@Imagin8Graphix]

it's amazing but also made a video on making this website responsive kindly

[@uxpeak]

Glad that you liked it. Sure, we will consider it for the future videos.

[@aamirnaseem5672]

Excellent sir please launch UX UI course

[@uxpeak]

Glad that you like it :) The course is already available. You can learn more about it at www.uxpeak.com

[@Leochuks456]

Great video Best plugin for illustration

[@uxpeak]

Thank you. Happy to hear that you enjoyed it :)

[@asmaahassan6628]

Great work

[@uxpeak]

Thank you. :)

[@RichardUmeh-cl6ie]

This video has been so helpful, Thank you very much I'll like to remake the design in my own creativity Where can i upload it when am done, so that you can see my creation?

[@uxpeak]

Hi Richard. Super happy to hear that you found the video helpful. We would definitely love to see your creation. Send us an e-mail at [e-mail] :)

[@RichardUmeh-cl6ie]

@@uxpeak Thank you so Much😊 I truly am grateful, God bless you🙏🏻 I'll notify you right away once am done I'm so excited 🤭

[@RichardUmeh-cl6ie]

​@@uxpeakHi UxPeak I've completed my Redesign and just sent you an email with the details I'll love to hear your feedback & thoughts on my work Looking forward to your response ☺️

[@elahemirzaee-mf3fz]

awesome ,please make more design

[@uxpeak]

Thank you, we will. We've just released a new video!

[@morningquotesenergy]

Great tutorial for beginners ❤❤❤

[@uxpeak]

Motivated to hear that :) Thank you for watching

[@arifnazar2547]

incredible. loved it

[@uxpeak]

So happy to hear that :)

[@mayureekoay6558]

Thanks a lot for this great video, it's very helpful!

[@uxpeak]

Very happy to hear that :)

[@asadmarwat6724]

Thanks for creating such great video.

[@uxpeak]

Great to hear that you enjoyed it. Thank you for watching.

[@MissonBonicetpro]

I learned a lot Thanks Uxpeak !

[@uxpeak]

:) So happy to hear that, thank you

[@amanmirza-o6r]

please upload more videos like this.....

[@uxpeak]

Thank you. Let us know what specific video would you like to see next and we can make it happen :)

[@webapplicationsengineer]

will I ever be this good 🤔

[@uxpeak]

Oh, thank you. Definitely, everything can be learned. :) You just need to want it enough.

[@DashingChannel]

Amazing content

[@uxpeak]

Glad that you liked it :)

[@junaidchauhan1216]

Thanks for video

[@uxpeak]

Pleasure. Thank you for watching ❤

[@rezaulkarimsajid007]

amazing design. how to download the file?

[@uxpeak]

Hi, thank you. We are super happy to hear that. You can download the file here: uxpeak.gumroad.com/l/juquh

[@TheSopk]

how you create the intro with laptops with your design?

[@mirutza21]

What is the difference between Premium and VIP course? Thanks!

[@uxpeak]

Hi. Thank you for your interest in the UX/UI Design Mastery Course. The main difference is that in the VIP package you will receive customised feedback from one of our senior product designers with 5 plus years of experience on projects you complete in the course, plus your portfolio.

[@samueladeyeye3085]

Nice tutorials @uxpeak I'm unable to download the source file from the link you dropped. Would you mind sending to me? Thanks

[@uxpeak]

Thank you. Happy to hear that you like our tutorials. Write us through live chat at www.uxpeak.com and we will do our best to help you with this. :)

[@MAbdullahHashmani]

its super cooool i love it

[@uxpeak]

Ah, thank you :)

[@Web-ProFusion]

Bro your intro is awesome how to create this please tell❤

[@uxpeak]

Thank you very much ❤We are happy to create a separate tutorial for that! :)

[@Web-ProFusion]

@@uxpeak yes bro please create full tutorial thank you❤️

[@jimarrafi5881]

How did you make this intro? Which software or website you used ?

[@uxpeak]

We used Adobe After Effects and Adobe Premiere Pro + some paid templates from the Envato. Hope this information helps :)

[@ad_mastermind1313]

Bro intro is beautiful how to create please asked me❤

[@uxpeak]

Thank you :) Appreciate it

[@ioannisme7495]

beautiful❤

[@uxpeak]

Thank you very much :)

[@holyshiet787]

Why 4 and not 12 column grid?

[@ThePathshaker]

Great

[@uxpeak]

❤

[@SUGAYOSHIHIDE99DAIME]

Can I do something similar in the figma app version?

[@uxpeak]

Yes, this tutorial was done in Figma :)

[@Anushkai1]

Super❤

[@uxpeak]

Glad that you liked it :)

[@mkbusiness3561]

where do you find this mockup pleas

[@uxpeak]

Hi. You can find it here uxpeak.gumroad.com/l/juquh

[@UIdrafts]

thank you

[@uxpeak]

You are welcome :)

[@Bbx222]

Says files failed to import why is that

[@uxpeak]

Hi! It's Amanda here, and I'm happy to help with that. You'll need to download it and then upload it to the Figma files. While uploading, please wait until the upload is complete. It's quite a large file, so it can take some time. Ensure you have a good internet connection when doing so. If you are still having problems feel free to reach out through the live chat on our website www.uxpeak.com. I hope you will be able to import it :)

[@MdSihab-vw4un]

thank you so much sir, i love it

[@uxpeak]

We are very happy to hear it :) Thank you for watching.

[@TobiAgara]

You did a very beautiful 😍 website i want to do something similar to this how did you get you image is it in the description please reply back

[@uxpeak]

Hi, thank you so much: ) You can find the images on Envato but it's paid. Good websites for images are pexels.com or unsplash.com, they have a lot of free images. Hope this helps :)

[@TobiAgara]

@@uxpeak thanks bro

[@RadekSusil11]

When I have everything ready, the responsiveness is also set. I still don't know how to export the whole design and then upload it to the web. I see everywhere, elementor, siter or framer, which are paid and still don't upload the whole thing and I have to design it from scratch. Do you have any tips and advice on how to conclude and export?

[@sakshi8721]

I am not able to download the file.. because of discount code..what is code to the download the file..😅

[@heidardotdev]

great

[@uxpeak]

Thank you 🙂

[@chadgtr34]

what about the mobile version?

[@uxpeak]

In this video we haven't focused on the mobile version, but when designing a website you want to make sure that you design mobile version too! :)

[@chadgtr34]

@@uxpeak can i sponsor the next video ?

[@Bilalcodingstudio]

Please how can I download those image

[@uxpeak]

Hi. You can download the free source file here :) uxpeak.gumroad.com/l/juquh

[@hrazamemon4040]

How can you make slide show

[@uxpeak]

Might do another tutorial for it in the future.

[@anyahiya4669]

recommend it

[@uxpeak]

Thank you very much :)

[@anyahiya4669]

@@uxpeak delighted to hear

[@warehouse2c2]

how we can find the resources images??

[@uxpeak]

You can find the source file to this project here: uxpeak.gumroad.com/l/juquh. Once you download the file you can find links to images used :) Hope this helps.

[@righttalks5386]

I am unable to download this figma file due to location issue and it shows message of "sorry, this item is not available in your location". So kindly share the figma link of this design.

[@uxpeak]

Ah sorry to hear that you are having issues with it. Have you tried to download it from this place? uxpeak.gumroad.com/l/juquh

[@righttalks5386]

@@uxpeak yes

[@uxpeak]

@@righttalks5386 We see. We would love to help you with that. One thing you could try that could work for you is to use a VPN when downloading the file, if it is a location issue.

[@warehouse2c2]

how we can find images ? tell me the websites

[@uxpeak]

Answered on your previous comment :)

[@poemsatbay]

the downloaded file is not opening. can someone provide me the downloaded file. the

[@uxpeak]

It should be working. Make sure that you are uploading it to Figma correctly.

[@seharsheikharshad7861]

cant i just get the images without buy the source code?

[@uxpeak]

You should always use free to use images or have license to use them. We don't recommend using images without the permission.

[@DEOXICS]

This is mot a responsive website when i try why ?

[@uxpeak]

Responsiveness was not included in the video, but your website should be responsive :)

[@arjunjacob1505]

@@uxpeak can you make a follow up video showing how to make this website responsive on figma?

[@uxpeak]

@@arjunjacob1505 It's a great idea, we will consider creating a responsive version for this one or something completely new. :)

[@alinalarybe3362]

But how I Get source files free of cost

[@uxpeak]

uxpeak.gumroad.com/l/juquh use the link above and at the checkout enter 0$ :)

[@ad_mastermind1313]

bro this figma file not downloading please help

[@uxpeak]

Hi. Write us through live chat at www.uxpeak.com and we will do our best to help you with this.

[@lander18167]

why the assets only imge? i cant find the logo

[@uxpeak]

Hi. Have you downloaded the asset from our gumroad link? It should not be just an image. :)

[@RyanBrando-g8p]

14:38

[@frvnca]

and the interactions_

[@uxpeak]

Would you love to see a video with interactions?

[@PansyMarcia-p5r]

Brown Kenneth Robinson Deborah White Paul

[@TinaTina-xz3mg]

😍👍❤

[@uxpeak]

💗

[@varunsinghrathore653]

I do understand the importance of providing us with resources, but it feels like everything has been spoon-fed to us. For future videos, it would be better if users were encouraged to learn on their own, instead of giving them everything in their hands.

[@zombeeplayer9550]

rip web designer 👌👌👍👍

[@uxpeak]

:)

[@Cos3D]

Is this ai voice

[@長谷川雄太-b6e]

Walker Carol Moore Barbara Davis Margaret

[@JavierWarren-q8d]

Martin Paul Wilson Betty Martin Paul

[@RohitSormaes]

Martin George Davis Michael Lewis Betty

[@GreenDevBabe]

Sorry guys. I won't buy anything. I wasted toooooo much type on finding images.

[@uxpeak]

Completely understand, finding the right images takes time, thank you for watching.

[@lastspoil5547]

@@uxpeakaren’t the images in this project included in the figma source file?

[@uxpeak]

@@lastspoil5547 You are correct, thank you! Image links are included in the free source file, but not the images itself.

[@andrealiptakova9168]

Amazing 🎉

[@uxpeak]

❤