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.
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 🙏🏼
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
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
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.
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.... ❤️
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 ✨
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 ?
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.
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.
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.
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.
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 :)
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!
این ویدیو بهترین ویدیویی بود که درمورد ریسپانسیو کردن طراحی دیدم.ممنونم محتوای فوق العاده ای بود😍I supposed you can be an Iranian so I wrote in Farsi cause my English is not good enough😁
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
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.
Hey Arash, your tutorial is really helpful but i'm facing a problem while doing that , i'm not getting fill container option ( at 4:16 in video) even after i'm following every single step. Can you please help.
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.
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.
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
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!
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.
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?
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.
Thanks for the Video. It has been really helpful in my project, as I wasn't clear about this. I have one question: When you converted the desktop version to a tablet or mobile, I didn't see you changing the grid layout from 12 columns to 8 or any of the margins. I assume it doesn't happen automatically, and we have to manually do it, or because our layout is already set on the desktop. You were just changing the constraints/properties to make it suitable for other sizes. Please throw some light. Thanks!
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.
This is the best tutorial I've seen so far. I've gone through so many TH-cam 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 TH-cam video :/
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.
@@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!
This was great and gave me pretty much everything I need to make better responsive design however, I'm a bit confused. The illustration is losing information as you scale the page to different breakpoints. So are people using tablet or mobile just not going to be able to see the full illustration? Any advice here would be extremely helpful.
Thank you! I'm so glad someone else noticed this. All these positive comments saying what a great tutorial it is. It is a nice tutorial, but has a glowing flaw. You cannot set this kind of image to fill and have it scale. If it were a different kind of photo, maybe. So far I haven't found a way to scale an image proportionally and choose the focal point.
Yeah the tutorial is great for the other aspects of this, but it's pretty important to make sure the images scale appropriately with the breakpoints. When I saw that I thought "oh he'll explain that at the end" and then he was just like "looks great!" and ended to tutorial lol. Please let me know if you find a solution to this!@@perrysdownunder
Thank you. Glad you found it helpful. You are right; the image should be scaled proportionately, but Figma doesn't have this feature yet. I've tried many ways, but it wasn't possible. You should keep in mind that there are things you can do in code that you can't in Figma, and that's OK. In these rare cases, you just need to leave a note for the developer and explain how your elements should behave. It can be easily implemented in code.
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
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?
😂😂😂😂😂 do you folks do not know about media queries? Are you Indians?
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.
No problem. Glad it was helpful!
This is the most straightforward and concise figma tutorial I’ve seen. I’m definitely subscribing and turning on notifs now.
Thank you Arash ❤
Glad it was helpful! Thank you so much. Welcome aboard.
me too
Just getting started with Figma, man you are CLEAR. Thank you for making content!
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 🙏🏼
No problem. Glad it helped!
Same with me
I recently did the same to my project. I just couldn't understand constraints until now
Didn't know constraints can play a big role in responsive. This is really helpful :)
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!
I'm glad it helped. You are welcome.
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
@@wik_wal I'm glad to hear that. 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
No problem. Thank you.
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.
Thank you so much. Glad you found them helpful. Welcome to the channel.
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.... ❤️
No problem. Glad it helped.
The best and top explanation of responsive design in all of TH-cam...
respect
Thank you.
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 ✨
Glad you liked the content. Welcome to the channel.
One of the best descriptive and structured tutorial I saw around this topic
Straight forward and understanding, have watched almost 3 videos and is still don't understand, until i watch yours.
you are good
You solved my 100 of problems at once.............Amazing
Glad to hear that.
This is the best and most straightforward figma video I've ever seen, thanl u man!!
Thank you very much. Glad you liked it.
I thought the free book will just be a few pages I was shookt XD thank you!!! It's very helpful!
It's really awesome how you fix the screen, but I wish for more explanation why it behaves like this
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 ?
As a beginner, your contents are just the best! As time passes I’ll get to this level.
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.
Thank you. Glad it helped!
Absolutely amazing. Thank you!
Hi Arash! I just wanted to say how I appreciate your work. These tutorials are so helpful.
You are most welcome. I appreciate it.
Finally, someone finally thoroughly taught auto layout and responsiveness…Thank you so much, I’m trying to save this video for later
No problem.
Whoa. This is one of the most helpful 10 minute tutorials I've ever seen. This is absolutely excellent.
Glad it was helpful! Thank you so much.
Arash he is the man life saver.God bless you
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.
Hi. Welcome to the channel. Glad you found the content helpful.
آرش دمت گرم!آموزشت بی نظیررر و بسیار برای بنده مفید بود
ممنونم. لطف داری.
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.
Glad to hear that. Thank you.
You are amazing my friend, I am a fan of Adobe XD and watching these tutorials makes me wanna switch
Thank you so much. Glad it helped.
This is such an excellent video and your teaching style is concise yet straightforward. Thank you so much Arash!
You're very welcome! Glad you liked it. Thank you very much.
This is just the perfect recommendation what I want ❤❤
Man, this is very helpful, my design now works on my teammate's widescreen.
Thank you Arash,You speak very fluently and I have benefited a lot from your teachings❤
No problem. Glad to hear that.
You are my favourite designer on TH-cam. Easiest to understand, thank you!!!
Thank you so much. I'm so happy to hear that.
Thanks so much! Such a neat explanation, well done!
Tks Arash. For creating this tutorial. You made it easy. I hope you will dont stop creating. Experting more videos from u r side ❤
No problem. Thank you.
Thank you Arash, it was clear, understandable, and useful🤩💫
No problem. Glad you found it helpful.
subscribed, this has single handedly boosted my figma experience!
Glad to hear that.
your videos such a blessing! Thank you so much for them!
Thank you so much. Glad you liked them.
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.
Thank you very much. Glad you liked it. Welcome aboard.
Thanks Arash.
It was so useful for me
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.
No problem. Glad it was helpful!
I'm just getting started and your videos are so helpful! Thank you!
You are so welcome!
Appreciate it! Super clear and well-explained! 🙏
Thank you for this sweet and short tutorial!
Glad it was helpful!
Amazing tutorial uncle,thank you very much..this gonna make my workflow faster
Glad you liked it.
This was a life saviour video. Thank you so much Arash! Great Content
No problem. Glad it helped.
This is a game changer for me as i'm working as developer :)
Glad to hear that.
There definitely has to be a “multiple likes” button! This video was so simple and straightforward
That's so nice of you. Thank you.
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 :)
Thank you very much. I'm glad to hear that.
عالی بود. ینی من ده تا ویدیو فارسی دیدم رسپانسیو و auto layout رو یاد نگرفتم یه ویدیو شمارو دیدم متوجه شدم ممنون.
ممنونم. خوشحالم که کمکتون کرد.
This is a great channel! ...
Congratulations on such an outstanding achievement. ...
Thank you very much.
Its just Amazing, very easy to undestand your explanation, thank you so much. 😀
No problem.
Thank you so much for this, Arash. You make it so simple!
My pleasure!
this video is so helpful! way better than what my school provided us! thank you!
No problem. Glad it helped.
So easy to follow! Great tutorial for beginners like me.
thanks, brother this video is really helpful for me
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!
No problem. Glad it was helpful!
damet garm arash jan kooli estefade kardam❤
Ghorboonet Mohammad Javad jan.
thank you for sharing, Arash it really helpful!
No problem. Glad it helped.
این ویدیو بهترین ویدیویی بود که درمورد ریسپانسیو کردن طراحی دیدم.ممنونم محتوای فوق العاده ای بود😍I supposed you can be an Iranian so I wrote in Farsi cause my English is not good enough😁
ممنونم زهرا جان. خیلی لطف داری. خوشحالم که ویدیو رو دوست داشتی.
Brother the way you explained is brilliant 💯 very useful 💯
Glad it was helpful! It's very kind of you.
Really well thought and detailed video. Grateful for the content. Thank you Arash!!
My pleasure!
Awesome lesson! Soooo helpful 💚💚💚
Thank you. Glad it was helpful!
Awesome ! thanks for this responsive design video, Please share more of your skills like these..
No problem. Sure.
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
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.
Hey Arash, your tutorial is really helpful but i'm facing a problem while doing that , i'm not getting fill container option ( at 4:16 in video) even after i'm following every single step. Can you please help.
Hey. Thanks. Did you select an element within your main Auto Layout frame?
@@DesignWithArash Yes i did, still i didn't find fill container option there.
Many thanks for you ,. please make a lot of videos for responsive web design
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.
No problem. Glad you found it helpful.
It i soo good, damn. So fast and understandable. Thank you
No problem. Glad it was helpful!
awesome dude right on point!!
This is really nice. Excellent teaching Arash ♥♥
Glad you liked it. Thank you so much.
Awesome ! I can solve problem thanks to this lesson. Thank you SO MUCH !
No problem. Glad it helped!
It is just easier to create a separate mobile version on figma and less time consuming.
Appreciate your effort
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.
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
This is such an excellent tutorial. Beautiful design by the way
Thank you so much.
Thanks for the tutorial, I really appreciate
No problem.
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!
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.
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?
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.
Web frontend developers love you.
This was awesome! Super helpful as I always had fear of responsive design..
Glad it was helpful! Thanks.
Thanks for the Video. It has been really helpful in my project, as I wasn't clear about this. I have one question: When you converted the desktop version to a tablet or mobile, I didn't see you changing the grid layout from 12 columns to 8 or any of the margins. I assume it doesn't happen automatically, and we have to manually do it, or because our layout is already set on the desktop. You were just changing the constraints/properties to make it suitable for other sizes. Please throw some light. Thanks!
Thank you so much, it was easy to understand
Glad to hear that.
just in time and just whats needed. TY XD
Nice to hear that.
You are amazing. Thanks for the video 😊😊
very good work brother ❤
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.
This helped me immensely. Thank you so much for sharing ❤️✨
No problem. Glad to hear that.
What good is a responsive design in the editor view if I can't share it responsive to have a responsive preview for user feedback?
It's needed when you want to hand it over to the developer.
Excellent video, clear and concise. Many thanks! I'm subscribing!
Thank you so much. Welcome aboard.
Very Good man , Make a full web design projct wireframe to prototype
Thank you, dear Arash, It was great video
No problem. Glad you liked it.
Easy and Fast, Thank you!
No problem.
best explanation! clean and ocncise
Thank you so much.
This is the best tutorial I've seen so far. I've gone through so many TH-cam 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 TH-cam video :/
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.
@@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!
This was great and gave me pretty much everything I need to make better responsive design however, I'm a bit confused. The illustration is losing information as you scale the page to different breakpoints. So are people using tablet or mobile just not going to be able to see the full illustration? Any advice here would be extremely helpful.
Thank you! I'm so glad someone else noticed this. All these positive comments saying what a great tutorial it is. It is a nice tutorial, but has a glowing flaw. You cannot set this kind of image to fill and have it scale. If it were a different kind of photo, maybe. So far I haven't found a way to scale an image proportionally and choose the focal point.
Yeah the tutorial is great for the other aspects of this, but it's pretty important to make sure the images scale appropriately with the breakpoints. When I saw that I thought "oh he'll explain that at the end" and then he was just like "looks great!" and ended to tutorial lol. Please let me know if you find a solution to this!@@perrysdownunder
Thank you. Glad you found it helpful. You are right; the image should be scaled proportionately, but Figma doesn't have this feature yet. I've tried many ways, but it wasn't possible. You should keep in mind that there are things you can do in code that you can't in Figma, and that's OK. In these rare cases, you just need to leave a note for the developer and explain how your elements should behave. It can be easily implemented in code.
Thanks Arash! You would think Figma would have implemented that feature by now lol. I appreciate your response! @@DesignWithArash
great tutorial man
Very concise and well explained video. Thank you for this amazing tutorial!
No problem. Thank you so much.
Thank you for this helpful tutorial :)
You're very welcome!