Figma tutorial: Component properties

Figma is free to use. Sign up here: bit.ly/3msp0OV
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:
bit.ly/3llmSKh
Learn more about component properties on our Help Center:
Learn more about interactive components:
bit.ly/3mhWRx4
Learn more about variants:
bit.ly/3Ow9gbT
Check out our other component properties video:
bit.ly/3n6WPaL
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 ⬇️
Twitter: / figmadesign
Instagram: / figma
LinkedIn: / figma
____________________________________________________
Music credit:
Those Days When We Were Happy by Babasmas
/ babasmasmoosic
Creative Commons - Attribution-ShareAlike 3.0 Unported - CC BY-SA 3.0
Free Download / Stream: bit.ly/3Kk5cZB
Music promoted by Audio Library • Those Days When We Wer...
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone

[@shibambiswas415]

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

[@tinababaian8934]

[@elmotareal]

im still at confusing :'(

[@shibambiswas415]

@@elmotareal What's wrong Ayyash?

[@cliffy00]

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

[@lindaduong289]

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

Exactly! All that ego filled mumbo jumbo 45 minutes long videos are disaster!

[@SkYHawK2600]

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

[@anyalashenko176]

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

[@alexfoxleigh9443]

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.

[@lilmamaxyungpapa]

FAX

[@chauhannikunj2531]

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

[@saribgraphy4676]

Very well explained in a simple way. Thanks alot.

[@chinaadesignagency]

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

[@niels6542]

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!

[@omurozgur5046]

You are right! That music is not a good choice.

[@lucpotage]

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

[@TheWebCoder]

These tutorials are perfect. Thank you for producing them.

[@Rehmedia2024]

Top stuff fig team, its been a little difficult getting my head around it but you have answered many questions...cheers

[@_felicia]

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

[@melissaviesca2299]

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

[@vedantaz365]

This is exactly , how should be a tutorial , I loved it ❤

[@abhinavrv0092]

What a great video, Clarified each and every doubt on component properties. You guys are awsome❤❤❤❤

[@lfgraf]

This was very needed!! Thanks, Figma!

[@petergunold9962]

Great video. Helped me a lot do understand and use properties, what makes my work so much easier

[@glendanascimento1853]

Dude, this is the only video that works. Thanks for posting!

[@josephgardner1310]

This is great! Will it be possible to add a Fill property? Not sure if that makes sense but I'd love to have one component and easily swap the brand style (fill color, text color).

[@lealfj]

Great explanation! One question though.. at the beginning of the process you created a copy of the variants in our design system so we don't mess it up but, how do we replace the existing one with the copy once we have finished implementing the changes? Would deleting the original one be enough (as they have the same names?)?

[@hannahschrupp7248]

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

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

[@ultramouse]

thanks for making an official video. I finally feel like I really understand properties now.

[@Figma]

Glad it was helpful!

[@baraka99]

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

[@ericfonseca4577]

This is awesome! Are there any plans to add a color/text style property?

[@ASPnovosibirsk]

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

[@OnceABustAlwaysABust]

Is Sketch still alive?

[@CPTZK11]

hahah, Sketch is like an ancient dinosaur now

[@aPhiluppus]

Sketch actually has had component/symbol properties for years (and has killed it). I made icons with changeable and toggleable icons many years ago in Sketch. They just never really nailed down the auto layout part, which is the huuuuuge win for Figma here.

[@WealthyThomas]

I had not known about a position called sketch developer. The internet is creating a variety of positions I have not heard of.

[@Ibk225]

@@WealthyThomas😂😂

[@vagarysoulkothari1694]

clarity , clarity 😀 end of confusions...thanks 🤟🏻

[@MoritzFischer]

Very useful video as always! Thank you so much!

[@ytRap007]

Thank you figma... awesomeness is the greatness of figma😊

[@mustafa_ahmed1]

THAT IS A REALLY AWESOME VIDEO!

[@watchingutubeinpeace]

What would be useful is actually using the same example of the button to demonstrate how component properties differ from variant properties - less context switching and users can actually see how one thing (in this case, a button) can have both component and variant properties.

[@deeteekay6859]

This is awesome!

[@mytrung]

My only issue with the buttton left and button right properties is I currently have different padding on the left and right to force centering. Any way to circumnavigate that?

[@brunochidozie]

I'm struggling with the instance swap property. I have all the icons I'm using for this project as variants of an icon component so when I apply the instance swap property, It just selects the icon component without giving me an option of selecting a default icon. Could it just be a problem with the way I organized the icons?

