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

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

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

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!

I like the image goes outside of the grid

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

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

Thank you!

Arash thank you so much for your work! I always find your videos very inspiring and useful!
When I made a frame for 1440px and grid layout following your recommendations, and then created layouts for a website project within 1120px frames turns out that it is not actually responsible for 1920px screens, because all the layouts are got broken when I scale them wide: wider paddings and so on. Do we have to create two frames for desktop version of a website – one for the screens with resolution lower than 1440px and one for screens for 1920px? Or maybe I didn't get it right or something. Maybe I don't have to scale them wide at all?) I would be really appreciate if you respond me. Thank you anyways!

what is offset ya!?

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

Hi Arash, how did you select those grids in the design panel?

could you please write the measurements you said in the video for the containers ?

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

That's really amazing 😍

Hey Arash, This video is awesome. You covered an entire important portion in a very understandable manner ❤. I recently tried making a dynamic slider and PieChart controlled by values. While the values increase the chart will also increase while it decreases so do color in the chart. The same applies to the slider. Its not related to this video. But can you make a short tutorial on it. Thanks in advance 🙂

Hi @DesignWithArash,
This is really a great knowledge you have shared. Thanks a lot. 🙏
BUT, I think there is some typo while you are explaining. You are calling columns as horizontal grid & rows as vertical. Don't you think, it should be opposite. Columns should be vertical grids & rows should be horizontal. Please let me know as I have confused.

好厲害

thank you

7:00 Horizontal and vertical words have been flipped by mistake

Thank you!

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

THAAAAAAAANKS

Thank you !

You are an angel! 😂Thanksss!!

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

In the mobile grid system, when the 4-column setting is 16px, margin and gutter, 2 columns become 77, 2 columns become 78px. Does this pose a problem? thanks.

Request: Could you please make videos for different screens? Android IOS and desktop 🤲

This was so helpful. Been struggling with calculation grids but I'm glad for this.

Please keep doing what you're doing, mich appreciated

🤍

Hi, thank you Arash for your sharing. So are there any differences when creating a fluid grid layout and a fixed grid layout? and which type of layout is better in your opinion?

This video is pure gold! Thank you.

thanks

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

Hey there, great video! One question tho, why do you use the 1440×1024 frame for desktop and not the 1920×1080 since it's the most used screen size?

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

Thanks for such good content you did =)

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

you did not talk about how to calculate what margin you want

Thanks Arash this is really helpful!
For the next maybe you can cover about Saas Design/dashboard grid system.. 😁

Thanks!

wow that's great

What about the 1920 screen, should we use same layout grid? @DesignWithArash

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 .

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

Such a great idea to get the object snapping into the grid – however if i move around any object it doesn't snap to the layout grid and I also can't find a option to make it snap to the grid – can you tell me how you did that, Arash? Or anyone?

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

How exactly can you implement this in code though? In CSS for example.