Create a Responsive Grid System for Web & UI Design | Figma Tutorial

In this video, I'm going to show you how to create a responsive grid system for your web and UI/UX design projects in Figma fast.
Remember to subscribe: bit.ly/3US49pf
👉 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/45KHoKJ
📸 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.

[@DesignWithArash]

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

[@md.rezaulkarim7510]

@DesignWithArash Please organize the playlist in a order from beginning to advance. Thanks

[@nyoreachoja2068]

Hey Arash, I appreciate the amount of effort you put into making your videos. They are of the highest quality, detailed, well explained and easy to follow. You teach really well. Keep it up brother. Great stuff!

[@DesignWithArash]

Glad you like them! Thanks a lot.

[@andylsq]

Cant tell you how helpful this was! I had so many questions trying to make these grid decisions without the proper context, this just saved me so much struggle

[@DesignWithArash]

Glad it helped.

[@handletest12]

I'm blown away with the clarity and informativeness of the tutorial

[@DesignWithArash]

Glad to hear that.

[@user-ks9kg2ii5y]

Dude, that's awesome. You covered all of my questions with well, detailed explanation, keep going!

[@DesignWithArash]

Thanks dear Fatemeh. Glad it helped.

[@UmairUlhaque]

Thank you Arash, it was very helpful to set up the responsive grids for cross-device UI design. That homepage page you used in the example is pretty awesome, please make a tutorial on how to design such a clean and intuitive web design in Figma. Many thanks!

[@DesignWithArash]

No problem. Glad it was helpful! Sure. I’ll keep that in mind.

[@sisicalabardesigns]

Thank you for making your tutorials so easy to follow. I just subscribed yesterday and I love all your videos. Thank you.

[@DesignWithArash]

You are welcome. Glad you liked them and welcome to the channel.

[@shubhamhire9390]

This video really deserves appreciation, it explains every aspect in so much detail, hats off to the creator 🎉🔥🔥🙏

[@DesignWithArash]

Thank you so much.

[@orlandoduran6685]

Thank you very much, I am a web developer and just got interested in designing my own interfaces from scratch, this is very helpful!

[@DesignWithArash]

No problem. Glad it was helpful!

[@TamaraBelair]

Great video Arash! Very helpful explanations of the role of grids in responsive & consistent web design. I particularly enjoyed the recommendations on gutter, margin, container sizes for each frame. A very useful starting point :)

[@DesignWithArash]

Thank you. Glad it was helpful, Tamara.

[@mattgib711]

Great video! Good length and not a wasted second, all info was significant and well explained.

[@DesignWithArash]

Glad you liked it!

[@uifry]

"I'm super excited to watch this video! A responsive grid system is like the backbone of a well-structured design, ensuring that everything falls perfectly into place, no matter the device or screen size. Figma is a fantastic tool for designers, and learning how to set up a responsive grid system in it is a game-changer.

[@DesignWithArash]

Thank you.

[@julia_ggg]

Thank you for the tutorial, Arash :) this was very insightful, especially on choosing numbers for margins in grids and the like.

[@DesignWithArash]

Glad it was helpful! No problem.

[@lorriess1022]

Arash, you're the best! Addressed all the points I needed to hear about! Thank you again!

[@DesignWithArash]

Thank you so much. Glad it helped.

[@mustafawasif1280]

Hey Arash, I have got a lot of inspiration and learned many different things about UI design from your videos. Now i really feel interest in UI design. I need an internship right now as this will be counted as one of my courses in my University.And with the internship done i will complete my graduation.

[@yugantsonawale]

Your speed of explanation, the way u walk thru the designing task it great. It helps to grasp the concept easily. Other tutorials are too fast or they miss out the in between steps

[@demotivate3880]

I've never see such type of explaination on anyother channel. Just WOW 👋

[@DesignWithArash]

Thank you so much.

[@marceloviannadev]

Teachs more than a course in minutes! Insane and kick-ass content!!! 🤘 🤘

[@DesignWithArash]

Thank you so much.

[@quingquong]

Clear and concise. Best video on the subject. Thanks

[@DesignWithArash]

Glad it was helpful! Thank you.

[@RicardoCorai]

Best Grid System tutorial ever my friend. Thanks!

[@DesignWithArash]

Thank you so much. Glad you think so.

[@pasindusanjaya864]

Thank you for making your tutorials so easy to follow

[@faranakvn3976]

Hey Arash! This video was everything I needed! Thank you.

[@DesignWithArash]

Hi Faranak. Glad it helped.

[@yusuftonmoy2233]

Thanks for describing every single detail in the process. Great and Helpful Video.

[@DesignWithArash]

No problem.

[@lovejko]

Thank you, my friend. You have the talent to explain.

[@DesignWithArash]

I appreciate that! Thanks.

[@sbroidaui]

Answered a question Ive had for months about layout!! Great video!

[@DesignWithArash]

Glad I could help!

[@UnicaFleury]

Thank you. Your videos help me a bunch 🙏

[@DesignWithArash]

No problem. Glad it helped.

[@yorour]

This video is pure gold! Thank you.

