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.

Пікірлер: 48

  • @DesignWithArash
    @DesignWithArash4 ай бұрын

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

  • @urhelpinghand
    @urhelpinghand4 ай бұрын

    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

    @DesignWithArash

    3 ай бұрын

    Thank you so much. Glad it helped.

  • @josephstutts2231
    @josephstutts22314 ай бұрын

    Great as usual. Thankyou!

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Glad you enjoyed it.

  • @joyejironiovo1179
    @joyejironiovo11794 ай бұрын

    i absolutely love this video

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Glad to hear that.

  • @SAISSHBGMIYT
    @SAISSHBGMIYT4 ай бұрын

    Figma animation course needed from scratch

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Sure.

  • @user-kf5cr7vq8d
    @user-kf5cr7vq8d22 күн бұрын

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

  • @ZKHAX
    @ZKHAX4 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    More to come!

  • @FloNocode
    @FloNocode3 ай бұрын

    This tutorial need part 2 ! Really

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    I'll think about it.

  • @kunal007216
    @kunal0072162 ай бұрын

    Thanks buddy....Very neatly explained

  • @DesignWithArash

    @DesignWithArash

    Ай бұрын

    My pleasure

  • @noobicorn_gamer
    @noobicorn_gamer3 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Glad it was helpful!.

  • @helderhelderhelder
    @helderhelderhelder4 ай бұрын

    You rock Arash!

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Thank you so much.

  • @BusraCaylar-uh8mi
    @BusraCaylar-uh8mi2 ай бұрын

    oh thank you so much you are always here to help

  • @DesignWithArash

    @DesignWithArash

    Ай бұрын

    You are very welcome.

  • @m7280
    @m72802 ай бұрын

    Arash you're the best!!!!

  • @DesignWithArash

    @DesignWithArash

    2 ай бұрын

    Thank you.

  • @animavilis4077
    @animavilis40774 ай бұрын

    Great job 😊

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Thanks.

  • @jacksonuxd
    @jacksonuxd4 ай бұрын

    Very Helpful

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Thank you.

  • @selvabalaji4564
    @selvabalaji45644 ай бұрын

    Thanks bruh...!!!

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    No problem.

  • @aalmuksitahmedqurishe6162
    @aalmuksitahmedqurishe61623 ай бұрын

    helpful!!

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Glad you found it helpful.

  • @waqasmalik1
    @waqasmalik13 ай бұрын

    thanks

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    No problem.

  • @vagabondfeet
    @vagabondfeet3 ай бұрын

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

  • @alirezakhelghat
    @alirezakhelghat3 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

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

  • @FloNocode
    @FloNocode4 ай бұрын

    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

    @DesignWithArash

    4 ай бұрын

    I’ll keep that in mind.

  • @FloNocode
    @FloNocode4 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    4 ай бұрын

    Hi. That’s on my list.

  • @Sahilmohd1082
    @Sahilmohd10824 ай бұрын

    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

    @DesignWithArash

    3 ай бұрын

    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
    @ashleykursey49003 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    No. You can just use variables for that purpose.

  • @vadim_sharapov

    @vadim_sharapov

    3 ай бұрын

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

  • @FloNocode
    @FloNocode3 ай бұрын

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

  • @DesignWithArash

    @DesignWithArash

    3 ай бұрын

    Sure.