The RIGHT Way to Use Figma Component Properties (card design tutorial incl figma file)

Figma has released some FIRE features this year! And I know you probably feel like it’s challenging to keep up. The more stuff they release, the harder it gets. But don’t worry, I've got you covered. In this video, I’ll go through step by step how you should use Figma's Component Properties and Auto Layout to create the most comprehensive card component you’ve ever seen!

I'll walk you through the four main types of Component Properties: Variants, Boolean, Text Properties, and Swap Instances. And then, we'll move into the beta component property features that were launched recently. In this video, I'll cover two of those most relevant when creating a robust card component like this: Expose Nested Instances and Preferred Values. For the last example, I'll also explain a somewhat complex concept called "Slots", which will help you design components that are easier to maintain for both development, design, and content creation. The RIGHT way to do it!

▬▬▬ Video Chapters ▬▬▬
00:00 – Intro
00:26 – 4 Types of Component Properties
01:19 – Variants
09:29 – Boolean
12:03 – Text Properties
14:30 – Swap Instances
16:59 – Beta Features Component Properties
17:16 – Expose Nested Instances
22:17 – Concept of "Slots"
22:56 – Preferred Values
27:48 – Final Words

▬▬▬ Source File ▬▬▬

▬▬▬ 🚀 Join our Free Skool Design Community ▬▬▬
Connect, learn, and grow with fellow designers

▬▬▬ Free Weekly Design Resources ▬▬▬
Sign up for the newsletter to get free resources every week!

▬▬▬ Who am I? ▬▬▬
Anik Devaughn

▬▬▬ Say whatsup! ▬▬▬

#figma #componentproperties #carddesign #autolayout #ux #ui #uxdesign #components #ui #designprocess

[katscandance]

Been struggling to learn all these for the past 4 MONTHS!!! Watched dozens of videos and still couldn’t fully grasp it.

Maybe I’m just slow, but your video helped me FULLY understand how to use these features in one night 🎉😅

[davidawokoya]

Yo!!!! Anik you such a great teacher. Never seen anyone explain these Figma features as simply as you did. Been struggling to understand these for ages now. Nested components and instance swap is the biggest take away for me. Looking forward to your video on variables. Not able to grasp variables properly to create a clickable dynamic app on Figma without doing it on webflow or Wordpress.

[satyambarnwal]

Thanks a lot Anik!! Love this content ❤❤

This is my 7th video on component props and believe me, No one has explained about it as you✨

[enzoespiritu]

This is the best free software Ive seen. Respect.

[Joooooooooolz]

Great vid. I've watched many vids trying to wrap my head around this while still trying to keep up with my day-to-day work. Your pace and examples were perfectly executed. Thank you 🙌🏻

[bartoszpietrzak]

I have no idea why you keep getting so little views. Great content, as always. Thank you!

[MelindaMatturro]

THANK YOU for breaking this down so simply! These features have overwhelmed me for a while that I just can’t get a hang of it (a former sketch user) although I know it would make future processes faster after learning 😅 appreciate the practice file! Love your content!

[bri]

thank you so much for these tutorials! i've been having the hardest time understanding auto layout & components you break it down in such a clear way that i finally understand how to add it into my workflow. i subscribed so fast lol.

[bagchi_sagnik]

Please keep your videos coming, hopefully you'll grow into a huge channel soon!

[kart]

Great tutorial! Love your teaching style!

[ekaterinadergam]

Thank you so much again!It could be so so nice and interesting to see from you designing maybe app or web page, step by step, explaining how to make it as a good knowledgeable designer, because all content creators they don't explained good as you do!

[soyrovot]

thank you a lot for this videos, keep motivated pls!

[АллаРомашкова-шм]

Hi
Thank you for your cool videos. Love it 😍😍

[einzelstein]

What if you want to change the padding of the first component? Does this apply to all other copies?

[angelacalvin]

I am following step by step, but when you get to the new beta section for nested compenents, I don't get the panel for exposed properties from nested instancces. Ugh frustrating.I tried to go back and see why it does not show. But can't figure it out. **Update to my comment. I happened to go on another video and in the comments someone happened to say that you had to turn on the beta setting in accounts! wth!??? how would someone even know that!? ugh. So crisis averted geez.

[fredenbror]

How is it possible to keep rounded corners in the card that doesnt get affected by show/hide img?

[novenastudio]

link doesnt work for me. how to fix it?

[Goofykumar]

ah thank you now I know how to create this shitty boolean thing lmao