Figma Bento Cards Design Principles

[@specialfriedrice4949]

Amazing work guys, commenting to boost the video letsgoooo

[@codenameunknown3791]

The best of the best. This is a number 1 design resource for me now. Would love to see a slightly slower pace/longer videos so i could catch up more easily! Brutal work and keep it up.

[@davidisiekwene]

Definitely looking forward to slower paced videos. This channel is a gem

[@jaylinbooker]

Couldn’t agree more. His content is so refreshing

[@jessemalisa6804]

Clicked just to take a quick look but ended up watching the whole thing. Interesting stuff, thanks for sharing!

[@pixelpoint-io]

That's the greatest praise! Thank you!

[@porushpuri]

GOATed Content! Thanks for creating this

[@waqaaar]

Question: At 1:32 the line height of the subtitle text is 137.5%, curious to understand how did we land on this number? Because even if we convert that into pixels it comes to 24.75px.

[@matheussantos4312]

insane edition 🔥

[@ahmeddaud9233]

Prolly the best UI design channel on the internet

[@pixelpoint-io]

Wow, thanks!

[@garyvoigt321]

Beautiful design, amazing video.

[@designjayesh7928]

Thanks man! For sharing this!

[@sajjad_aziz]

Valuable content ❤

[@michaelpauls7006]

Absolutely killing it. 🔥

[@FlorianBelz]

Amazing work and video as always ! Thanks Alex and all the team 🙏

[@kishorekankipati743]

Great... thanks to the team creating this tutorial.

[@santhosh_J]

You did a great job🎉, I love the process and design. As a designer to dev pov, using too much effect makes a loading time high, and most of the time mask layer isn't working in realtime code.when I move this design to a web layout to a tablet responsive design that was most tricky part us, gradient stroked lines not even work properly instead of that we use svg, while scaling we need provide different asset different devices 😢 how you guys tackle this problem ..

[@digitalsahara6670]

Amazing work! I really love the effort you put into those videos and the output. I was wondering whether you will be creating a handoff type of video from design to code. Would love to see that.

[@fact2hackM]

Really cool

[@wittywolk]

Great work as always, thank you!

[@Sadique-u8n]

Great video 🤌🔥

[@MartinGomezWD]

Incredible quality. On everything. Big fan.

[@solomonfesshaye6366]

Wow, thank you guys

[@PremKumar-gl2tr]

this video is a chef's kiss 😘👌

[@pixelpoint-io]

Ha-ha, glad you liked it!

[@UnchainedExperience]

Awesome tutorial!

[@mariajackson8923]

Great video. Well done.

[@SmartPhoneDesigner]

Well You deserved million subs ❤💕💕 hoping for more content on development side Thank you.

[@robertkreft5653]

Great visual skills, very helpful!

[@AtomicPixels]

You need to base your spacing and radius and size based on an actual vertical rhythm set by your baseline line-height. Formula? Baseline x line-height = vertical rhythm. Eg 18px * 1.5 = 27px. That’s your row height, column size, margins, and everything is a multiple of that value. Radius: FontSize (of whatever your component is using in the typescale like h6/24px) + scale(-2) = radius Eg take the size of what’s 2x below your h6, so go from 24px then look at baseline 18px then you’d be at the body or 16px. That’s your radius for a card using the h6 as its primary text element.

[@BLTDFRNT]

easily became one of my favorite youtube channels, love love

[@miraz_kabir]

Full breakdown video in slow speed will be more helpful 💝

[@bright_moses]

Your channel is a blessing in disguise... am still going through your videos.. planing on watch and replicating every single one.. thank you 😊

[@pixelpoint-io]

Thank you! You will become a pro if you do this.

[@Deckard76]

Even though this style or trend of design is not something I typically engage with, your video was very well made and interesting to watch. Thank you!

[@jmg9509]

Excellent, excellent, excellent. Will be using something similar to this aesthetic for a post

[@SamiaSiddika-ku4ng]

I usually don’t comment on KZbin, but I fell in love with your design. It's really cool with great details.

[@pixelpoint-io]

I hope there will be more people with that attitude :) Thank you very much for the support!

[@amer4716]

I can't explain how good this tutorial is, thank you so much!!!!!

[@pixelpoint-io]

Thank you very much! Don't hesitate to share it with friends; we need more eyes on it.

[@tuningzhou1203]

Wow!!!! Nice work, thanks for sharing.

[@EzanAsif02]

