Dear Friends, In this Figma Masterclass I’m going to show you how to create responsive web design in figma. I’ll design travel website home page Part 1 for Desktop & convert it into responsive mobile version in Part 2. In this Speed UI Design figma tutorial you’ll learn figma responsive web design for a landing page using figma Auto layout to make the page ui ux design mobile friendly so it work fine on desktop, tablet & mobile & this is the best tutorial for the figma users who struggle how to covert desktop design(responsive) into mobile.
In this UI Design tutorial im using 12 columns layout with 8×8 grid system to make the landing page design properly aligned with spacing, padding & margins in every single item to look consistent. I’m figma plugins to make the process easy with help of these plugins Unsplash, Freepik, Pexels, Beautiful shadows, Type scales, Batch styler, Vector logos, UI faces, Colour hunt.
Please drop your suggestions & feedback about this tutorial and I would be very happy if you decided to subscribe, like & share. Thank you
– For mobile responsive version please watch this tutorial part 2.
https://youtu.be/Jz51jYRB_kE
#responsive #webdesign #ui #website
===========
Please Subscribe to the UIX UNIVERSITY YT Channel:
https://www.youtube.com/c/UIXUniversity
===========
Let’s CONNECT on social media and say Hi!!
UIX Facebook: @uixdesign.me
UIX Instagram: @uixdesign.me
UIX Twitter: @uixdesign_uiux
UIX TikTok: @uixdesign
UIX Dribbble: @uixdesign
===========
Source File:
https://www.figma.com/community/file/1243486162245593034
source
good
There is no audio
Really Great guidance….GBU
No sound?
Is there a reasons why no components are made? It would make the shadow effects, buttons, icon placement with text, event cards much easier to make.
Normally, I'm supposed to like this cause you've done an amazing design but this video is too fast and I don't know where you get most of your elements from because you paste them and this is not helping me that is a beginner in design ❤.
Please checkout my Figma trial – https://youtube.com/shorts/QzitXl-CFmk?si=u-9a1zJf4JQuqwEq
Atleast add some music
We need to do this ui design Infront of client?
Subscrize done becuz u provided design file in description.🤩
amazing
no sound
It don’t have sound?
is the video contain any sound?
Great video. It's very easy for the beginners
More than cool. ❤
Great tutorial, the visuals look great. Could you by any change make another video adapting this design on Elementor?
Your email ID pls, How can I contact
You email ID pls
Great video! If you have something like this but with audio and talking about your design decisions it will be a glory
Beautiful design!
can not hear anything. No audio?
As beginner, I always create a page more than 1 hour because I don't have any ideas. But, when I see you videos, oh my god my work is too late😭 I'll keep practicing until I can create a page in a minute:")
Hi, good tutorial but not sound, not comments, not easy for beginners
It's really helpful…. voice pottu irukalam
Hi, thank you for the tutorial it's helpful, please I want to ask how to get those design you added at the end of the video.
Impressive video but can you speak please
How do you create this svg 7:31 ?
Thank you, this is so helping me to learn UI Design. Love it! 💙💙
can u tell me how you get this objects plz
I'm blown away by the attention to detail in this video. Every element of the user interface is thoughtfully designed and beautifully presented."
hello. I would like to ask a question. the margins of the home page must be respected in all other sections?
Hi, love the tutorial… Would suggest you use a Royalty free sound instead of leaving the whole video silent
Helpful video but please add sound in this video.
There is no voice? what is this?
Why the video has no sound ?
aap ui ux design bhi karke dete ho kya ?
Great one
Can u just tell me from which website do you download this map vector
Nice video but the testimonial section seem confusing. You have a slider indicator with the small circles and also have a slider indicator that has an arrow in a big circle.
Please can you be talking?
where do I find the illustration like the one with planes that you used in hero section and other patterns like the dotted ones ?
Instead of taking round circle why you use rectangle to make it round?
Please drop a video after 2/3 days, i want more like this type of video. Doing more web landing page design tutorial
That's look like a great tutorial and is a great project to practice. Love the creativity. Can i get source plzzz?
You are amazing🤍
I need source please
I have learnt alot from your videos…i want to redesign this…can i get the source file?
Great tutorial, love the shadow plugin, it makes my life easy. Making a perfect shadow was a challenging task for me. I have tried different ways but trying for a shadow like you done. Thanks for sharing plugins.
I need source plzzzz❤
You're really helping me in UI UX Design field. I found this tutorial super useful & exactly what i was looking for a lnafing page design in figma. Looking forward for next part of responsive mobile version. Keep it up!!! Thank you