[@AnshMehraa]

Simply epic.

[@SayidMoghadam]

Awesome figma, love you

[@medi7573]

I'm new to Figma and find it easy to understand and use. best experience. Question please, which design system is being followed/used for creating these components in this video and on the Figma website?

[@billiekun1394]

Do you create the icons as variants or different components with same name and slash before?? Because with the first way, i'm not able to swap between icons when i set them as a swap instance... To change the icon i must select it, it won't let me change it just selecting the button...

[@ionrus1355]

Figma is just amazing!

[@debaseesh]

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

[@melissasherpa]

And narrator. Her voice is very annoying. This needs a more straightforward and focused tone.

[@ajayji1009]

It's good but yes it was confusing. The only thing, in the file shown with the previous variants...a user can see the number of variants :) One thing, if I have a variant of size (default and large), how will I manage that.

[@thangtastic]

This is very convenient for the designer. But when we hide everything, how will the developers see that there are other variations with either properties? Personally, I clone instances and show all of them anyway. How do you solve this issue?

[@bradmacdonald6591]

I think the component playground in Dev Mode addresses this concern.

[@pablizoful]

Love it.

[@svetvn]

thank you

[@klhmia]

I'm following a guide from a few months ago with I can't use because the UI updated, so I find this newer guide which also has a different UI. Very frustrating when UIs are inconsistent or rapidly change.

[@YuliiaShevel]

In the Example: Message List: "Message" component, is it important to create a separate text style for "Typing..." in blue as in the case of "Subline" in color gray? Does it matter since we will not write anything there? Thanks :)

[@weezyf775]

8:40 what's the deal with Figma not allowing you to paste to replace images like you're doing here. It makes you take the long way of importing a file from your computer. But then you can also use certain plugins, like unspalshed to drop an image in. Is there a simple way to just use an image you have within figma?

[@daniellepacheco8150]

Does this feature set eliminate the need for a base component?

[@tingtingcheng4917]

Is there an efficient way to reduce the current variants within a design system? A lot of variants are used in different design files, if I were to remove them or modify, I'd have to go through each and every design and manually update...

[@anyalashenko176]

Great question, waiting for an answer too

[@hahaha-rd6tp]

Thank you

[@dungmh]

I love Figma!

[@ChristianWS.]

I do wish you could manipulate nested Component Properties on the parent component, would make things soooooo much easier

[@ludwigvillalba1886]

Perfect voice for such videos!

[@mhmmdinsank]

Amazing

[@leomega]

anybody has a link to download the Whyte font?

[@looseshoulderssumali7311]

Thanks for the video. What I haven't seen: if I want to do an instance swap, but the proportion of the image is different - wide vs tall. Let's say the default is wide. But then the tall image is forced to be wide. How to remedy this problem? Thanks.

[@mortezazafary113]

wonderful

[@jasminavajs1540]

Thank´s ;)

[@actualmastermind]

What happens to designers' components and instances properties when a design system is published with a reduced number of components set due to utilizing Boolean feature?

[@ju.ice-der-boi]

The only downer of this feature is that you can't change paddings accordingly. Usually (if we take the button example) you don't have the same paddings with an icons, as you have without them. Just removing an icon doesn't really help for that example. Good feature, but sometimes it makes things look much simpler than they actually are. Any solution?

[@GregK8625]

Yup, this is my gripe as well. Looks good on paper, but if your design system is not this cut-and-paste simple system, this new method will enjoy very limited use.

[@ju.ice-der-boi]

@@GregK8625 well I must say I use it on a daily. It limits the designer for sure, but now I‘m not even sure if that‘s bad tbh.

[@cortneyreber]

I'm loving these improvements to Figma! However, I'm struggling with the instance swap property for icons when applied to variable interaction states. In my case, the icon color/alpha needs to change for different states - hover, focus, pressed, and on click. I'm trying to utilize this instance swap property to make it much easier than my previous approach. However the icon color of whatever the first variant state is gets passed forward to other states instead of displaying the new status color. I've been following a "trick" suggested by someone online to nest icons within a color-fix frame, nested within another frame. This has worked but it's cumbersome to accurately select the icon layer when needing to swap out icons. I was hoping this instance swap property feature would help solve my issue, but it hasn't. Bummer. I should probably add that my icons are SVGs, not font icons.

[@cortneyreber]

Also, I've come to learn that the instance swap property is only available so deep within a component. I'm not able to apply this property to the nested nested icon layer.

