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

In this video, I'm going to walk you through creating a responsive Bento Grid in Figma.
👉 Become a Pro UI Designer with my UI Design & Figma Mastery course:
bit.ly/43v79vX
📸 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

[@urhelpinghand]

Great share, I was looking for this and you explained it very well arash. Quality of your content is amazing, we need more content like this

[@DesignWithArash]

Thank you so much. Glad it helped.

[@Saissh7]

Figma animation course needed from scratch

[@DesignWithArash]

Sure.

[@bjgjuiuguoojpoo]

Can you do a tutorial on how to make a concave rounded corner? Thank you in advance

[@vagabondfeet]

nts: create a grid of image, video, graphical effects, audio, video, podcasts etc. with text and logo sections peppered in between.

[@FloNocode]

This tutorial need part 2 ! Really

[@DesignWithArash]

I'll think about it.

[@FloNocode]

Hi Arash how are you ? Can you please make a part 2 for explain how since figma build in framer or webflow please for webdesigner. I love bento box trends. Thanks for your tutorial.

[@DesignWithArash]

I’ll keep that in mind.

[@바림-h4j]

감사합니다. 실무에서 대시보드 디자인을 하는데 도움이 되었어요:)

[@DesignWithArash]

No problem.

[@SisiBisi-zh1cj]

Thank you so muck, it is done correctly

[@noobicorn_gamer]

Ok this was a very good tutorial to start things with thanks

[@DesignWithArash]

Glad it was helpful!.

[@josephstutts2231]

Great as usual. Thankyou!

[@DesignWithArash]

Glad you enjoyed it.

[@helderhelderhelder]

You rock Arash!

[@DesignWithArash]

Thank you so much.

[@sparkleteam8977]

Super!!! Thank you!

[@DesignWithArash]

No problem.

[@ZKHAX]

Thanks a alot, Looking forward for moree Hero Trends Tutorials😍🔥

[@DesignWithArash]

More to come!

[@Sahilmohd1082]

Hii arash,
Is your course on skill share updated bcz You didn't use more auto layouts like your ui design mastery course (my friend has taken your course). And I want to take your course but he told me you have made a simple website(which is nice) but if we use auto layout like in your design course can we design website which looks amazing like your skillshare course landing page design. Please answer this. Thank you ❤️

[@DesignWithArash]

Hi there.
No, my Skillshare course is not updated. My most up-to-date course is the UI Design & Figma mastery. Yes, once you master the Auto Layout you can design any kind of project.

[@ashleykursey4900]

Is there a way to change the border radius to the boxes as you resize the parent frame? - Automatically?

[@DesignWithArash]

No. You can just use variables for that purpose.

[@vadim_sharapov]

Hi, I was working on a Design System where we aimed to implement a formula for calculating the border radius, as it is indeed a brilliant idea. In this context, you have two options. The first is to use breakpoints and assign different border radii for each variant, which suits designs that employ breakpoints rather than fluid design. The second option, which I eventually chose, involves communicating with the development team the need to calculate the border radius based on the width and height, as shown in this CSS example: .
element {
width: 50vw;
height: 30vh;
border-radius: calc(1vw + 1vh);
}
I find this approach much simpler in practice because it is quicker. Even if you calculate based on variables in Figma, you will still need to convey the logic of resizing to the developers.
Hope that helps :)

[@animavilis4077]

Great job 😊

[@DesignWithArash]

Thanks.

[@jacksonuxd]

Very Helpful

[@DesignWithArash]

Thank you.

[@selvabalaji4564]

Thanks bruh...!!!

[@DesignWithArash]

No problem.

[@waqasmalik1]

thanks

[@DesignWithArash]

No problem.

[@aalmuksitahmedqurishe6162]

helpful!!

[@DesignWithArash]

Glad you found it helpful.

[@FloNocode]

Hi can you explain how scale box when hover in , without break responsive breackdown please

[@DesignWithArash]

Sure.

[@FloNocode]

Secondary, how create amazing interaction inside bento box , if you have ressources please.
Thanks you

[@DesignWithArash]

Hi. That’s on my list.

[@alirezakhelghat]

آرش جان کانال یوتیوبت عالی هست. موفق باشی

[@DesignWithArash]

ممنونم علیرضا جان. لطف داری. همچنین.

[@kunal007216]

Thanks buddy....Very neatly explained

[@DesignWithArash]

My pleasure

[@m7280]

Arash you're the best!!!!

[@DesignWithArash]

Thank you.

[@joyejironiovo1179]

i absolutely love this video

[@DesignWithArash]

Glad to hear that.

[@BusraCaylar-uh8mi]

oh thank you so much you are always here to help

[@DesignWithArash]

You are very welcome.