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

Поделиться
HTML-код
  • Опубликовано: 6 янв 2025

Комментарии • 92

  • @pozup1596
    @pozup1596 2 года назад +25

    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
      @CodinginPublic  2 года назад

      So glad it was clear!

    • @iamavro
      @iamavro Год назад

      Their videos are completely fine just like this one.

  • @xGSTQ
    @xGSTQ 3 месяца назад +1

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

  • @MilanB
    @MilanB 2 года назад +5

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

    • @CodinginPublic
      @CodinginPublic  2 года назад

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

  • @maaznadeem120
    @maaznadeem120 Год назад +1

    Honestly nobody else can teach components and variants like you!

  • @arsalanahmad1832
    @arsalanahmad1832 9 дней назад

    this tutorial has been very very helpful for me, it packaged lots of knowledge. Huge thanks and respects !

    • @CodinginPublic
      @CodinginPublic  9 дней назад

      I'm glad it was a help! Cheers!

    • @arsalanahmad1832
      @arsalanahmad1832 9 дней назад

      @ it’s created with so much care and planning, why wouldn’t it not be of help.

  • @jacobfuller9532
    @jacobfuller9532 Год назад +1

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

  • @leilaazmand4946
    @leilaazmand4946 Год назад

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

  • @grantsmith1974
    @grantsmith1974 Год назад +1

    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

  • @_the_one_1
    @_the_one_1 2 года назад +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
      @CodinginPublic  2 года назад +1

      🙏 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
      @_the_one_1 2 года назад

      @@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
      @CodinginPublic  2 года назад +1

      Thanks for the encouragement!

    • @_the_one_1
      @_the_one_1 2 года назад

      There is a new feature "expose component instances" which is great. See: ruclips.net/video/HTJA9CrCATs/видео.html

    • @CodinginPublic
      @CodinginPublic  2 года назад

      Wow nice!

  • @henimex
    @henimex Год назад

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

    • @CodinginPublic
      @CodinginPublic  Год назад

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

  • @imeuboh7739
    @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 🙏

  • @cryptoengineerq831
    @cryptoengineerq831 Год назад

    sooooooo useful, thank you for explaining so well brother

  • @rastamamka
    @rastamamka Год назад

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

  • @bernhardsmuts2265
    @bernhardsmuts2265 Год назад

    Ah man, such a great video!

  • @sae-heeshin8548
    @sae-heeshin8548 2 года назад

    This is so useful! Thank you!

  • @annrivka8720
    @annrivka8720 2 года назад

    🤝 thanks! Clean, useful lesson!

  • @fatemefadaei7729
    @fatemefadaei7729 Год назад

    Wow, Lovely! thank you✨

    • @CodinginPublic
      @CodinginPublic  Год назад

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

  • @AnneSong-d8u
    @AnneSong-d8u Год назад

    lucky to find this tutorial!~

  • @olenapodolian5625
    @olenapodolian5625 2 года назад

    thank you for this great tutorial!

  • @laxmanpatil81
    @laxmanpatil81 Год назад

    Thanks Chris! Thanks a lot!!!

  • @travis_saldanha
    @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
      @CodinginPublic  Год назад +1

      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!

  • @Nasrin.Designer
    @Nasrin.Designer Год назад

    Thanks its really help me a lot

  • @learningtostream3919
    @learningtostream3919 2 года назад

    Damn sir you are such good teacher!

    • @CodinginPublic
      @CodinginPublic  2 года назад +1

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

    • @learningtostream3919
      @learningtostream3919 2 года назад

      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
      @CodinginPublic  2 года назад

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

  • @embersadat8130
    @embersadat8130 2 года назад

    awesome tutorial ! thanks

    • @CodinginPublic
      @CodinginPublic  2 года назад

      Glad toy enjoyed it. Thanks for saying something!

  • @topalek
    @topalek 2 года назад

    Awesome tutorial, tnx

  • @animehubking1537
    @animehubking1537 Год назад

    thank you very very much it was really helpfull

    • @CodinginPublic
      @CodinginPublic  Год назад

      You're welcome! Thanks for saying something!

  • @designerdesignero
    @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
      @CodinginPublic  Год назад +1

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

  • @angelacalvin5790
    @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
      @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?

  • @michb6074
    @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
      @CodinginPublic  Год назад

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

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

  • @Fad-kun
    @Fad-kun 3 месяца назад

    Thank you

  • @h.b.1315
    @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
      @CodinginPublic  Год назад

      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.

  • @andreapaolapinzonbarbosa9278
    @andreapaolapinzonbarbosa9278 Год назад

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

    • @CodinginPublic
      @CodinginPublic  Год назад

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

  • @JimKernix
    @JimKernix 2 года назад

    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
      @CodinginPublic  2 года назад

      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.

  • @AnneSong-d8u
    @AnneSong-d8u Год назад

    Thank you~

  • @lambisstratoudakis
    @lambisstratoudakis 2 года назад

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

    • @CodinginPublic
      @CodinginPublic  2 года назад

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

    • @lambisstratoudakis
      @lambisstratoudakis 2 года назад

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

  • @nguyenhiep9868
    @nguyenhiep9868 Год назад

    7:10 Boolean

  • @camy6369
    @camy6369 Год назад

    How to make a card no longer a component?

  • @JimKernix
    @JimKernix 2 года назад

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

    • @CodinginPublic
      @CodinginPublic  2 года назад

      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.

  • @smilli6415
    @smilli6415 Год назад

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

  • @Underhills
    @Underhills 2 года назад

    Booleans are very confusing in Figma.

    • @CodinginPublic
      @CodinginPublic  2 года назад

      I did a more in-depth video on components, including Booleans, that may be a help: ruclips.net/video/Z3In89pq8x4/видео.html

    • @Underhills
      @Underhills 2 года назад

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

    • @CodinginPublic
      @CodinginPublic  2 года назад

      Thanks for the kind words!

  • @digiratimax
    @digiratimax 10 месяцев назад

    Thanks!