Make Your Web Design Responsive in 10 Minutes | Figma Tutorial

[@DesignWithArash]

👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons): bit.ly/43v79vX

[@ob5804]

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]

😂😂😂😂😂 do you folks do not know about media queries? Are you Indians?

[@amritanandpathak1112]

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]

No problem. Glad it was helpful!

[@victorcharlesofficial]

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]

me too

[@joanerhabor3233]

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.

[@hirkney]

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]

I recently did the same to my project. I just couldn't understand constraints until now

[@vmiroshnikov]

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]

No problem. Thank you.

[@carloantoniopatti6870]

Just getting started with Figma, man you are CLEAR. Thank you for making content!

[@nxpcloudz1217]

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.

[@sumitha29]

Didn't know constraints can play a big role in responsive. This is really helpful :)

[@jawidmusic.7ce]

The best and top explanation of responsive design in all of KZbin... respect

[@DesignWithArash]

Thank you.

[@m7280]

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.

[@star-devil9157]

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]

No problem. Glad it helped.

[@machopyong]

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]

Glad you liked the content. Welcome to the channel.

[@dorsasaghri6104]

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.

[@AmeliaPrasad]

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.

[@oussematrabelsi4188]

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.

[@robertgatterai7269]

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.

[@akanjiwasiuabiodun9726]

Straight forward and understanding, have watched almost 3 videos and is still don't understand, until i watch yours. you are good

[@kynx_designs]

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.

[@MemeDash697]

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!

[@FundaYal]

One of the best descriptive and structured tutorial I saw around this topic

[@LordJHouse]

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.

[@marishear8792]

You are my favourite designer on KZbin. Easiest to understand, thank you!!!

[@DesignWithArash]

Thank you so much. I'm so happy to hear that.

[@avgenjy]

I thought the free book will just be a few pages I was shookt XD thank you!!! It's very helpful!

[@Chetanf18]

I have started watching your channel tutorials from past 3 days, and they are amazing Arash. Your videos teaches in a clear way and easy to understand. No fancy talks, no pressure building, no show off, no hidden tricks, just pure tutorials. Just wanted to know that making designs responsive with breakpoints plugin is short, simple & fast way just to present the design roughly, right ? Or is there any connection between this tutorial and breakpoints plugin tutorial ?

[@roryraghad]

You are amazing my friend, I am a fan of Adobe XD and watching these tutorials makes me wanna switch

[@DesignWithArash]

Thank you so much. Glad it helped.

[@juliaweber986]

It's really awesome how you fix the screen, but I wish for more explanation why it behaves like this

[@eikosato3265]

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.

[@SanaAman]

tokyo i want to be thereeee koniciwa

[@JoyEnergiser]

subscribed, this has single handedly boosted my figma experience!

[@DesignWithArash]

Glad to hear that.

[@saghikiumarsi7431]

Thank you Arash,You speak very fluently and I have benefited a lot from your teachings❤

[@DesignWithArash]

No problem. Glad to hear that.

[@n4gpal]

This was a life saviour video. Thank you so much Arash! Great Content

[@DesignWithArash]

No problem. Glad it helped.

[@henrythomas7112]

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.

[@jitendrajanjanam5920]

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.

[@tusharhegde8174]

Arash he is the man life saver.God bless you

[@hanqiu1510]

Man, this is very helpful, my design now works on my teammate's widescreen.

[@bustertoks]

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]

No problem. Glad it was helpful!

[@goodfeeling5360]

آرش دمت گرم!آموزشت بی نظیررر و بسیار برای بنده مفید بود

[@DesignWithArash]

ممنونم. لطف داری.

[@PortaPanel]

Absolutely amazing. Thank you!

[@Ravikiranks12]

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.

[@wik_wal]

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.

[@A_sudden_stranger]

This is just the perfect recommendation what I want ❤❤

[@pixel_perfpormer_ui]

This is a great channel! ... Congratulations on such an outstanding achievement. ...

[@DesignWithArash]

Thank you very much.

[@NeginAsem]

Thanks Arash. It was so useful for me

[@mashamykhailovskaya2037]

It i soo good, damn. So fast and understandable. Thank you

[@DesignWithArash]

No problem. Glad it was helpful!

[@AnjaliSingh-di7yw]

You solved my 100 of problems at once.............Amazing

