How to Create a Card Component in Figma (Variant, Boolean, Instance Swap, and Text)

[@pozup1596]

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!

[@CodinginPublic]

So glad it was clear!

[@iamavro]

Their videos are completely fine just like this one.

[@xGSTQ]

Thanks Chris, as a newbie to Figma, I learnt a lot from this video

[@MilanB]

It's always better to start from scratch. Thanks mate for making tutorials like that, much easier to follow.

[@CodinginPublic]

Sure thing. You’re welcome! Thanks for saying something!

[@maaznadeem120]

Honestly nobody else can teach components and variants like you!

[@CodinginPublic]

Glad you enjoyed it!

[@grantsmith1974]

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

[@jacobfuller9532]

This is the tutorial I have been trying to find for weeks. Thank you!

[@CodinginPublic]

You're very welcome!

[@leilaazmand4946]

It was the most informative video I've come across for learning about card components and variants. Truly excellent!

[@CodinginPublic]

That’s so kind. Thank you!

[@_the_one_1]

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!

[@CodinginPublic]

🙏 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 ☺️

[@_the_one_1]

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

[@CodinginPublic]

Thanks for the encouragement!

[@_the_one_1]

There is a new feature "expose component instances" which is great. See: kzbin.info/www/bejne/foWtcmx5p6h0itU

[@CodinginPublic]

Wow nice!

[@imeuboh7739]

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 🙏

[@CodinginPublic]

So glad they've been a help!

[@henimex]

this video is a gold mine for me... thank you for your time and knowledge...

[@CodinginPublic]

So glad you enjoyed it. Thanks for taking the time to say something!

[@cryptoengineerq831]

sooooooo useful, thank you for explaining so well brother

[@CodinginPublic]

So glad it was a help!

[@rastamamka]

Awesome video! Your explanation is the best! Thanks a lot!

[@CodinginPublic]

Glad it was helpful!

[@fatemefadaei7729]

Wow, Lovely! thank you✨

[@CodinginPublic]

You’re very welcome! So glad you enjoyed it! ☺️

[@Nasrin.Designer]

Thanks its really help me a lot

[@CodinginPublic]

So glad you’ve found it a help!

[@animehubking1537]

thank you very very much it was really helpfull

[@CodinginPublic]

You're welcome! Thanks for saying something!

[@bernhardsmuts2265]

Ah man, such a great video!

[@CodinginPublic]

Glad you enjoyed it!

[@designerdesignero]

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 ???

[@CodinginPublic]

Glad it was a help! I don't know that I understand your question. Could you try to ask it again? Thanks!

[@AnneSong-d8u]

lucky to find this tutorial!~

[@CodinginPublic]

Glad it was a help!

[@olenapodolian5625]

thank you for this great tutorial!

[@CodinginPublic]

You're very welcome!

[@sae-heeshin8548]

This is so useful! Thank you!

[@CodinginPublic]

Great! Thanks for saying something!

[@learningtostream3919]

Damn sir you are such good teacher!

[@CodinginPublic]

That’s very kind. Glad you enjoyed the video!

[@learningtostream3919]

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.

[@CodinginPublic]

I’m so glad it was such a help! That’s so encouraging to hear. Thanks for sharing!

[@annrivka8720]

🤝 thanks! Clean, useful lesson!

[@CodinginPublic]

🙏 glad it was a help!

[@laxmanpatil81]

Thanks Chris! Thanks a lot!!!

[@CodinginPublic]

Sure thing!

[@Fad-kun]

Thank you

[@travis_saldanha]

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

[@CodinginPublic]

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!

[@brahim2462]

This is amazing! please more of the design things... "prototype apps websites" Thank You.

[@CodinginPublic]

More work in Figma in particular? I haven't done that much on my channel because I definitely don’t have any design training and just “do whatever feels right”? haha. I'm pretty sure I shouldn't be teaching HOW to design, but I'm happy to just show what I do?

[@brahim2462]

@Coding in Public hi, yes on Figma, I'm a designer myself. It would be cool if you can share from you're prospective as a developer, Thanks.

[@CodinginPublic]

Sure thing :) Just no judging my designs 🤣

[@brahim2462]

@Coding in Public can't guarantee that.... 😁🤓

[@CodinginPublic]

🫣

[@topalek]

Awesome tutorial, tnx

[@CodinginPublic]

You’re welcome! Glad it was a help!

[@embersadat8130]

awesome tutorial ! thanks

[@CodinginPublic]

Glad toy enjoyed it. Thanks for saying something!

[@digiratimax]

Thanks!

[@CodinginPublic]

You’re welcome!

[@andreapaolapinzonbarbosa9278]

Hi, thank you for your videos is helping me a lot, I have a question, how do you manage variants with cards?

[@CodinginPublic]

Glad you enjoyed it! I am not sure I understand your question? Do you mind explaining a bit more? Thanks!

[@lambisstratoudakis]

Great! Would be interesting to see how exact this card could be recreated in code and is responsible

[@CodinginPublic]

I'd have to choose some kind of tech stack. Right now, I'd use Astro or React. Have a preference?

[@lambisstratoudakis]

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

[@michb6074]

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?

[@CodinginPublic]

My understanding is that clip content works like overflow: hidden in CSS? I think that's right?

[@angelacalvin5790]

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

[@CodinginPublic]

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?

[@angelacalvin5790]

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.

[@CodinginPublic]

Ah, you got it. :)

[@angelacalvin5790]

@@CodinginPublic Great! :) and I really appreciated your vid by the way. Super helpful!

[@CodinginPublic]

Awesome!

[@smilli6415]

FIGMA IS GETTING MESSIER WHERE I GAVE UP.. BUT U EXPLAINING WELL

[@h.b.1315]

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]

Sorry for my delay here, HB. Hmm…any chance you could send me a copy of the project? Hard to visualize. [e-mail] works or Twitter DM.

[@JimKernix]

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?

[@CodinginPublic]

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.

[@JimKernix]

I have NO IDEA how you created the sold pill shape???

[@CodinginPublic]

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.

[@camy6369]

How to make a card no longer a component?

[@CodinginPublic]

Right-click and detach component :)

[@nguyenhiep9868]

7:10 Boolean

[@Underhills]

Booleans are very confusing in Figma.

[@CodinginPublic]

I did a more in-depth video on components, including Booleans, that may be a help: kzbin.info/www/bejne/kGSsn2tvpdZrrpY

[@Underhills]

@@CodinginPublic Thanks. Really appreciate your high quality tutorials. 👍

[@CodinginPublic]

Thanks for the kind words!

[@AnneSong-d8u]

Thank you~

[@CodinginPublic]

You're welcome 😊