[@DesignWithArash]

Thank you so much.

[@zhancock]

Bro, you're simply the best! Thank you so much for your tips. You teach very well! Best regards from Brazil

[@DesignWithArash]

I appreciate that!

[@johannapirrello3058]

Awesome tutorial. It was handy and helpful. Keep doing so great. Thanks!

[@DesignWithArash]

Glad it helped! Thank you.

[@emmawo2850]

Thank you so much Arash, learned a lot from this tutorial, many thanks

[@DesignWithArash]

No problem.

[@sarathbabujohn]

Quality content mate. Keep up the awesome work.

[@DesignWithArash]

Thank you so much. Glad you liked it.

[@jimmy3862]

Hello Arash! From Brazil and loving your great great content! Thank you so much for all your effort n time. Have a nice week and wonderful day!

[@DesignWithArash]

Hi. Thank you so much. Glad you liked my content. Have an awesome day.

[@ngozionwodi8552]

Thank you so much for this piece, it was really very helpful to me. I just subscribed yesterday and I am loving it. GOD bless. ❤️

[@DesignWithArash]

No problem. Welcome to the channel.

[@786gamingcenter]

Wow, amazing video, clear explanation, thankyou!

[@DesignWithArash]

Glad it was helpful!

[@Pixelco]

Wow. Allyour tutorials are so well explained. Thanks!!!

[@DesignWithArash]

Glad you like them!

[@rulick4101]

Thank you so much Arash! This is a very helpful tutorial.

[@DesignWithArash]

You're most welcome!

[@nohelypernalete9126]

I liked the way you explained it! Very easy, I could solve many problems! Thank you so much!

[@DesignWithArash]

No problem. Glad to hear that.

[@design.larsburkhardt2690]

This is a fantastic tutorial, explains the website concept and grid system very well. A must-watch for my students, so that I don't have to talk so much :D Great work!

[@DesignWithArash]

Thanks. Glad you found it helpful.

[@belizatorres4793]

The best video I've ever watched on youtube about grids and sizes. Congratulations! 👏

[@DesignWithArash]

Glad you liked it! Thanks.

[@jmsiebradesigner]

Thank you so much Arash! It was very helpful! 🙏

[@DesignWithArash]

My pleasure 😊

[@bhagyalakshmi-gv2hg]

Ur videos are so valuable and to the point..Thank you!

[@DesignWithArash]

Glad you like them! Thanks.

[@cryptoforliving9911]

I love the way you're teaching. very clear and useful. Damet garm Arash jan. go ahead man.

[@DesignWithArash]

Thanks a lot. Ghorboonet 😃

[@mrstar8558]

@@DesignWithArash mokhlism ghorban. Haha

[@mrdark601]

bro, I am literally taking a course now, did not really undertand the instructor, but I understood you

[@CraftedForImpactTv]

Your channel is like the best for me so far

[@DesignWithArash]

Thanks. Glad you liked my content.

[@raazyaa]

Awsome !!! Thank you for sharing your knowledge. So well explained !

[@DesignWithArash]

Glad it was helpful!

[@waleedhassan7987]

Thank you so so much. This video helped me a lot.👏

[@DesignWithArash]

No problem. Glad it helped.

[@pasindusanthushuiux]

so valuable for me thanks a lot for your effort arash

[@DesignWithArash]

Glad to hear that.

[@JohnAdeoba]

Very insightful. Thanks Arash.

[@DesignWithArash]

My pleasure! Glad you liked it.

[@amaruneru]

amazing tutorial, thanks!!

[@parivashafsharinasab898]

The best tutorial on Grid systems. You saved my life😩

[@DesignWithArash]

Glad it was helpful!

[@neginmatin1819]

Thanks a lot. It was complete for responsive.

[@DesignWithArash]

No problem. Glad it helped.

[@angelasanchez5058]

A really good explanation, thank you!!

[@DesignWithArash]

Glad it was helpful!

[@marialicemoronetto3749]

Great video!! Congratulations! 👏

[@DesignWithArash]

Thank you!!

[@muhammadyasir3294]

kamal kr diya babbeeee.....chas a gye a

[@chiemerieokoye5260]

hello arash i wish i can subscribe more than once 😀 on your channel, bro you are one of the best tutors i have on youtube, you keep impacting many lives god bless you for that .

[@DesignWithArash]

Hi. Thanks a lot. I appreciate it. Welcome to the channel.

[@lauranavasv]

Thank you so much. I hope you get tons of subscribers soon! :D

[@DesignWithArash]

You are most welcome. Thank you.

[@user-uf6ff5wx6e]

Just Great ! Thank you.

[@shpiliche]

Thanks for such good content you did =)

[@DesignWithArash]

My pleasure!

[@marziyeh5571]

ارش جان دمت گرم. واقعا مرسی بابت این آموزش 🌹

[@DesignWithArash]

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

[@farshadamirshoghi9323]

Great one, Thank you dear Arash

[@DesignWithArash]

You are welcome. Thank you.

[@hyacinthdibley2420]

YOU ARE AMAZING!!! thank you so much!