[@DesignWithArash]

Glad to hear that.

[@darlingtonumeh1453]

Thank you so much for this, Arash. You make it so simple!

[@DesignWithArash]

My pleasure!

[@BIGCHEESEprod]

this video is so helpful! way better than what my school provided us! thank you!

[@DesignWithArash]

No problem. Glad it helped.

[@varavex]

Thank you Arash, it was clear, understandable, and useful🤩💫

[@DesignWithArash]

No problem. Glad you found it helpful.

[@favourokoye3767]

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.

[@zahraaizadi7800]

این ویدیو بهترین ویدیویی بود که درمورد ریسپانسیو کردن طراحی دیدم.ممنونم محتوای فوق العاده ای بود😍I supposed you can be an Iranian so I wrote in Farsi cause my English is not good enough😁

[@DesignWithArash]

ممنونم زهرا جان. خیلی لطف داری. خوشحالم که ویدیو رو دوست داشتی.

[@hugeiconspro]

Appreciate it! Super clear and well-explained! 🙏

[@usernamezae]

your videos such a blessing! Thank you so much for them!

[@DesignWithArash]

Thank you so much. Glad you liked them.

[@v.ujwalapriya9780]

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]

No problem. Glad it was helpful!

[@dimejipamilerin1770]

This is really nice. Excellent teaching Arash ♥♥

[@DesignWithArash]

Glad you liked it. Thank you so much.

[@yahyayounus3896]

Brother the way you explained is brilliant 💯 very useful 💯

[@DesignWithArash]

Glad it was helpful! It's very kind of you.

[@jackgrey6408]

I'm just getting started and your videos are so helpful! Thank you!

[@DesignWithArash]

You are so welcome!

[@AhmedAlJabrigd]

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

[@deepti.sharma.]

Really well thought and detailed video. Grateful for the content. Thank you Arash!!

[@DesignWithArash]

My pleasure!

[@mohammadjavadmozaffari1686]

damet garm arash jan kooli estefade kardam❤

[@DesignWithArash]

Ghorboonet Mohammad Javad jan.

[@weristsam]

This is a game changer for me as i'm working as developer :)

[@DesignWithArash]

Glad to hear that.

[@rawrdo123]

Thank you for this sweet and short tutorial!

[@DesignWithArash]

Glad it was helpful!

[@sarjana-brewok]

Amazing tutorial uncle,thank you very much..this gonna make my workflow faster

[@DesignWithArash]

Glad you liked it.

[@steinmartahh]

Thanks so much! Such a neat explanation, well done!

[@giedre.p.7488]

Awesome lesson! Soooo helpful 💚💚💚

[@DesignWithArash]

Thank you. Glad it was helpful!

[@mujtabaghakkhar3495]

very good work brother ❤

I am still struggling but at least I understand the logic thanks to you!!

[@CheneetaBoothe]

So easy to follow! Great tutorial for beginners like me.

[@bharathgorental4928]

Its just Amazing, very easy to undestand your explanation, thank you so much. 😀

[@DesignWithArash]

No problem.

[@uixsensei1]

awesome dude right on point!!

[@shaghayeghsmi7451]

عالی بود. ینی من ده تا ویدیو فارسی دیدم رسپانسیو و auto layout رو یاد نگرفتم یه ویدیو شمارو دیدم متوجه شدم ممنون.

[@DesignWithArash]

ممنونم. خوشحالم که کمکتون کرد.

[@ShakeelAhmed-g9k]

thanks, brother this video is really helpful for me

[@grugbrain]

Web frontend developers love you.

[@fatemehsadeghi7619]

your training is really great

[@mayumihashimoto4715]

This was awesome! Super helpful as I always had fear of responsive design..

[@DesignWithArash]

Glad it was helpful! Thanks.

[@NNNedlog]

This is such an excellent tutorial. Beautiful design by the way

[@DesignWithArash]

Thank you so much.

[@fypyfyp]

thank you for sharing, Arash it really helpful!

[@DesignWithArash]

No problem. Glad it helped.

[@Bala-pt1gp]

great tutorial man

[@aleksandaraleksic6828]

