Can not add property to the component

Hi there,

Thanks for the post! Let me share the guide from help center article.

Create a text property

1. Select a main component or component set.
2. Click Properties section of the right sidebar and select Text from the dropdown.
3. From the Create component property modal, use the fields to configure the property.

• Give your property a name using the text field.
• Set the default string of text by using the value text field. You can also click Apply variable to apply an existing string variable, if available.

4. Click Create property.
   
   

Create a boolean property

When a boolean property is created for layer visibility, a value set to false means the layer will be hidden. If toggle to true, the layer will be visible.

1. Select a main component or component set.
2. In the right sidebar, click in the Properties section and select Boolean from the dropdown.
3. From the Create component property modal, use the fields and dropdown menus to configure the property.

• Give your property a name in the text field.
• Set the default value to true or false. You can also click Apply variable to apply an existing boolean variable, if available.

4. Click Create property.
   
   

I hope this helps but please feel free to let us know if you have more questions!

Thanks,
Toku

I am so baffled by this change.

Previously, I could simply select a portion of a component that I wanted to apply a property to - be it an icon, text, etc. and I could, apply properties to them in their requisite places - ie. “instance swap” was apparent WHERE THE INSTANCE is shown. Or VISIBILITY was apparent where visibility was shown.

Now it seems that I’m supposed to use the (hidden behind a click) properties panel to discover these things, and they dont even seem to work in the same way.

Case in point: I made a component, a button, with an icon and text. In the component SET I made, I want to add a boolean property for that icon, an instance swap icon for that property, and an editable text field for the text.

Now, I can create an instance swap on the icon by selecting it and selecting instance swap. Great.

Where on earth is the ability to establish the a boolean visibility property? I see I can select the parent component and simply create an empty boolean property for it, but from a workflow perspective, what sense does that make? Can I not start with the thing I want to apply the boolean to and establish it there?

This kind of workflow change to the UI is so brazenly poorly thought out, as evidenced by the fact that all of Figma’s official tutorial videos regarding properties are effectively obsolete, yet still published.

This has caused such an unecessary slowdown to my workflow as I sluggishly search to figure out the answer, so thank you.

Nail on the head. I am struggling to do the most basic things? that used to be super intuitive and there aren’t any tutorials for them.

Now when I create a variant for a text button component and change the text in that variant it doesn’t change. and I can’t for the life of me figure out to get the text changes to apply to different states (hover and inactive) without manually changing it for each variant. I’ve spent 2 hours on this haha! A button!

This seems counterintuitive 😦

@y_toku please never take away the possibility to use UI2, as UI3 currently slows down the workflow massively: it adds unnecessary clicks, it is hiding information in side panels behind buttons or important fields were moved from the top further down. It’s also duplicating informations/actions as a set of buttons and then repeating them as list entries in progressive disclosure menus, and so on. In general UI3 is increasing cognitive load on users – especially when working with components in design systems.

I agree. This is rediculous… I can’t add a boolean property to a simple component at all. I can’t add instance swaps to the component. When I select the icon or nested component that I want to apply the boolean property to it won’t come up as an option and if I select the entire component, I can add a boolean property, but it doesn’t allow me to identify what I’m trying to apply the boolean property to. This is insanely frustrating and used to be incredibly simple. Please fix as soon as possible!

Can’t find a way to add a text property to a text layer… 20 minutes of googling…

It took me an unnecessarily long time to figure out how to do this in UI3. This definitely increases cognitive load and makes Figma less intuitive and slower to use.

If you’re going to remove buttons/hide them behind additional clicks at least add commands for them to ⌘K so we can still get to them without slowing our workflow down so much…

Definitely less intuitive than before and took me a while to figure it out but I had to:

1. Select the text in the component I wanted to be a text property
2. In the right hand menu where it says “Text” click the “Apply variable/property” button that only appears after hovering on the panel
3. This is the really confusing part, you have to select the + in the box that appears. 
4. This opens a new panel and in there you have the options to create the property, name and value. Clicking “Create property” will create it. 

I’ve been trying to figure out how to turn a text box’s visibility on and off for over an hour… tried everything and cannot for the life of me figure it out. I know a while back I did it before relatively easily. I’m starting to chalk it up to this updated UI people are complaining about rather than my ability. What the hell, figma? 🙄

Ok, so you have to multi-select specifically what you want to be able to hide from each variant

Then go to Appearance in the right panel and add a property that way. 

Then, it will show up in the variant set’s properties

But not on the individual variants

But when you add an asset to the file, it will show an option to toggle the selection

So unintuitive 😭

melissadesigns wrote:

melissadesigns wrote:

I’ve been trying to figure out how to turn a text box’s visibility on and off for over an hour… tried everything and cannot for the life of me figure it out. I know a while back I did it before relatively easily. I’m starting to chalk it up to this updated UI people are complaining about rather than my ability. What the hell, figma? 🙄

 

Ok, so you have to multi-select specifically what you want to be able to hide from each variant

Then go to Appearance in the right panel and add a property that way. 

Then, it will show up in the variant set’s properties

But not on the individual variants

But when you add an asset to the file, it will show an option to toggle the selection

 

So unintuitive 😭

This was super helpful, thank you! It makes way more sense than the tutorial stuff posted earlier. Still silly that all of this is hidden under a new icon, and the + on that panel doesn’t immediately stand out as “oh, this is what I need to press to create a new property”, at least not when you’re used to it being one click instead of 2. Idk what Figma was thinking here...