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

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ม.ค. 2023
  • 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/4aVc7pR
    📸 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.

ความคิดเห็น • 319

  • @DesignWithArash
    @DesignWithArash  11 หลายเดือนก่อน +4

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

    • @md.rezaulkarim7510
      @md.rezaulkarim7510 2 หลายเดือนก่อน

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

  • @nyoreachoja2068
    @nyoreachoja2068 ปีที่แล้ว +30

    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!

  • @andylsq
    @andylsq ปีที่แล้ว +2

    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

  • @handletest12
    @handletest12 9 หลายเดือนก่อน +4

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

  • @UmairUlhaque
    @UmairUlhaque ปีที่แล้ว +7

    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
      @DesignWithArash  ปีที่แล้ว

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

  • @user-ks9kg2ii5y
    @user-ks9kg2ii5y ปีที่แล้ว +2

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

  • @Sisicalabardesigns
    @Sisicalabardesigns ปีที่แล้ว +1

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

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

  • @TamaraBelair
    @TamaraBelair 8 หลายเดือนก่อน +2

    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
      @DesignWithArash  8 หลายเดือนก่อน

      Thank you. Glad it was helpful, Tamara.

  • @shubhamhire9390
    @shubhamhire9390 11 หลายเดือนก่อน +3

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

  • @orlandoduran6685
    @orlandoduran6685 ปีที่แล้ว +3

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

  • @mattgib711
    @mattgib711 9 หลายเดือนก่อน +1

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

  • @uifry
    @uifry 10 หลายเดือนก่อน +2

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

  • @lorriess1022
    @lorriess1022 5 หลายเดือนก่อน

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

    • @DesignWithArash
      @DesignWithArash  4 หลายเดือนก่อน

      Thank you so much. Glad it helped.

  • @julia_ggg
    @julia_ggg 11 หลายเดือนก่อน +1

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

    • @DesignWithArash
      @DesignWithArash  11 หลายเดือนก่อน

      Glad it was helpful! No problem.

  • @marceloviannadev
    @marceloviannadev 10 หลายเดือนก่อน +1

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

  • @johannapirrello3058
    @johannapirrello3058 ปีที่แล้ว

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

  • @RicardoCorai
    @RicardoCorai ปีที่แล้ว +1

    Best Grid System tutorial ever my friend. Thanks!

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว +1

      Thank you so much. Glad you think so.

  • @quingquong
    @quingquong ปีที่แล้ว +2

    Clear and concise. Best video on the subject. Thanks

  • @faranakvn3976
    @faranakvn3976 ปีที่แล้ว

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

  • @sarathbabujohn
    @sarathbabujohn ปีที่แล้ว

    Quality content mate. Keep up the awesome work.

  • @sbroidaui
    @sbroidaui ปีที่แล้ว

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

  • @demotivate3880
    @demotivate3880 ปีที่แล้ว +2

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

  • @yusuftonmoy2233
    @yusuftonmoy2233 ปีที่แล้ว

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

  • @pasindusanjaya864
    @pasindusanjaya864 หลายเดือนก่อน

    Thank you for making your tutorials so easy to follow

  • @lovejko
    @lovejko ปีที่แล้ว +1

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

  • @yorour
    @yorour ปีที่แล้ว

    This video is pure gold! Thank you.

  • @amaruneru
    @amaruneru หลายเดือนก่อน

    amazing tutorial, thanks!!

  • @mustafawasif1280
    @mustafawasif1280 6 หลายเดือนก่อน

    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.

  • @BrandSolve
    @BrandSolve 5 วันที่ผ่านมา

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

  • @yugantsonawale
    @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

  • @muhammadyasir3294
    @muhammadyasir3294 หลายเดือนก่อน

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

  • @786gamingcenter
    @786gamingcenter ปีที่แล้ว +1

    Wow, amazing video, clear explanation, thankyou!

  • @zhancock
    @zhancock ปีที่แล้ว

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

  • @Pixelco
    @Pixelco 5 หลายเดือนก่อน

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

  • @design.larsburkhardt2690
    @design.larsburkhardt2690 5 หลายเดือนก่อน

    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
      @DesignWithArash  5 หลายเดือนก่อน +1

      Thanks. Glad you found it helpful.

  • @bhagyalakshmi-gv2hg
    @bhagyalakshmi-gv2hg หลายเดือนก่อน

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

    • @DesignWithArash
      @DesignWithArash  หลายเดือนก่อน

      Glad you like them! Thanks.

  • @jimmy3862
    @jimmy3862 10 หลายเดือนก่อน

    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
      @DesignWithArash  10 หลายเดือนก่อน

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

  • @ngozionwodi8552
    @ngozionwodi8552 9 หลายเดือนก่อน

    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
      @DesignWithArash  9 หลายเดือนก่อน

      No problem. Welcome to the channel.

  • @emmawo2850
    @emmawo2850 ปีที่แล้ว

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

  • @rulick4101
    @rulick4101 3 หลายเดือนก่อน

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

  • @belizatorres4793
    @belizatorres4793 ปีที่แล้ว +2

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

  • @waleedhassan7987
    @waleedhassan7987 ปีที่แล้ว

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

  • @marziyeh5571
    @marziyeh5571 ปีที่แล้ว

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

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

  • @jmsiebradesigner
    @jmsiebradesigner 10 หลายเดือนก่อน

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

  • @marialicemoronetto3749
    @marialicemoronetto3749 2 หลายเดือนก่อน

    Great video!! Congratulations! 👏

  • @raazyaa
    @raazyaa 9 หลายเดือนก่อน

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

  • @UnicaFleury
    @UnicaFleury ปีที่แล้ว +1

    Thank you. Your videos help me a bunch 🙏

  • @nohelypernalete9126
    @nohelypernalete9126 3 หลายเดือนก่อน

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

    • @DesignWithArash
      @DesignWithArash  3 หลายเดือนก่อน

      No problem. Glad to hear that.

  • @MrVarveklis
    @MrVarveklis ปีที่แล้ว +1

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

    • @DesignWithArash
      @DesignWithArash  ปีที่แล้ว

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

  • @cryptoforliving9911
    @cryptoforliving9911 9 หลายเดือนก่อน

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

    • @DesignWithArash
      @DesignWithArash  9 หลายเดือนก่อน +1

      Thanks a lot. Ghorboonet 😃

    • @mrstar8558
      @mrstar8558 9 หลายเดือนก่อน

      @@DesignWithArash mokhlism ghorban. Haha

  • @khrystynavakula8912
    @khrystynavakula8912 4 หลายเดือนก่อน

    thank you very much! this is very helpful

    • @DesignWithArash
      @DesignWithArash  3 หลายเดือนก่อน

      No problem. Glad it was helpful!

  • @JohnAdeoba
    @JohnAdeoba ปีที่แล้ว

    Very insightful. Thanks Arash.

  • @waahtunes
    @waahtunes 6 หลายเดือนก่อน

    Brilliant!! this helped me alot

  • @hyacinthdibley2420
    @hyacinthdibley2420 ปีที่แล้ว

    YOU ARE AMAZING!!! thank you so much!

  • @neginmatin1819
    @neginmatin1819 ปีที่แล้ว

    Thanks a lot. It was complete for responsive.

  • @mrdark601
    @mrdark601 หลายเดือนก่อน

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

  • @angelasanchez5058
    @angelasanchez5058 6 หลายเดือนก่อน

    A really good explanation, thank you!!

  • @alexandrfedorov5722
    @alexandrfedorov5722 3 หลายเดือนก่อน

    Thank You, this is very helpful

  • @parivashafsharinasab898
    @parivashafsharinasab898 10 หลายเดือนก่อน

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

  • @CraftedForImpactTv
    @CraftedForImpactTv 4 หลายเดือนก่อน

    Your channel is like the best for me so far

    • @DesignWithArash
      @DesignWithArash  3 หลายเดือนก่อน

      Thanks. Glad you liked my content.

  • @ahmedsodany3012
    @ahmedsodany3012 ปีที่แล้ว

    Very helpful, thanks man

  • @pasindusanthushuiux
    @pasindusanthushuiux 8 หลายเดือนก่อน

    so valuable for me thanks a lot for your effort arash

  • @anafazli1185
    @anafazli1185 3 หลายเดือนก่อน

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

  • @MohamedAhmed-oy8pm
    @MohamedAhmed-oy8pm หลายเดือนก่อน

    Very helpful thank you

  • @lauranavasv
    @lauranavasv ปีที่แล้ว

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

  • @fahadmohamed5734
    @fahadmohamed5734 5 หลายเดือนก่อน

    Easy and on the point

  • @cybernecia
    @cybernecia 6 หลายเดือนก่อน

    Thanks for your content!

  • @sbsprofits
    @sbsprofits ปีที่แล้ว

    This is a very helpful tutorial.
    Thanks.

  • @mohitrobbin5401
    @mohitrobbin5401 11 หลายเดือนก่อน

    That's really amazing 😍

  • @emiliaticiano3237
    @emiliaticiano3237 8 หลายเดือนก่อน

    explained perfectly understandable. Thanks☺

  • @ramadanbundu5953
    @ramadanbundu5953 8 หลายเดือนก่อน

    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
      @DesignWithArash  8 หลายเดือนก่อน

      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.

  • @farshadamirshoghi9323
    @farshadamirshoghi9323 ปีที่แล้ว

    Great one, Thank you dear Arash

  • @aumtripathi1665
    @aumtripathi1665 5 หลายเดือนก่อน

    best explanation of grids .

  • @daviddr2d2
    @daviddr2d2 8 หลายเดือนก่อน

    Very well described and very helpful. Thank you.

    • @DesignWithArash
      @DesignWithArash  8 หลายเดือนก่อน +1

      No problem. Glad it was helpful!

  • @nehasalma9083
    @nehasalma9083 5 หลายเดือนก่อน

    thanks Arash for this

  • @chiemerieokoye5260
    @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
      @DesignWithArash  ปีที่แล้ว

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

  • @Rigle
    @Rigle 7 หลายเดือนก่อน

    Great tutorial!

  • @marziyeh5571
    @marziyeh5571 ปีที่แล้ว

    Clear and concise

  • @IritAchiel
    @IritAchiel 5 หลายเดือนก่อน

    Very helpful video, thanks! :)

  • @alekseibedunkevits1566
    @alekseibedunkevits1566 3 หลายเดือนก่อน

    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
      @DesignWithArash  3 หลายเดือนก่อน

      No problem. Glad it helped.

  • @newyonface3700
    @newyonface3700 ปีที่แล้ว

    thankyou, This has cleared my lots of doubts

  • @rudrachakraborty1942
    @rudrachakraborty1942 9 หลายเดือนก่อน

    Thnx for this. its really helpfull

  • @Cecilia_Ibz
    @Cecilia_Ibz 5 หลายเดือนก่อน

    very usefull. Thanks!

  • @benSebastian.0k
    @benSebastian.0k 3 หลายเดือนก่อน

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

  • @chathurajayadinu
    @chathurajayadinu 11 หลายเดือนก่อน

    Thank you!

  • @yuno1535
    @yuno1535 6 หลายเดือนก่อน

    thank you so much!

  • @guidomelano
    @guidomelano 10 หลายเดือนก่อน

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

  • @jinsasinmu4572
    @jinsasinmu4572 4 หลายเดือนก่อน

    thank you very much!

  • @uifry
    @uifry 6 หลายเดือนก่อน

    Thats really helpful tutorial video for designers :)

  • @bossboss4508
    @bossboss4508 6 หลายเดือนก่อน

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

  • @shaansingh8704
    @shaansingh8704 ปีที่แล้ว +1

    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

  • @notawaffle9421
    @notawaffle9421 5 หลายเดือนก่อน

    Nice video, thanks👍

  • @youandi8236
    @youandi8236 14 วันที่ผ่านมา

    Noted hahaha , thank u for the valuable information sir .

  • @shpiliche
    @shpiliche ปีที่แล้ว +1

    Thanks for such good content you did =)

  • @ZackDiD
    @ZackDiD 6 หลายเดือนก่อน

    I barely comment on videos but arash you are exceptional WOW

    • @DesignWithArash
      @DesignWithArash  6 หลายเดือนก่อน

      Thank you so much. That's so nice of you.

  • @MostcallmeTim
    @MostcallmeTim 9 หลายเดือนก่อน

    Straight to the point, 100% understandable = sub!

    • @DesignWithArash
      @DesignWithArash  9 หลายเดือนก่อน

      Glad you liked it. Welcome to the channel.

  • @SohanuRahman97
    @SohanuRahman97 5 หลายเดือนก่อน

    Thanks a lot dear❤

  • @namankeshri9172
    @namankeshri9172 ปีที่แล้ว

    Thanks!

  • @aminadavg
    @aminadavg 10 หลายเดือนก่อน

    I like the image goes outside of the grid

  • @sarathchandraroy5557
    @sarathchandraroy5557 3 หลายเดือนก่อน +2

    Respect button🙏