Huh, this thing driving me crazy, im getting frustrated, anyone with same problem ? I think this is hardest thing in Figma, i followed so many times, and always fail, simply i dont know when i to go set it right, when scale, when to top etc...Worstest thing is that there is XY commands that you need to implement, i really admire to people who overcome this problems. Ok im only 20+ days in Figma, but this really gives me a nightmare, i thought that codes can only makes mega frustrations and depression:) If somone have solution, lets connect and try to overcome this together! Anyway thanks Arash you did great job again!

[@DesignWithArash]

I'm sorry you feel that way. It takes time to get used to constraints and auto layout so don't worry. As you practice more and more it would become easier for you.

[@01Oddone]

Awesome ! thanks for this responsive design video, Please share more of your skills like these..

[@DesignWithArash]

No problem. Sure.

[@leesollim9326]

Awesome ! I can solve problem thanks to this lesson. Thank you SO MUCH !

[@DesignWithArash]

No problem. Glad it helped!

[@whiskyo]

To help you with your teaching: you need to communicate important details such as, whatever image you're working with, you have to place it into the frame with the text that is in the layout. Otherewise, the text will not push the image down on the page. I don't believe using such a complex image is nessecary for basic teaching either. Just use a regular raster or vector image.

[@paolapalacios9707]

This is the best tutorial I've seen so far. I've gone through so many KZbin videos and this one is very well explained. However, I can't download the source file so I've been following along with another file from another KZbin video :/

[@DesignWithArash]

I'm glad you found it helpful. I checked the link and everything worked properly. Once you download the Figma file you can drag and drop it into your Figma dashboard.

[@paolapalacios9707]

@@DesignWithArash Dragging the file to Figma didn't work, what worked was importing the file in the dashboard. I was able to do the tutorial. Thank you!

[@lidijagrujicic7463]

Excellent video, clear and concise. Many thanks! I'm subscribing!

[@DesignWithArash]

Thank you so much. Welcome aboard.

[@sallyhefny4154]

Many thanks for you ,. please make a lot of videos for responsive web design

[@shounaksane2293]

Very helpful!

[@whiskyo]

This took me way too long to make it work and it's because I was setting the "scaling" in the height section rather than width section. You definitely need to communicate this. Also, you have to make sure the text is set to auto-height in the type settings.

[@farshadamirshoghi9323]

Thank you, dear Arash, It was great video

[@DesignWithArash]

No problem. Glad you liked it.

[@Auriooo]

This helped me immensely. Thank you so much for sharing ❤️✨

[@DesignWithArash]

No problem. Glad to hear that.

[@meenuraj838]

Very concise and well explained video. Thank you for this amazing tutorial!

[@DesignWithArash]

No problem. Thank you so much.

[@designtarifi]

Thanks,it was useful :)

[@BAMZTvOfficial]

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]

Hi. No problem. Glad you found the content helpful.

[@cindyzhong4000]

best explanation! clean and ocncise

[@DesignWithArash]

Thank you so much.

[@EBENESAMUEL]

Thanks for the tutorial, I really appreciate

[@DesignWithArash]

No problem.

[@abadsharif]

You are amazing bro thanks

[@chiragsandhekar6298]

just in time and just whats needed. TY XD

[@DesignWithArash]

Nice to hear that.

[@ImranAhmad-vm8wj]

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

[@andylsq]

Very well explained - clear and concise! Is there a better way to handle the images though? Especially in the mobile view- its cutting of the heading that says dashboard and only showing the center of the content which doesnt make much sense for an embedded screenshot or video

[@DesignWithArash]

No problem. Yes, usually for the mobile version we manually adjust the image's position and aspect ratio to make sure it's clear. For something like a dashboard we replace the image entirely with the mobile version of the dashboard.

[@TateTalks9]

best one😍

[@VoyagesJapan]

This might be a silly question, but I've been wondering for the longest time...how is it helpful to make the layout responsive in Figma if you're going to eventually put the design in Webflow or Framer? What am I missing? Is this just an extra step? How is this helpful in the development process?

[@DesignWithArash]

Here are two reasons for that. 1- We use the responsive version to present it to the client/stakeholders before implementing the project. 2- Developers can easily understand how your design should behave and adapt to different screen sizes.

[@VoyagesJapan]

@@DesignWithArash perfect explanation!! Thank you very much for getting back to me Arash. I thought there was something I was missing but this definitely eased my worries.

[@kashyap263]

nice ! thanks bro

[@DesignWithArash]

No problem! Thanks.