You did what Figma couldn't do despite being the creators. The problem with their 'tutorials' is that in an effort to be stylish, and professional - they completely fail to show the concepts in action. Thanks for breaking down one of the more advanced, and extremely confusing parts of Figma. Wish I saw this video starting out, thanks Chris!
In computing, the term Boolean means a result that can only have one of two possible values: true or false. Boolean logic takes two statements or expressions and applies a logical operator to generate a Boolean value that can be either true or false. Hence why Figma uses Boolean and not Visible. Enjoyed the tutorial
I have subscribed and turned notifications on many YT channels but yours.... It's on another level! Coding and Design? That's awesome man, thank you. Keep it up!
🙏 very kind of you :) I don’t know that I consider myself a true designer or developer, but I’m hopeful talking through what I’m learning in public can be helpful to others ☺️
@@CodinginPublic yeah I feel the same even though I know a couple of things in both design and code. But definitely keep posting about design and code, I love this and have learned new things. Thank you
Best tutorial ever. Could you just say to me why when I place my Indicator on the corner of card goes out of Card layer , even with absolute position, and then I cannot make layer boolean for indicator ???
I thinkI may have figured it out. I am still learning all this.. but the boolean icon seems to only show when an element it nested in parent component.
I am at the part where you are adding a layer boolean property to the badge and I don't see the boolean icon to select it order to get the property panel. Why is it not there? Ugh so frustrating
Hmm. You need to make sure the item you’re trying to show/hide is part of the component. I did another video on my channel introducing these and go into a little more detail there. Might be worth checking that out?
Thank you so much for clarifying how coding applies to design like boolean is created in Layer when something has to do with visual on and off switch. When does designer should use Clip the Content? sometimes Figma automatically creates it when I add the frame to several components. A lot of animation prototyping tutorial use Clip the content first before any button reacting animation. Is it working like a retainer or group?
Great tutorial man! Followed it to the T. I just faced the same issue you showed at the end 21:23 where the space was remaining when hiding the image and badge. How do you fix that? Love the work man I learnt so much in just 20 minutes
Great! I'd fix it by setting a fixed height and width on the icon that is the same as my font height. That way whether it's visible or not, the size would stay the same. Hope that helps!
I've been battling the longest time with that, did a course, watched tutorials, couldn't grasp it. Finally with your tutorial I had a light bulb moment. Thank you.
Anyone else having their icon dimensions altered when you switch icons for the button? Is there a setting to keep the proportions and either resize the button or resize the icon?
This comes from having your icon height taller than your font size. I can think of three solutions: 1) increase your font size to be the same as the icon height 2) shrink the icon height to the same height as your font size or 3) set a fixed height on the button component. Let me know if that doesn't make sense.
Quick question! I've done an auto layout for 3 cards arranged horizontally. These 3 cards have varying width sizes. In order for them to behave responsively, I set the width and height to fill (that worked perfectly for the pervious row of 4 cards the same size). But now, when I set them to fill, Figma enlarges the thin card so it's equal in width size to the other cards it's in auto layout with.I don't want that but "fixed" and "hug" keep the cards stagnant when shrinking the screen. I've been trying to problem solve this for over 20 hours and can't find a youtube video or article that addresses this. If you have any suggestions at all, I would really, really appreciate it.
@@CodinginPublic I only work in pure vanilla and html/css and lately learn svelte but anything your prefer. Mostly would be exceptional helpful to see the next step to implement this card to finish code. So anything you prefer. P.S. I discover that when I hide both the badge and the image the card don't shrink as the image leave a kind placeholder frame. If I remove the Auto-layout off those two, everything work just fine.
You did what Figma couldn't do despite being the creators. The problem with their 'tutorials' is that in an effort to be stylish, and professional - they completely fail to show the concepts in action. Thanks for breaking down one of the more advanced, and extremely confusing parts of Figma. Wish I saw this video starting out, thanks Chris!
So glad it was clear!
Their videos are completely fine just like this one.
Thanks Chris, as a newbie to Figma, I learnt a lot from this video
It's always better to start from scratch. Thanks mate for making tutorials like that, much easier to follow.
Sure thing. You’re welcome! Thanks for saying something!
Honestly nobody else can teach components and variants like you!
Glad you enjoyed it!
This is the tutorial I have been trying to find for weeks. Thank you!
You're very welcome!
In computing, the term Boolean means a result that can only have one of two possible values: true or false. Boolean logic takes two statements or expressions and applies a logical operator to generate a Boolean value that can be either true or false. Hence why Figma uses Boolean and not Visible. Enjoyed the tutorial
It was the most informative video I've come across for learning about card components and variants. Truly excellent!
That’s so kind. Thank you!
I have subscribed and turned notifications on many YT channels but yours.... It's on another level! Coding and Design? That's awesome man, thank you. Keep it up!
🙏 very kind of you :) I don’t know that I consider myself a true designer or developer, but I’m hopeful talking through what I’m learning in public can be helpful to others ☺️
@@CodinginPublic yeah I feel the same even though I know a couple of things in both design and code. But definitely keep posting about design and code, I love this and have learned new things. Thank you
Thanks for the encouragement!
There is a new feature "expose component instances" which is great. See: ua-cam.com/video/HTJA9CrCATs/v-deo.html
Wow nice!
this video is a gold mine for me... thank you for your time and knowledge...
So glad you enjoyed it. Thanks for taking the time to say something!
Am becoming better by watching ur videos.
Thank you for the effort you put in
Your video are now my to go resources when am stuck 🙏
So glad they've been a help!
Best tutorial ever.
Could you just say to me why when I place my Indicator on the corner of card goes out of Card layer , even with absolute position, and then I cannot make layer boolean for indicator ???
Glad it was a help! I don't know that I understand your question. Could you try to ask it again? Thanks!
I thinkI may have figured it out. I am still learning all this.. but the boolean icon seems to only show when an element it nested in parent component.
Ah, you got it. :)
@@CodinginPublic Great! :) and I really appreciated your vid by the way. Super helpful!
Awesome!
I am at the part where you are adding a layer boolean property to the badge and I don't see the boolean icon to select it order to get the property panel. Why is it not there? Ugh so frustrating
Hmm. You need to make sure the item you’re trying to show/hide is part of the component. I did another video on my channel introducing these and go into a little more detail there. Might be worth checking that out?
sooooooo useful, thank you for explaining so well brother
So glad it was a help!
Thank you so much for clarifying how coding applies to design like boolean is created in Layer when something has to do with visual on and off switch. When does designer should use Clip the Content? sometimes Figma automatically creates it when I add the frame to several components. A lot of animation prototyping tutorial use Clip the content first before any button reacting animation. Is it working like a retainer or group?
My understanding is that clip content works like overflow: hidden in CSS? I think that's right?
Awesome video! Your explanation is the best! Thanks a lot!
Glad it was helpful!
Hi, thank you for your videos is helping me a lot, I have a question, how do you manage variants with cards?
Glad you enjoyed it! I am not sure I understand your question? Do you mind explaining a bit more? Thanks!
Great tutorial man! Followed it to the T. I just faced the same issue you showed at the end 21:23 where the space was remaining when hiding the image and badge. How do you fix that?
Love the work man I learnt so much in just 20 minutes
Great! I'd fix it by setting a fixed height and width on the icon that is the same as my font height. That way whether it's visible or not, the size would stay the same. Hope that helps!
Ah man, such a great video!
Glad you enjoyed it!
lucky to find this tutorial!~
Glad it was a help!
Thanks Chris! Thanks a lot!!!
Sure thing!
Wow, Lovely! thank you✨
You’re very welcome! So glad you enjoyed it! ☺️
thank you for this great tutorial!
You're very welcome!
This is so useful! Thank you!
Great! Thanks for saying something!
Thanks its really help me a lot
So glad you’ve found it a help!
Damn sir you are such good teacher!
That’s very kind. Glad you enjoyed the video!
I've been battling the longest time with that, did a course, watched tutorials, couldn't grasp it. Finally with your tutorial I had a light bulb moment. Thank you.
I’m so glad it was such a help! That’s so encouraging to hear. Thanks for sharing!
Anyone else having their icon dimensions altered when you switch icons for the button? Is there a setting to keep the proportions and either resize the button or resize the icon?
This comes from having your icon height taller than your font size. I can think of three solutions: 1) increase your font size to be the same as the icon height 2) shrink the icon height to the same height as your font size or 3) set a fixed height on the button component. Let me know if that doesn't make sense.
Quick question! I've done an auto layout for 3 cards arranged horizontally. These 3 cards have varying width sizes. In order for them to behave responsively, I set the width and height to fill (that worked perfectly for the pervious row of 4 cards the same size). But now, when I set them to fill, Figma enlarges the thin card so it's equal in width size to the other cards it's in auto layout with.I don't want that but "fixed" and "hug" keep the cards stagnant when shrinking the screen. I've been trying to problem solve this for over 20 hours and can't find a youtube video or article that addresses this. If you have any suggestions at all, I would really, really appreciate it.
Sorry for my delay here, HB. Hmm…any chance you could send me a copy of the project? Hard to visualize. chris@codinginpublic.dev works or Twitter DM.
Awesome tutorial, tnx
You’re welcome! Glad it was a help!
thank you very very much it was really helpfull
You're welcome! Thanks for saying something!
🤝 thanks! Clean, useful lesson!
🙏 glad it was a help!
Great! Would be interesting to see how exact this card could be recreated in code and is responsible
I'd have to choose some kind of tech stack. Right now, I'd use Astro or React. Have a preference?
@@CodinginPublic I only work in pure vanilla and html/css and lately learn svelte but anything your prefer. Mostly would be exceptional helpful to see the next step to implement this card to finish code. So anything you prefer.
P.S. I discover that when I hide both the badge and the image the card don't shrink as the image leave a kind placeholder frame. If I remove the Auto-layout off those two, everything work just fine.
awesome tutorial ! thanks
Glad toy enjoyed it. Thanks for saying something!
Thank you~
You're welcome 😊
Thank you
I have NO IDEA how you created the sold pill shape???
Just increase the border radius to something like 50 or 100 in the right-hand sidebar. Let me know if that doesn't make sense.
7:10 Boolean
How to make a card no longer a component?
Right-click and detach component :)
FIGMA IS GETTING MESSIER WHERE I GAVE UP.. BUT U EXPLAINING WELL
Booleans are very confusing in Figma.
I did a more in-depth video on components, including Booleans, that may be a help: ua-cam.com/video/Z3In89pq8x4/v-deo.html
@@CodinginPublic Thanks. Really appreciate your high quality tutorials. 👍
Thanks for the kind words!
Thanks!
You’re welcome!