Create a Responsive Bento Grid for Web & UI Design | Figma Tutorial
HTML-код
- Опубликовано: 1 окт 2024
- 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.
![FendiDa Rappa - Clock Dat ft. Shamar Marco [Official Music Video]](http://i.ytimg.com/vi/3NBU8KHdxYY/mqdefault.jpg)
👉 Become a UI Designer with my UI Design & Figma Mastery course (17+ hours and 130+ lessons):
bit.ly/43v79vX
Figma animation course needed from scratch
Sure.
Thanks a alot, Looking forward for moree Hero Trends Tutorials😍🔥
More to come!
Can you do a tutorial on how to make a concave rounded corner? Thank you in advance
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
Thank you so much. Glad it helped.
nts: create a grid of image, video, graphical effects, audio, video, podcasts etc. with text and logo sections peppered in between.
Thank you so muck, it is done correctly
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 ❤️
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.
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.
I’ll keep that in mind.
Secondary, how create amazing interaction inside bento box , if you have ressources please.
Thanks you
Hi. That’s on my list.
Is there a way to change the border radius to the boxes as you resize the parent frame? - Automatically?
No. You can just use variables for that purpose.
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 :)
Thanks buddy....Very neatly explained
My pleasure
감사합니다. 실무에서 대시보드 디자인을 하는데 도움이 되었어요:)
No problem.
Ok this was a very good tutorial to start things with thanks
Glad it was helpful!.
آرش جان کانال یوتیوبت عالی هست. موفق باشی
ممنونم علیرضا جان. لطف داری. همچنین.
This tutorial need part 2 ! Really
I'll think about it.
Super!!! Thank you!
No problem.
Arash you're the best!!!!
Thank you.
helpful!!
Glad you found it helpful.
thanks
No problem.
Thanks bruh...!!!
No problem.
i absolutely love this video
Glad to hear that.
Great as usual. Thankyou!
Glad you enjoyed it.
You rock Arash!
Thank you so much.
Very Helpful
Thank you.
Great job 😊
Thanks.
Hi can you explain how scale box when hover in , without break responsive breackdown please
Sure.
oh thank you so much you are always here to help
You are very welcome.