Alex with another banger 🔥🔥

[@IDRIS.A.H]

Amazing work rate

[@foyzulhasan4242]

Finally KZbin Recommending Something Good

[@pixelpoint-io]

I wish KZbin recommend it more 😄 Thank you!

[@simonl9027]

Thank you very much for this tutorial. I'll be subscribing straight away. Quick question: where does the texture you use come from, please?

[@rodz]

GOAT content fr

[@dollarproduction0]

Taste of excellency! Brilliantly designed overall ❤🌈

[@pixelpoint-io]

Thank you!

[@guilhermeaugusto9541]

can u make a tutorial showing how to export the groups of textures and borders that u applied in the frames?

[@abhayrahul482]

I really appreciate the tutorial. Thank you. 😊 How do I take this to website? Like how do I optimise this for Framer/Webflow?

[@rohankambli9929]

Yayy, thanks for this.

[@haythamwali6642]

My new favorite KZbin channel. Keep up the great work ❤❤❤❤.

[@pixelpoint-io]

Thank you! Will do!

[@luannunes7404]

Another great video... Please do break down series.. in slower pace, it woul be fantastic to learn.

[@AzizulIslam-oq8cj]

Amazing sir !! Thank you !

[@kavineesh12]

Wow just wow 🤩

[@shikher123yo]

nailed it!

[@RakibulislamJoy-su9sq]

Great Tips

[@phillipdave3211]

amazing! can you make something similar for a light background pls?

[@u_walk2251]

i'm lovin it, lets have a glass of wine under that gorgeous bridge. albi looks great. so does your work

[@pixelpoint-io]

@@u_walk2251 with a great pleasure 😀 thank you!

[@playpiano2264]

How do I export this perfectly to Framer!!! Pls make a video on it

[@hamidsafari1748]

That's awesome

[@ar.manimaran]

Amazing

[@Bob-qf5ue]

I hardly ever comment :D but please don’t stop posting videos

[@pixelpoint-io]

@@Bob-qf5ue Thank you for the support! It means a lot to us. We need every like and comment at this stage.

[@jofrnr1398]

Incroyable

[@rohitsaluja7491]

which software you use for creating this amazing stuff, very inspiring.

[@mahmudzar]

Figma

[@rohitsaluja7491]

@@mahmudzar I mean the video :)

[@byanadam1780]

bro, thank you so much

[@TolaFJB]

How did you add the texture to the number

[@heyabdullah3700]

thx man

[@dariamag1937]

what is the name of the music playing in the background? :)

[@teksdesign]

Thanks

[@Spdif77]

Make Skeuomorphism Great Again!

[@MunzirKareem]

🔥🔥

[@u_walk2251]

finally i am home

[@wasifzaki]

It was going so quickly that I had to pause 20-30 times to comprehend the applications.

[@pixelpoint-io]

I'm still experimenting with a format. I don't want those videos to be boring and want to highlight techniques in the practical part as well as share a broader vision, so they can be engaging and enjoyable while you drink your favorite beverage on a break. Slow, step-by-step parts are unfortunately much less popular in general because people need to dedicate a significant amount of time and effort to reproduce it themselves. We value those people very much, so this time we added links to Figma with final designs and 1x speed screencasts of the design process, so it's easy to follow if you want at own pace. Thank you very much for the feedbaack!

[@rodnem]

Hummm… without a doubt it is perfectly executed and gorgeous but… I already know the front end developer reaction… To my mind the process must be a bit different for a good handoff. Please can you make a second part to show the responsive behaviours of your cards? How you manage the fonts, paddings, margins, border-radius changes depending on the breakpoints ? Thanks Doing a single image of this composition is not the right solution.

[@pixelpoint-io]

Thank you! I keep getting this question about devs, so I will probably do another video about it :) It feels like neither developers nor designers understand how simple it is to implement. > How you manage the fonts, paddings, margins, border-radius changes depending on the breakpoints? Good point, forgot to highlight it in the video. In the examples shown in the tutorial, you can go even without changing font-size/paddings,margins/border radius on different breakpoints. They will still look fine, in case it much the overall size reduction across other sections of the site. If the font size is 18px, you can simply change it to 16px on mobile devices if you need a more compact version. Paddings can be adjusted slightly from 20px to 16px. You can check examples of bento cards we developed for neon.tech and huly.io on different resolutions.

[@afiuza1718]

Amazing UI but what a nightmare for the DEVs...