Make Your Web Design Responsive in 10 Minutes | Figma Tutorial
In this video, I'm going to show you how to make your web design responsive in Figma using Auto Layout and Constraints in just 10 minutes.
Remember to subscribe: bit.ly/3US49pf
Download the practice file from here:
bit.ly/3z9dcde
👉 Become a UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
👉 Get my FREE UI/UX Design e-book here:
bit.ly/4fuWnNI
📸 Instagram: / uiux.arash
Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.
Пікірлер: 479
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX
@ob5804
9 ай бұрын
Hi. So far, I've only looked at the header. The question is, after making three elements of remponsvv, should they be grouped back or how?
@indiamarispereira6944
6 ай бұрын
😂😂😂😂😂 do you folks do not know about media queries? Are you Indians?
This is the most straightforward and concise figma tutorial I’ve seen. I’m definitely subscribing and turning on notifs now. Thank you Arash ❤
@DesignWithArash
Жыл бұрын
Glad it was helpful! Thank you so much. Welcome aboard.
@izzatinnadaaljannah885
11 ай бұрын
me too
You thought through all the possible issues that a beginner will face and then provided solutions for each of them. This is what a great teacher looks like. Thank you so much for your effort.
@DesignWithArash
4 ай бұрын
No problem. Glad it was helpful!
Not sure how I'm just discovering this channel cos I'm binge watching your tutorials. User experience well done! And how you put relevant follow up videos at the end. Not distracting popups mid video. That's some user psychology. Great content all round! Subscribed.
@DesignWithArash
Жыл бұрын
Thank you so much. Glad you found them helpful. Welcome to the channel.
Arash, you're the MAN! Not only the directions "do this, do that", but also WHY you should do it that way. Thanks much for your informative video! Cheers
@DesignWithArash
10 ай бұрын
No problem. Thank you.
Hi Arash! I just wanted to say how I appreciate your work. These tutorials are so helpful.
@DesignWithArash
Жыл бұрын
You are most welcome. I appreciate it.
This is such an excellent video and your teaching style is concise yet straightforward. Thank you so much Arash!
@DesignWithArash
Жыл бұрын
You're very welcome! Glad you liked it. Thank you very much.
Finally, someone finally thoroughly taught auto layout and responsiveness…Thank you so much, I’m trying to save this video for later
@DesignWithArash
Жыл бұрын
No problem.
Absolutely amazing. Thank you!
Thank you so much for this, Arash. You make it so simple!
@DesignWithArash
Жыл бұрын
My pleasure!
You are my favourite designer on KZread. Easiest to understand, thank you!!!
@DesignWithArash
10 ай бұрын
Thank you so much. I'm so happy to hear that.
Whoa. This is one of the most helpful 10 minute tutorials I've ever seen. This is absolutely excellent.
@DesignWithArash
Ай бұрын
Glad it was helpful! Thank you so much.
This is the best and most straightforward figma video I've ever seen, thanl u man!!
@DesignWithArash
Жыл бұрын
Thank you very much. Glad you liked it.
Thank you so much! I’m just starting out in Figma, and this tutorial was extremely helpful! I subscribed to your channel and this will definitely be one of my first stops when I’m looking for excellent tips!
@DesignWithArash
8 ай бұрын
No problem. Glad it was helpful!
Thanks for the tutorial Arash, it was great. The way you explain the flow was so easy to understand. It will really help in saving lot of time. Keep making such tutorials.
@DesignWithArash
Жыл бұрын
No problem. Glad you found it helpful.
As a beginner, your contents are just the best! As time passes I’ll get to this level.
@DesignWithArash
Жыл бұрын
Thank you so much. I'm sure you will.
omg ive seen many tuts about spacing and i like them but it's very detailed and here's urs it's so detailed and u made it easy to understand, thankyou so much for sharing this video man, it rlly helps me alot and understand the spacing better.
@DesignWithArash
Ай бұрын
Thank you. Glad it helped!
The best and top explanation of responsive design in all of KZread... respect
@DesignWithArash
11 ай бұрын
Thank you.
I'm just getting started and your videos are so helpful! Thank you!
@DesignWithArash
Жыл бұрын
You are so welcome!
I used to create responsive designs manually till now, I didn’t know the power of constraints and auto layout, now it will definitely save a lot of my time, Thank you 🙏🏼
@DesignWithArash
Жыл бұрын
No problem. Glad it helped!
@onyemowojonu2685
Жыл бұрын
Same with me
@adzimahatteh9309
8 ай бұрын
I recently did the same to my project. I just couldn't understand constraints until now
I've just started in UX design struggling with things I don't even know I don't know cuz it's a whole new world. Then I found your channel. Super super helpful and easy enough for this newbie to learn. Thank you sooo much!! Hit subscribe 10 sec ago ✨
@DesignWithArash
7 ай бұрын
Glad you liked the content. Welcome to the channel.
Awesome lesson! Soooo helpful 💚💚💚
@DesignWithArash
Жыл бұрын
Thank you. Glad it was helpful!
Excellent video, clear and concise. Many thanks! I'm subscribing!
@DesignWithArash
Жыл бұрын
Thank you so much. Welcome aboard.
This was a life saviour video. Thank you so much Arash! Great Content
@DesignWithArash
Жыл бұрын
No problem. Glad it helped.
i have been trying to make my websites responsive for the past 2 days and this is the only tutorial that helped me, thank you so much!
@DesignWithArash
Жыл бұрын
I'm glad it helped. You are welcome.
@wik_wal
Жыл бұрын
Yesss, I finally understand what is responsive design...so I hope now to complete my task and finish the design course. You have a new suscription. Thank you
@DesignWithArash
Жыл бұрын
@@wik_wal I'm glad to hear that. Welcome to the channel.
Arash he is the man life saver.God bless you
So easy to follow! Great tutorial for beginners like me.
Really well thought and detailed video. Grateful for the content. Thank you Arash!!
@DesignWithArash
11 ай бұрын
My pleasure!
your videos such a blessing! Thank you so much for them!
@DesignWithArash
5 ай бұрын
Thank you so much. Glad you liked them.
Very concise and well explained video. Thank you for this amazing tutorial!
@DesignWithArash
Жыл бұрын
No problem. Thank you so much.
You explained this Figma responsive tutorial perfectly and concisely. This is going to save me a load of time, thank you so much. Also, I respect that you didn't ask for a like or follow until the end of your video. This is the first video I've watched on your channel and I'm about to subscribe now.
@DesignWithArash
Жыл бұрын
Thank you very much. Glad you liked it. Welcome aboard.
Man, this is very helpful, my design now works on my teammate's widescreen.
subscribed, this has single handedly boosted my figma experience!
@DesignWithArash
6 ай бұрын
Glad to hear that.
This was awesome! Super helpful as I always had fear of responsive design..
@DesignWithArash
Жыл бұрын
Glad it was helpful! Thanks.
Tks Arash. For creating this tutorial. You made it easy. I hope you will dont stop creating. Experting more videos from u r side ❤
@DesignWithArash
Жыл бұрын
No problem. Thank you.
Thank you for this sweet and short tutorial!
@DesignWithArash
7 ай бұрын
Glad it was helpful!
this video is so helpful! way better than what my school provided us! thank you!
@DesignWithArash
8 ай бұрын
No problem. Glad it helped.
You are amazing. Thanks for the video 😊😊
Awesome ! I can solve problem thanks to this lesson. Thank you SO MUCH !
@DesignWithArash
Жыл бұрын
No problem. Glad it helped!
آرش دمت گرم!آموزشت بی نظیررر و بسیار برای بنده مفید بود
@DesignWithArash
Жыл бұрын
ممنونم. لطف داری.
This helped me immensely. Thank you so much for sharing ❤️✨
@DesignWithArash
10 ай бұрын
No problem. Glad to hear that.
Thank you Arash,You speak very fluently and I have benefited a lot from your teachings❤
@DesignWithArash
11 ай бұрын
No problem. Glad to hear that.
This is a great channel! ... Congratulations on such an outstanding achievement. ...
@DesignWithArash
5 ай бұрын
Thank you very much.
This is such an excellent tutorial. Beautiful design by the way
@DesignWithArash
8 ай бұрын
Thank you so much.
damet garm arash jan kooli estefade kardam❤
@DesignWithArash
Жыл бұрын
Ghorboonet Mohammad Javad jan.
That was really helpfull. I seen other videos of same concepts but your video is a way better than the others. Thank you so much.
@DesignWithArash
9 ай бұрын
No problem. Glad it was helpful!
I'm so happy to found you, you have a nice way to explain. Your voice is easy to hear (English is not my mother tongue). Thank you for share your knowledge :)
@DesignWithArash
Жыл бұрын
Thank you very much. I'm glad to hear that.
Thank you, dear Arash, It was great video
@DesignWithArash
Жыл бұрын
No problem. Glad you liked it.
Hi, I'm from Tokyo, Japan. What a great Content!!! I can understand about Figma really easily ! The best tutorial I've seen!! Thank you so much for the wonderful tutorial.
@DesignWithArash
Жыл бұрын
Hi. Welcome to the channel. Glad you found the content helpful.
thank you for sharing, Arash it really helpful!
@DesignWithArash
7 ай бұрын
No problem. Glad it helped.
Awesome ! thanks for this responsive design video, Please share more of your skills like these..
@DesignWithArash
Жыл бұрын
No problem. Sure.
This is really nice. Excellent teaching Arash ♥♥
@DesignWithArash
Жыл бұрын
Glad you liked it. Thank you so much.
Your videos are very useful and provide lots of information. I have received lots of help after watching this post, please continue to share this kind of information. Thank you.
@DesignWithArash
Жыл бұрын
Glad to hear that. Thank you.
Brother the way you explained is brilliant 💯 very useful 💯
@DesignWithArash
Жыл бұрын
Glad it was helpful! It's very kind of you.
THANK YOU ARASH
Thank you Arash, it was clear, understandable, and useful🤩💫
@DesignWithArash
7 ай бұрын
No problem. Glad you found it helpful.
oh thank so much , u help me a lot ❤
@DesignWithArash
7 ай бұрын
No problem. Glad it helped.
Many thanks for you ,. please make a lot of videos for responsive web design
Good job, loved this lesson
@DesignWithArash
Жыл бұрын
Glad you liked it! Thanks.
Hats Off to You! Your Content is really AWESOME! I'm also learning from you SkillShare Courses :)
@DesignWithArash
Жыл бұрын
Thank you so much. It’s so nice of you. I’m glad you liked my content.😊
You are amazing my friend, I am a fan of Adobe XD and watching these tutorials makes me wanna switch
@DesignWithArash
7 ай бұрын
Thank you so much. Glad it helped.
Amazing tutorial uncle,thank you very much..this gonna make my workflow faster
@DesignWithArash
10 ай бұрын
Glad you liked it.
Thanks for the tutorial, I really appreciate
@DesignWithArash
8 ай бұрын
No problem.
Its just Amazing, very easy to undestand your explanation, thank you so much. 😀
@DesignWithArash
4 ай бұрын
No problem.
Thank you for this helpful tutorial :)
@DesignWithArash
Жыл бұрын
You're very welcome!
best explanation! clean and ocncise
@DesignWithArash
Жыл бұрын
Thank you so much.
To be honest u really explained it amazing I just started design webpage and I don't know what is responsive Design but u nailed it Thank you very much bro.... ❤️
@DesignWithArash
8 ай бұрын
No problem. Glad it helped.
Wow i love to watch your videos
Very helpful tutorial. Thanks!
@DesignWithArash
Жыл бұрын
Glad it was helpful!
Thanks, this is really helpful
@DesignWithArash
Жыл бұрын
Glad it was helpful!
Thank you so much, it was easy to understand
@DesignWithArash
10 ай бұрын
Glad to hear that.
just in time and just whats needed. TY XD
@DesignWithArash
11 ай бұрын
Nice to hear that.
Easy and Fast, Thank you!
@DesignWithArash
11 ай бұрын
No problem.
It i soo good, damn. So fast and understandable. Thank you
@DesignWithArash
9 ай бұрын
No problem. Glad it was helpful!
It is just easier to create a separate mobile version on figma and less time consuming. Appreciate your effort
@DesignWithArash
Жыл бұрын
That's not the point. We should design for the desktop, tablet, and mobile anyway but we don't design for only one mobile device. We make these frames responsive because there are different devices with different dimensions in the market, and our design should adapt properly.
@anitazaman4073
Жыл бұрын
So far, that’s been FE people work to ensure responsiveness and design only needs to provide breakpoints. Which is I also personally find easier to just create manually, especially in complex dashboards and systems where you will have text size and placement changes. This said, if you’re building a landing with a direct export to Anima or Webflow even, the constrains will defo help
Very helpful, Thaaaanks
@DesignWithArash
Жыл бұрын
No problem.
This is a game changer for me as i'm working as developer :)
@DesignWithArash
11 ай бұрын
Glad to hear that.
Very interesting video!👍
Thanks Sirr Love Yoy ....😍
@DesignWithArash
3 ай бұрын
Thank you.
niceee tutorial thankyou!!
@DesignWithArash
Жыл бұрын
Glad you liked it!
Thank you for this.
@DesignWithArash
4 ай бұрын
No problem.
Thank you so much
awesome.Thank you very much
@DesignWithArash
Жыл бұрын
You are very welcome!
Question about responsiveness: When it says it is responsive, does the spacing between elements (cards, buttons, title and text, etc.) remain the same size or vary proportionally?
Hi and really thanks Arash.
@DesignWithArash
Жыл бұрын
Hi. You are welcome.
thank you so much 😍😍😍
@DesignWithArash
7 ай бұрын
No problem.
nice ! thanks bro
@DesignWithArash
Жыл бұрын
No problem! Thanks.
THANK YOU VERY MUCH!!!!👌
@DesignWithArash
Жыл бұрын
No problem.
این ویدیو بهترین ویدیویی بود که درمورد ریسپانسیو کردن طراحی دیدم.ممنونم محتوای فوق العاده ای بود😍I supposed you can be an Iranian so I wrote in Farsi cause my English is not good enough😁
@DesignWithArash
Жыл бұрын
ممنونم زهرا جان. خیلی لطف داری. خوشحالم که ویدیو رو دوست داشتی.
There definitely has to be a “multiple likes” button! This video was so simple and straightforward
@DesignWithArash
Ай бұрын
That's so nice of you. Thank you.
thank you! 😊
@DesignWithArash
3 ай бұрын
No problem.
Very good video. Thanks
@DesignWithArash
Жыл бұрын
Happy to help.
Thank you man
@DesignWithArash
6 ай бұрын
No problem.
Hi sir you deserve a subscribe from me this is very helpful for me since I started learning UI/UX Design for Figma. thank you so much.😊
@DesignWithArash
4 ай бұрын
Hi. No problem. Glad you found the content helpful.
very awesome video and helpful to us
@DesignWithArash
Жыл бұрын
Glad you think so! Thank you.
Thnak you so much
@DesignWithArash
Жыл бұрын
You are welcome.
Very Good man , Make a full web design projct wireframe to prototype
Many thanks!
@DesignWithArash
Жыл бұрын
You're welcome!
Thanks u bro🤩
@DesignWithArash
Жыл бұрын
Welcome 😊
Thank you!
@DesignWithArash
7 ай бұрын
No problem.