[@DesignWithArash]

Thank you very much.

[@BrandSolve]

You are awesome. This was really helpful guide for Figma. Thanks a lot.

[@DesignWithArash]

Thank you. Glad it was helpful!

[@anafazli1185]

this is great !thank you so much all my question are answered!:)

[@DesignWithArash]

No problem.

[@alekseibedunkevits1566]

Thanks a lot for your video. Thanks to it, I was able to complete an assignment for a UX design course at university =) Everything was very clear and easy to follow =)

[@DesignWithArash]

No problem. Glad it helped.

[@ramadanbundu5953]

I most confess you're undeniably a great tutor ❤ thanks a lots for making me love UI design more more.. i was totally baffle about my professional career but with your great help I'm well satisfied 😊 please sir can you recommend some of your books to us and also suggest you should make a zoom class Thank you sir

[@DesignWithArash]

Thank you so much. Glad it was helpful! I don't have live classes but you can check out my UI Design & Figma course. Link is in the description.

[@sbsprofits]

This is a very helpful tutorial. Thanks.

[@DesignWithArash]

Glad it was helpful!

[@daviddr2d2]

Very well described and very helpful. Thank you.

[@DesignWithArash]

No problem. Glad it was helpful!

[@khrystynavakula8912]

thank you very much! this is very helpful

[@DesignWithArash]

No problem. Glad it was helpful!

[@ahmedsodany3012]

Very helpful, thanks man

[@DesignWithArash]

Glad it helped.

[@newyonface3700]

thankyou, This has cleared my lots of doubts

[@DesignWithArash]

No problem.

[@shaansingh8704]

Hey, nice video, But always try to set grid layout according to bootstrap as many developer use that only and there should some max-width for 1400px like it's 1320px max width for it, for 1200px it 1140px. Like this your design can make more sense for developer to make and QA to run test. And if you will resize your container will not resize, so can you make how to resize your containers

[@marziyeh5571]

Clear and concise

[@DesignWithArash]

Thanks.

[@mohitrobbin5401]

That's really amazing 😍

[@DesignWithArash]

Thanks.

[@waahtunes]

Brilliant!! this helped me alot

[@DesignWithArash]

Thanks. Glad it helped.

[@fahadmohamed5734]

Easy and on the point

[@DesignWithArash]

Thanks.

[@emiliaticiano3237]

explained perfectly understandable. Thanks☺

[@DesignWithArash]

You're welcome 😊

[@aumtripathi1665]

best explanation of grids .

[@DesignWithArash]

Thanks.

[@alexandrfedorov5722]

Thank You, this is very helpful

[@DesignWithArash]

No problem.

[@cybernecia]

Thanks for your content!

[@DesignWithArash]

No problem.

[@Okord_Obasi]

This was so helpful. Been struggling with calculation grids but I'm glad for this. Please keep doing what you're doing, mich appreciated 🤍

[@DesignWithArash]

Glad it was helpful!

[@nehasalma9083]

thanks Arash for this

[@DesignWithArash]

No problem.

[@Rigle]

Great tutorial!

[@DesignWithArash]

Thanks.

[@guidomelano]

Really nice video, thx for your work. Greetings from Argentina.

[@DesignWithArash]

No problem. Thank you.

[@MohamedAhmed-oy8pm]

Very helpful thank you

[@IritAchiel]

Very helpful video, thanks! :)

[@DesignWithArash]

Thanks.

[@bossboss4508]

easy to listen and understand. for noob english like me. thank u so much ❤

[@DesignWithArash]

No problem.

[@aleksandrabaranchik5631]

Thank you !

[@DesignWithArash]

No problem.

[@uifry]

Thats really helpful tutorial video for designers :)

[@DesignWithArash]

Thanks. Glad it helped.

[@rudrachakraborty1942]

Thnx for this. its really helpfull

[@DesignWithArash]

Glad to hear that.

[@SisiBisi-zh1cj]

Thank you so much

[@aminadavg]

I like the image goes outside of the grid

[@DesignWithArash]

Thanks.

[@yuno1535]

thank you so much!

[@DesignWithArash]

No problem.

[@benSebastian.0k]

U are the best, I understood all your pronunciation. From Argentina 🇦🇷 🧉

[@DesignWithArash]

Thank you so much.

[@MrVarveklis]

I don't like videos, because I use the like button as a playlist, but I'll leave a comment, to boost KZbin algorithms for you, because you deserve it. Good video.

[@DesignWithArash]

Thank you so much. I hope you found the content helpful.

[@jinsasinmu4572]

thank you very much!

[@DesignWithArash]

No problem.

[@Cecilia_Ibz]

very usefull. Thanks!

[@DesignWithArash]

No problem.

[@mateusbistene]

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?

[@namankeshri9172]

Thanks!

[@DesignWithArash]

No problem.

[@yasr6616]

you well deserve the like and subscribe dadash :)) that was very informative! thanks!

[@DesignWithArash]

Thank you so much. Merci.

[@notawaffle9421]

Nice video, thanks👍

[@DesignWithArash]

No problem.