Figma tutorial: Component properties

With component properties, you can define which parts of a component can change. And instead of creating separate variants, you can use component properties to reduce the number of components needed. This takes the guesswork out of designing for anyone using these components and they can quickly make adjustments as Figma keeps component property controls in one place.

Play with our component properties community file:

Learn more about component properties on our Help Center:

Learn more about interactive components:

Learn more about variants:

Check out our other component properties video:

00:00 - Introduction
01:20 - Types of properties
01:29 - Overview
01:40 - Previous content
01:46 - Community file
01:51 - Button Component
02:31 - Instance swap property
03:38 - Text property
04:09 - Boolean property
05:24 - Consume component properties
05:53 - Variant property
08:52 - E-commerce store card
09:25 - Add component properties
12:04 - Set up the left icon
13:01 - Set up the right icon
14:18 - Set up the text layer
16:08 - Clean up
17:08 - Using the new button
17:49 - Wrap up
____________________________________________________

Find us on ⬇️

____________________________________________________

Music credit:
Those Days When We Were Happy by Babasmas
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone

[shibambiswas]

Finally an official videos on Component properties. It was bit confusing at first. But now I am feeling much comfortable.
Thanks 😊

[SkYHawK]

I really loved component properties, but there wasn't many tutorials when it first released, there was only a figma file explaining. I had to figure out by myself and after that, I FCKING LOVE IT! I couldn't believe how we were creating many variations. It was a must all alone. Figma is literally the leader of design industry, other apps still needs many years to catch up. Only thing I wish are regional pricing and improvements of photo editing (and maybe more options for prototype). Like small addon or something like that would save us opening photoshop for editing pictures. You can't always find the perfect picture for your design, sometimes you have to make it.

[cliffy]

Very easy to understand. Exactly what I needed, great job :)

[lindaduong]

This is by far the best video. This is how tutorials should be done! I love the intro which summarizes what we’ll be learning/requirements we’ll cover, easy to find sections, displaying which buttons you’re using on the screen (instead of the ones that disappear instantly).

[anyalashenko]

Amazing and well explained video! The thing that's troubling me now is how to swap efficiently to all the new properties components in the design files which use currently the regular components variants...it wasn't really explained in the video

[alexfoxleigh]

Ah I finally understand how to use these! Thank you so much. I cannot wait until you have styling properties too, being able to set variable colours in particular would be incredible useful.

[chauhannikunj]

Mid blowing.. these reduce our time aslo manage our file size.. super features by figma... Simply loving it ☺️

[lucpotage]

I did not spend the time to discover the new Components properties and now I understand everything. Thanks!

[niels]

This is a great tutorial with real use cases and a very foolproof explanation. Just the right amount of detail.. well done!
--> The pace of the background music did get me into a trance sometimes, so i had to scroll back a few times when I got distracted. But this could be all on me :)
Keep 'm coming!

[saribgraphy]

Very well explained in a simple way. Thanks alot.

[ASPnovosibirsk]

I wonder if Sketch developers take long breaks to self reflect after each one of these incredible Figma updates

[chinaadesignagency]

This has been so delightful to watch. Thanks a lot Figma, you're awesome✨

[debaseesh]

A very good tutorial. But PLEASE get rid of that awful background music.

[_felicia]

I love this!! Such a nice addition to components.

[TheWebCoder]

These tutorials are perfect. Thank you for producing them.

[baraka]

She has the sweetest voice. Love hearing her talk through this informative video.

[lfgraf]

This was very needed!! Thanks, Figma!

[NyuvelUX]

This video has been very helpful to me. I used to create sooo many variants 🤣
Knowing how to handle properties makes it a lot easier

[melissaviesca]

Amazing tutorial! Have to watch it a couple more times for it to sink it, but it does the trick! Thanks!

[hannahschrupp]

OMG THANK YOU for explaining how to use this on an already created component set... I was worried I would have to figure this out on my own...