Master Figma Component Properties (Complete Tutorial)

0:00 Intro
0:29 Create Figma component
1:09 Difference between instance and master component in Figma
1:34 Text component property in Figma
3:45 Variant component property in Figma
6:06 Preserve text values using text property in Figma
7:17 Create card component in Figma
8:12 Import icons to your Figma file
8:48 Create multiple components in Figma separately
9:53 Collapse layer shortcut in Figma
10:18 Nest auto layout inside auto layout in Figma
10:45 Nesting 3 auto layouts in Figma
11:54 Auto layout fill property
12:22 Instance swap property in Figma
14:18 Boolean component property in Figma
16:18 Text component property in Figma
16:49 Conditionally show and hide component properties in Figma
17:32 Expose nested instances in Figma

In this video, you'll learn:
- What Figma Component Properties are and why they matter
- How to create and manage components effectively
- Tips and tricks to leverage properties for dynamic design
- Real-world examples to solidify your understanding

Hire us for 1-1 tutoring:

Our courses on Udemy:

Get a special discount on our Udemy courses:

#figmatutorial #figmacomponents #figmaforbeginners

[BorojiDesign]

Unlock the Secrets of Figma's Responsive Auto Layout in 20 Simple Steps!

[mosudrs]

The tutorial was really good and i watched without sound yet I was manged to follow up! Thanks for the tuto & Keep em coming!

[thsl]

Thanks, this was one of the most complete figma components videos on YT!

[Busrayalciner]

Such a relief! Since 2 days I m trying to figure out ui3 and couldn't find answer to my problem, I kept searching on youtube and your video never show up unless I used filter for last month and finally with your video it all fixed! Thank you..

[harshjeetrai]

It's an amazing video on component properties. It would be the most detailed video on video on this topic. Thank you so much.

[rishabhgaur]

I appreciate the video; it was really helpful. Although I was familiar with the basics of Component properties from previous tutorials, the updates to Figma's UI had me confused. Watching your video resolved all my uncertainties.

[mayaasmara]

Thank you so much, finally I found the information I need! Your explanation is on point and easy to understand :D

[AmiyaSparks-kl]

woah, thank you for teaching all these info, i was struggling so hard to find anything about it! subscribed!!

[praveenpsg]

Thank you so much for what you do. You guys make the world better place

[diminishedreturn]

Solid video. I wouldn't be surprised if there are people out there who create 6h courses that they sell for $14.95 (lowered from $79) on Udemy called "Master Figma components" that only cover 80% of this video. Good job!

[atmgraphic]

Amazing one ❤
An Udemy course got me here cos i couldn't grab em,
Now I've grabbed it all.
Thanks a bunch ❤🙏

[leilanouhehkhan]

Wow your videos are awesome, you’re so good at explaining!! Looking forward to new vids. Thank you so much❤️❤️

[moetainnyo]

this help me so easy to understand . Thanks for your kindness

[oluborodeoluwatosin]

Thank I now understand how component works

[smithdoesstuff]

Great and useful info. One bit of constructive feedback, if you’re going to record the app content in dark mode, then don’t use bright white slides between topics. It is actually a little painful when watching in low light even with brightness all the way down.

[alessandrodjordjevic]

Can you explain to me where you get the "apply text button"? Because under Typography I can't find the bottom line where "Button" is.

[Peace_seeker]

nice explaination, ,please make a advance version tutorial also

[azmtkdzv]

Can you help me? What happened to ability to make fill a boolean property?

[mosudrs]

Is that an update? cuz boolean property was easy on in front of the UI, but why Is it like that now?

[shirino]

Hi, if I may request, can you make a video about card components?