I've searched for so long and no one has explained this as simply and clearly as you, thank you sooo much, Im finally able to understand this now you earned a subscriber wholeheartly 🙏🥳
1- make a component having any text like a word label or button anything dude 2- from the right-sidebar, find add properties choose text 3 - press the word you write in the component and go to text in right sidebar then press the sign calld apply variable then choose text variable
I found it. Select the text of your button component, in the top of the properties panel is a text field. The icon you need to click on only appears when you hover over the text field (no idea why). If you hover over the icon it says "Apply variable/property". Click that. In the dialog box that comes up, click the plus icon + for a New variable/property. Then you are back on track with the video.
Hi thanks so much for the video. Noone did a video on the latest Figma version so I was having a hard time finding where the Layer panel is, when it's changed to Appearance lol.
Please create more such videos on Figma's latest UI3, not many people are doing it and it's really difficult to understand what sits where now. Thanks!
Does it really became better and more efficient this way? I've just used to old Component Properties and these new ones just so much harder to understand and create...
Thank you for the video! I was struggling with the boolean property as well. I m using Font Awesome icons as Text and couldn't find the text panel. How to create a boolean property? So the solution is to select "icon" go to -> Apperacnece -> "+" -> "Property" -> Name . And this should work. The Text property you need to hover/over to get apply icon etc... Why Figma complicated so much???
I'm unable to make a swap instance from my component icon, there's no function icon where you are pointing to at 4:50. I see a different set of icons there. First is Multi edit variants, next is Select matching layers and then theres the icon for opening the More actions menu. Inside that there's no option to create instance swap. I'm using an icon from the central DS. The icon has a boolean prop in the component that I made. This was easy before but with UI3 it seems impossible. I'm following the demo to a tee.
Hey @Underhills. Yes, with the new UI3 I also think its harder to do some actions. Let's try here: 1 - You create a frame with text and copy an icon inside 2 - Make it a component 3 - Add a instance swap property (top right corner) 4 - Appears a modal and set the name and value (if it's not recognizing the property, you may find in the dropdown the component and link it) 5 - Select the icon, and go again to top right and click the icon (arrow pointing right) that says Apply Instance Swap Property 6 - Select the property you created before That should work. Tell me if it helped
@@RicardoCostaDesign No, it's not possible to add a swap icon instance. It's just not there available in the UI. I have my icon inside a component, the component contains several components that are published from a library inside a DS. I use tokens for text, color and icon color from that DS. When I select the icon to preform a swap instance task the swap instance function is not offered to me in the Figma UI at all, so that's why I'm starting to think you need either icons that's already propped with instance switch from the DS OR a series of icons inside another icon component set at THE SAME page as the component icon. It doesn't seem to work otherwise. Same thing as with the former Figma UI, I don't think it's got something to do with the UI version, it's just lack of logic and feature with Figma. Seems like you are forced to have all the icons your gonna swap it with living on the same page. I want my icon to be switched with the DS icon library that lives on another Figma space, cause it's administrated by the local DS. See?
@@Underhills yes, I understand. It's really strange. Well, I don't use tokens but I a work that uses an external library with icons and it work the same way. :/ If you notice a workaround please share besides the one around keeping the icons in the same page, I will love to know :) I also noticed for some reason in two accounts I have (one pro and one enterprise) that I don't have some functionalities yet in my Pro account like detaching components. Its getting really messy this different workflows from user to user.
@@Underhills Hey, I had the same problem. The reason you cannot see an instance swap is because when you put your icon in the button, before creating a component, your icon should itself be a component already. Then when you create your button and make a component, the swap instance option pops up. So do all the steps that he mentioned above but before step one, make sure the icon is a component already before you add it to the button. Hope that helps.
@@veronicahartono1408 Bro, I just figured it out: After you've created all your variants, you only highlight the text of one variant (or all the texts at once, as long as all the texts in your variants are the same) and you have to look at the top right where the text content is and then click on the "Apply variable/ property" button to the right of that and you can then click on the "+" to set (name, value, etc.) and create the property. If you now click on Assets at the top left and on the corresponding variant, you will see that you can change the text content with the fact that the alignment of the button also changes (length/width). And if you want to change the text content at the touch of a button without the alignment of the button changing (length, width), you have to click on the same symbol in the middle right under "appearance" as the one you just clicked on next to your text content at the top right, you understand? Then click on "+" again and so on. now you can use the two settings to turn text on and off and change text content while also changing the alignment✌️
If i understand your issue correctly, I believe you have to select the button shaped like a hexagon with a line breaking into it. This isnt exactly in the same spot as shown in the video nor is the button exactly the same looking. It is not in the Typography section, it is in Appearance. When you select that button you can press the plus button in the overlay window. Make sure "property" is selected for "Create". You should be able to follow the steps from there. ie. naming your property, setting it as true, and creating it. For the other buttons, you can select that same hexagon button next to Appearance and you'll be able to see the properties you've created so you can apply them to the text in the other buttons. Hope this helps 🤞
When I click on the icon and open appearance, it does not open the pop up that you get another one where I get search and a drop down, do you know why?
Is it possible to create a boolean for changing the color of the button? Id like it to work so that if its toggled as true, its blue, but as false, its white.
Hi Ricardo! Thanks for your video, it was very helpful, you are doing a great job. I just have a little question, im struggling with the text property, because i can't find anywhere the label with the content of the text, under the section "typography" there's nothing :( , do i have to activate it somewhere? Thanks in advance :)
@@CoolMusic-ff9yw You still have the problem, right? I've been searching everywhere on TH-cam for 3 days, but I just can't find anything. I'm a complete beginner on Figma and am just practicing. And the fact that it's not working is really getting me down.
Hi @andresefe_äfe thanks for your comment. I'm not sure if I understood correctly. Did you double click on top of your text layer to select the text and then not find the Typography side panel? In the video, I've double click on top of the text to select the text layer (sorry because I didn't speak that in the video). Can you try it? Or even select it it doesn't appear?
For the boolean property part - I added the label and icon properties but for me this isn't showing up as a toggle underneath text in the top section, it is showing up under typography but it doesn't give you the ability to toggle it on/off. It is unclickable and looks a little different than it does here. Does anyone know what I am doing wrong?
Select the button shaped like a hexagon with a line breaking into it. This isnt exactly in the same spot as shown in the video nor is the button exactly the same looking. It is not in the Typography section, it is in Appearance. When you select that button you can press the plus button in the overlay window. Make sure "property" is selected for "Create". You should be able to follow the steps from there. ie. naming your property, setting it as true, and creating it. For the other buttons, you can select that same hexagon button next to Appearance and you'll be able to see the properties you've created so you can apply them to the text in the other buttons. Hope this helps 🤞
Bro I can’t find a multiple component in new update. It’s very annoying 😢 plz help me how to add component set in this very update!! I’ll be thankful. 🙏
Hi Ricardo, Thanks for the super helpful video on "How to Create"! Could you also cover the why behind certain steps, the logic and reasoning that guides these choices? That'll help us create a strong foundation, cheers!
You should have in the top right corner closer to the component name a three dots context menu and if you click you have the option to select detach component. However, I work in two accounts (Pro, the one that I use for my videos, and Enterprise for the company I work) and right now on my Pro account I don't have that option available 🤷♂ but in the enterprise account I have it. Can you try and see if you have it?
I've searched for so long and no one has explained this as simply and clearly as you, thank you sooo much, Im finally able to understand this now
you earned a subscriber wholeheartly 🙏🥳
Agree, so glad I found this video
Glad it was helpful! Thank you
Thanks a lot!
I'm struggling to play with component properties, but this guy makes this much easier for me.
Thanks for the feedback!
I don't like how figma keeps changing things with every update, and making things more complicated.
Yeah, I understand you. Some updates in the UI are complicated now to find
I cannot find the text/label properties anymore, it doesn't show as in this video under typography, its just not there. Terrible update.
did you find it?
1- make a component having any text like a word label or button anything dude 2- from the right-sidebar, find add properties choose text 3 - press the word you write in the component and go to text in right sidebar then press the sign calld apply variable
then choose text variable
I found it. Select the text of your button component, in the top of the properties panel is a text field. The icon you need to click on only appears when you hover over the text field (no idea why). If you hover over the icon it says "Apply variable/property". Click that. In the dialog box that comes up, click the plus icon + for a New variable/property. Then you are back on track with the video.
@@mobilecommando Ths man! and then you need to go to whole properties list to delete it, omg)
I can't see that either the new UI is in beta, but it' shit
Thanks a Lot! From Brazil 🇧🇷🇧🇷🇧🇷🇧🇷
Thank you Isabel!
Thank you very much. Finally a very clear intro video on component properties
Thank you so much for the feedback!
Best Figma Component explainer video everrr! Thanks man!
Glad you like it, thanks for the comment!
Hi thanks so much for the video. Noone did a video on the latest Figma version so I was having a hard time finding where the Layer panel is, when it's changed to Appearance lol.
Thanks a lot, yeah some changes are quite tricky to find. Glad it helped!
thank you.i was not able to find boolean properties.after watching this ,i find out.
Thanks a lot!
Thank you so much! that Boolean was giving me a hard time since its giving me "boolean not used within component"
Please create more such videos on Figma's latest UI3, not many people are doing it and it's really difficult to understand what sits where now. Thanks!
Thanks for commenting. Any specific suggestion?
Does it really became better and more efficient this way? I've just used to old Component Properties and these new ones just so much harder to understand and create...
Thank you for such useful tutorial 🥰
Thank you for the video! I was struggling with the boolean property as well. I m using Font Awesome icons as Text and couldn't find the text panel. How to create a boolean property? So the solution is to select "icon" go to -> Apperacnece -> "+" -> "Property" -> Name . And this should work. The Text property you need to hover/over to get apply icon etc... Why Figma complicated so much???
Yes, this was very helpful. Thank you.
Thank you :)
there is no "instance swap property" in figma for that icon
same problem over here
Good guide. Thanks!
I'm unable to make a swap instance from my component icon, there's no function icon where you are pointing to at 4:50. I see a different set of icons there. First is Multi edit variants, next is Select matching layers and then theres the icon for opening the More actions menu. Inside that there's no option to create instance swap. I'm using an icon from the central DS. The icon has a boolean prop in the component that I made. This was easy before but with UI3 it seems impossible. I'm following the demo to a tee.
Hey @Underhills. Yes, with the new UI3 I also think its harder to do some actions. Let's try here:
1 - You create a frame with text and copy an icon inside
2 - Make it a component
3 - Add a instance swap property (top right corner)
4 - Appears a modal and set the name and value (if it's not recognizing the property, you may find in the dropdown the component and link it)
5 - Select the icon, and go again to top right and click the icon (arrow pointing right) that says Apply Instance Swap Property
6 - Select the property you created before
That should work. Tell me if it helped
@@RicardoCostaDesign No, it's not possible to add a swap icon instance. It's just not there available in the UI. I have my icon inside a component, the component contains several components that are published from a library inside a DS. I use tokens for text, color and icon color from that DS. When I select the icon to preform a swap instance task the swap instance function is not offered to me in the Figma UI at all, so that's why I'm starting to think you need either icons that's already propped with instance switch from the DS OR a series of icons inside another icon component set at THE SAME page as the component icon. It doesn't seem to work otherwise.
Same thing as with the former Figma UI, I don't think it's got something to do with the UI version, it's just lack of logic and feature with Figma. Seems like you are forced to have all the icons your gonna swap it with living on the same page. I want my icon to be switched with the DS icon library that lives on another Figma space, cause it's administrated by the local DS. See?
@@Underhills yes, I understand. It's really strange. Well, I don't use tokens but I a work that uses an external library with icons and it work the same way. :/ If you notice a workaround please share besides the one around keeping the icons in the same page, I will love to know :)
I also noticed for some reason in two accounts I have (one pro and one enterprise) that I don't have some functionalities yet in my Pro account like detaching components. Its getting really messy this different workflows from user to user.
@@RicardoCostaDesign I'm on Organization plan.
@@Underhills Hey, I had the same problem. The reason you cannot see an instance swap is because when you put your icon in the button, before creating a component, your icon should itself be a component already. Then when you create your button and make a component, the swap instance option pops up.
So do all the steps that he mentioned above but before step one, make sure the icon is a component already before you add it to the button.
Hope that helps.
Thank you!
very helpful thankyou 👏👍
Happy to know that, thank you!
Thanks!!! I was losing my patient...
Hello,
How can I change a background color with boolean without using a variant ? thanks
why I can't use the text property? the field "Button SM" is not appear. Do you know why? Do I miss something?
I found it in a “Appearance” section
Thanks for your video, it helps me a lot!
Happy that helped, thanks a lot for commenting!
This was so helpful, thank you! Is it possible/good practice to create a property for button color?
Thanks @RachDev! Yes, you can set color properties to any object, as long as you do the "link" as shown in the video :)
@@RicardoCostaDesign What do you mean by "link"? I may have missed that in the video.
Thanks for watching! Download Figma file: www.figma.com/community/file/1424064836462109910/component-properties
Thank you so much🥳🥳
Thank you :)
The text variable button has change its place again, now is in the Text panel on the top, is so annoying that Figma is changing the UI all the time 😡
Thank you bro you are the real saviour
you are legend
I have a problem with booleans. In my project, I see the variable 'mode' but not a boolean. I don't see a boolean configuration
amazing
The text property is not appearing under the Typography section, does anyone have this problem or is something that I am doing wrong???
I do have the same issue. @RicardoCostaDesign Do you possibly know what the issue??
@@veronicahartono1408 i also have the Problem😅 did you manage that?
@@veronicahartono1408 Bro, I just figured it out: After you've created all your variants, you only highlight the text of one variant (or all the texts at once, as long as all the texts in your variants are the same) and you have to look at the top right where the text content is and then click on the "Apply variable/ property" button to the right of that and you can then click on the "+" to set (name, value, etc.) and create the property. If you now click on Assets at the top left and on the corresponding variant, you will see that you can change the text content with the fact that the alignment of the button also changes (length/width). And if you want to change the text content at the touch of a button without the alignment of the button changing (length, width), you have to click on the same symbol in the middle right under "appearance" as the one you just clicked on next to your text content at the top right, you understand? Then click on "+" again and so on. now you can use the two settings to turn text on and off and change text content while also changing the alignment✌️
@@alessandrodjordjevic8023 still can't find it
If i understand your issue correctly, I believe you have to select the button shaped like a hexagon with a line breaking into it. This isnt exactly in the same spot as shown in the video nor is the button exactly the same looking. It is not in the Typography section, it is in Appearance. When you select that button you can press the plus button in the overlay window. Make sure "property" is selected for "Create". You should be able to follow the steps from there. ie. naming your property, setting it as true, and creating it. For the other buttons, you can select that same hexagon button next to Appearance and you'll be able to see the properties you've created so you can apply them to the text in the other buttons. Hope this helps 🤞
It's not there, in appearance for boolean
thanks men!
Thank you!
When I click on the icon and open appearance, it does not open the pop up that you get another one where I get search and a drop down, do you know why?
In which minute that happen?
Is it possible to create a boolean for changing the color of the button? Id like it to work so that if its toggled as true, its blue, but as false, its white.
I wish to have the video marked with segments like other tutorials so i can go back and forth and also aware of the content index
Thanks for the suggestion. I Will do it ;)
Thanks
Hi Ricardo!
Thanks for your video, it was very helpful, you are doing a great job.
I just have a little question, im struggling with the text property, because i can't find anywhere the label with the content of the text, under the section "typography" there's nothing :( , do i have to activate it somewhere?
Thanks in advance :)
Have you solved the problem? I can't get any further
@@alessandrodjordjevic8023 Sadly no, I will come back if i can find an answer!
@@andresefe_äfe me too, same issue here
@@CoolMusic-ff9yw You still have the problem, right? I've been searching everywhere on TH-cam for 3 days, but I just can't find anything. I'm a complete beginner on Figma and am just practicing. And the fact that it's not working is really getting me down.
Hi @andresefe_äfe thanks for your comment. I'm not sure if I understood correctly. Did you double click on top of your text layer to select the text and then not find the Typography side panel? In the video, I've double click on top of the text to select the text layer (sorry because I didn't speak that in the video). Can you try it? Or even select it it doesn't appear?
For the boolean property part - I added the label and icon properties but for me this isn't showing up as a toggle underneath text in the top section, it is showing up under typography but it doesn't give you the ability to toggle it on/off. It is unclickable and looks a little different than it does here. Does anyone know what I am doing wrong?
very nice
Glad you like it!!
this is strange, im using figma web, when i'm trying to get text property it's not showing in typography tab
Select the button shaped like a hexagon with a line breaking into it. This isnt exactly in the same spot as shown in the video nor is the button exactly the same looking. It is not in the Typography section, it is in Appearance. When you select that button you can press the plus button in the overlay window. Make sure "property" is selected for "Create". You should be able to follow the steps from there. ie. naming your property, setting it as true, and creating it. For the other buttons, you can select that same hexagon button next to Appearance and you'll be able to see the properties you've created so you can apply them to the text in the other buttons. Hope this helps 🤞
@@SarahCooper-UVUX thank you, will check that :)
Bro I can’t find a multiple component in new update. It’s very annoying 😢 plz help me how to add component set in this very update!! I’ll be thankful. 🙏
thank youu
I can't i find the layout grid feature on my figma
You need to select the frame or component, and it should be the 2nd menu counting from bottom, in the right sidebar.
I can't apply any property in the instances, i create the property but when i move to instance there's no property to apply, why is it happening
Hi Ricardo,
Thanks for the super helpful video on "How to Create"! Could you also cover the why behind certain steps, the logic and reasoning that guides these choices? That'll help us create a strong foundation, cheers!
Thanks @Roops20 ! Sure, I'll try to do it on my next videos :)
Thanks for the explanation. How do I break a component?
You should have in the top right corner closer to the component name a three dots context menu and if you click you have the option to select detach component. However, I work in two accounts (Pro, the one that I use for my videos, and Enterprise for the company I work) and right now on my Pro account I don't have that option available 🤷♂ but in the enterprise account I have it. Can you try and see if you have it?
I also have a question about the Boolean property. Is there any way I can set the Boolean on the main component, instead of instance?
You need to create the boolean properties in the main component. Then on instances you adjust what you want to see
Thank you bro a long time I had problem with this new update that video help me to understand 😎🥰🥰
Thanks a lot for the feedback. Happy that helped!
I cant change the icon... I watched several videos.. Anyone else with the same problem?
Need more plz
i love you 😭
😘😘😘
:)