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

[@DesignWithArash]

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

[@pastonnom88]

I love the way you present! Thank you! Hope to have new vidéo on figma! And push your futur formation!

[@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.

[@ZKHAX]

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

[@DesignWithArash]

More to come!

[@SaisshbgmiYT]

Figma animation course needed from scratch

[@DesignWithArash]

Sure.

[@BusraCaylar-uh8mi]

oh thank you so much you are always here to help

[@DesignWithArash]

You are very welcome.

[@m7280]

Arash you're the best!!!!

[@DesignWithArash]

Thank you.

[@helderhelderhelder]

You rock Arash!

[@DesignWithArash]

Thank you so much.

[@FloNocode]

This tutorial need part 2 ! Really

[@DesignWithArash]

I'll think about it.

[@noobicorn_gamer]

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

[@DesignWithArash]

Glad it was helpful!.

[@kunal007216]

Thanks buddy....Very neatly explained

[@DesignWithArash]

My pleasure

[@vagabondfeet]

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

[@sparkleteam8977]

Super!!! Thank you!

[@DesignWithArash]

No problem.

[@bjgjuiuguoojpoo]

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

[@josephstutts2231]

Great as usual. Thankyou!

[@DesignWithArash]

Glad you enjoyed it.

[@ElisaFromElia]

Thanks, Arash! How can I set Min & Max Width and Height? I think using Auto Layout might work, but it makes the bentos misalign. Please let me know🙏

[@joyejironiovo1179]

i absolutely love this video

[@DesignWithArash]

Glad to hear that.

[@SisiBisi-zh1cj]

Thank you so muck, it is done correctly

[@alirezakhelghat]

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

[@DesignWithArash]

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

[@바림-h4j]

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

[@DesignWithArash]

No problem.

[@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.

[@animavilis4077]

Great job 😊

[@DesignWithArash]

Thanks.

[@selvabalaji4564]

Thanks bruh...!!!

[@DesignWithArash]

No problem.

[@aalmuksitahmedqurishe6162]

helpful!!

[@DesignWithArash]

Glad you found it helpful.

[@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 :)

[@uxwithjack]

Very Helpful

[@DesignWithArash]

Thank you.

[@waqasmalik1]

thanks

[@DesignWithArash]

No problem.

[@FloNocode]

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

[@DesignWithArash]

Hi. That’s on my list.

[@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.

[@FloNocode]

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

[@DesignWithArash]

Sure.