[@Figma]

Hi Cortney, sorry for the frustration. It's a bit hard for us to diagnose the issues without file access. Can you submit a bug file so the engineering team can look into it more? Here's how you can submit a bug report: help.figma.com/hc/en-us/articles/360041468234-Submit-a-bug-report

[@Figma]

Also, there is an upcoming feature for Component Properties called "Bubble Properties", which will allow you to control the nested properties from the parent component directly. You can check out the Office Hours livestream to learn more: kzbin.info/www/bejne/nqDFfGmApqZ3n9E

[@TiagoImme]

@@Figma hey, I'm facing the same problem that Cortney. Basically, whats happens is that when we set an icon as a swap property, and then we change the color of the icon, when we swap the icon i t doesn't mantain the color. What was my test: 1. in my icon lib., the icons are grey; 2. in my component, I setted the icon as green, than make it a swap instance; 3. in an instance of a component, I changed the icon with the swap property, and the new icon goes gray. This limits a lot the usage of the swap property. Hope Figma fix this soon, because is a big limitation of the swap property (today I can't use the swap in the icons of my DS, for example). Even thought, component propoerties was a great feature, thanks for that!

[@thegospel9855]

kzbin.info/www/bejne/nqDFfGmApqZ3n9E Check this out! It's addressed in this Office Hours video

[@tehoko]

This feature is wonderful, though it's missing one crucial thing to make it useful for design systems. The properties (and variants) of children should be controllable by parents. As it is now, you have to dig deep into the tree of nested components to control variants - it would be way better to have all the controls surfaced to the parent component instead. This was suggested on Figma forums around a year ago, it would be great to finally have it supported natively.

[@browsing4307]

This! I wish you could wire up and access some child component properties from the parent.

[@Figma]

You might like an upcoming feature for Component Properties called "Bubbled Props", as it does exactly that! Jacob Miller talks more about it in a recent Office Hours: kzbin.info/www/bejne/nqDFfGmApqZ3n9E

[@browsing4307]

@@Figma You guys are beyond awesome! Figma is shaping up to be my favorite tool. Thanks for listening to your community!

[@tehoko]

@@Figma This is great news, thank you! For anyone interested, the timestamp in that video is 46:08.

[@varcxxdesign179]

@@browsing4307 I concur, Figma just keeps getting better and better. What an amazing team! What an amazing tool!

[@vr2766]

How do you organise your icons? They are all seperate components, and not variants of the same component?

[@jetmartin9501]

Nice video....@14:30 you opted to create the text properties (boolean and text change) from the component set rather than from the Text layer (i.e., your explanation was....."this method is useful if you want to apply existing properties to a new layer or object"). Can you expound on that a bit more? What existing properties are we trying to apply here? Maybe some more discussion of the downsides of doing it the other way or the advantages of taking the approach you took would help clarify....especially given that you're chosing to do something different then what you had done for other properties...Why is the text stuff special and different enough to warrant a completely different approach. This part of the video REALLY begs for a more detailed explanation. Thoughts?

[@steadynow]

I'm a bit unclear on how the component properties retained/inherited the prototype settings since those variants were removed and deleted from the component set.

[@nguyenvuongliving]

I wonder there are different paddings based on icons and text. When turning the icon on and off for a button including text and icon, how can the padding change too? For example, (text+icon) padding will be (24 | 16), (text only) padding will be (24 | 24)? Thank you guys

[@ajgaming7167]

Any chance you can make an official video on how to make a notification component with variants, been searching for weeks but none are definitive. Basically how to go about it the right way like, your websites's notification system for instance

[@DanielTateNZ]

It doesn't say in the tutorial but your icon must be a component instance to do this.

[@incyphe]

4:40 I'm in love with how she says "false"

[@turboklaus]

Love the component properties, but I'm having the following problem: My component contains an auto-layout frame with two elements (text and icon). When I hide both elements using component properties, the auto-layout frame keeps its size (instead of disappearing as it is empty). Is there any chance you're going to solve this?

[@Figma]

Hi Laurin, thanks for reporting that bug! This is an auto layout bug and we're working on it now.

[@turboklaus]

​@@Figma when can we roughly expect the fix for this?

[@SEIMYUNGVACTRONCOLTD]

How about when you have different button sizes?

[@brandywalters2271]

What is the "option" key for Windows? I tried ALT, but CTRL+ALT+K opens an app on my computer.

[@glitchedmac]

I've followed the instructions here and I do not have the true/false toggles. I get a setting icon and have to go to a menu to change that value.

[@Golrokh.Sajjadi]

I have a query. I have 200 frames, each depicting an animal and its name. Now, I aim to utilize them and trigger an action where hovering changes the frame's border color, or clicking on the frame navigates to the respective animal's page. How can I achieve this with swap properties or variables to minimize excessive components and avoid multiple computations for 200 animals each time? Thanks

[@mbrmorshad2528]

Hey figma, thanks for keep creating helpful video. Can you please help us to show how much way we can share the component library and how to remove it? And how can i create a basic style guide/DS and use it for all of my internal work. It should be for unpaind version. Coz as you know very wll there are a lost's of unpaid figma user who needs your support.

[@aydemironur35]

You can't share library between files with free account. But you can copy/paste them between files if you want

[@stevencooper7383]

Whenever I turn my icon boolean property off my text disappears! 🤕 I already checked and the text is using its own property. How can I fix it? 😞

[@ReductioAdAbsurdum1]

13:58 This is confusing. If you set a new Property for Icon Right, why would the corresponding Boolean Property titled Has RIGHT Icon need to be set to FALSE? I understand setting it to FALSE if the Property name were still Icon Left, but the icon IS on the right in the Icon Right property, so why set it to FALSE?

[@CoryMckinnonHandle]

I am still confused by properties, when and where to use them... it doesn't map easily to my thinking of CSS or even variables (in any programming language)...

[@AdsonCicilioti]

I couldn't can make button auto resize on text change or when is icon hided ... How to component wrap auto resize?

[@AgataKrolTrefl]

You need to put text in a frame with auto layout. In this case, button will be behaving as like you wish.

[@ericlampius3729]

It's ctrl+alt+K to make a variant, there is no "option" on WIndows. Also, I've tried this a dozen times in both the desktop application and the web application on Windows/Chrome and I do not see the same UI shown here. Are you checking these tutorials on both Mac and PC?

[@Figma]

Hi Eric, thanks for the catching the mistake! We'll make sure to use the right shortcuts in our next tutorial. The tutorials are applicable for both Mac and PC, which specific UI are you referring to?

[@asyncuz]

Figma SUPER ever 😍😍.

[@KimPieWYJ]

I really need help... The boolean function is not visible in my figma. How to enable it, i've searched for it everywhere...

[@dpapez2]

When you are swapping the components .. do they need to be of the same size or can the component auto-resize based on the size of component you are switching with?

[@vBAAM]

I don't know what I'm doing wrong. When I select my text layer, it only gives me an option to create a Boolean property. Why don't I have the option to create a text property?

[@ananths2301]

How to select multiple items 11:45 ?

[@kaechm]

I love you figma

[@michaelschultze3595]

It is actually very comfortable. But, I stick with my many variants (like 96 buttons), because I have variants that need 3 icon sizes. The buttons has different colors and shapes and states. All this does not work here so far. And by the way, have a look to the comments on the playground file ;-)

[@karenrose2504]

the same situation :( Did you find a solution?

[@asyncuz]

Only there is a small problem here, maybe not a problem but I don’t like this situation. Whenever I click on a boolean property, another property related to it disappears from the right sidebar, which causes me a lot of inconvenience.

[@laducki]

I don't understand. I keep getting an error message "not used within component". Is there something specific I should be doing when creating the object, because I've been trying to do this for an hour and I'm stuck on the first step.

[@rainalim7978]

same here

[@rainalim7978]

Hi Figma community, any suggestion??

[@verohimself]

Meanwhile, Adobe XD still doesn't have vertical text alignment ;) Great job Figma team.

[@shine6388]

2:50 it doesnt appear this settings why ??? pls answer

[@Figma]

Hello, did you select the icon layer?

[@sarasabour1378]

very useful

[@bradmacdonald6591]

3:45 - The Content section is now contained in the Text property panel

[@srinivas_gaddam]

Very Easy to understand but background music is so sad hear.

[@robertquillen5675]

The file structure in this video is extremely confusing. There are 4-5 folders named icons, some with only one icon in them. There is a reason why @2:31 is the most replayed. I've tried for 4 hours and cannot make sense of this.

[@ArminmoTV]

when i select icon there is no checkmark pls explain from the beginning!

[@briamulholland7873]

I think it needs to be made into a component first

[@asyncuz]

Figma please add min and max size setting too.

[@glendanascimento1853]

thank you for work keys and crack