"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about component properties in Figma: help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties"
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).
Год назад+1
Exactly! All that ego filled mumbo jumbo 45 minutes long videos are disaster!
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.
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
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.
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.
I'm so glad I persued another path in my career after working as a UX/ Product designer since 2008 till 2020. To me most product designers have no clue how to design these days, they just edit components and drag & drop.
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.
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!
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.
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: ruclips.net/video/hobK6JqADio/видео.html
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?
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?)?
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).
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?
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...
This video is amazing, but the music is so bad I have to mute it and try to interpret the captions... Please do not have such ear piercing music next time. This is a informative tutorial, much better to make it easy to watch without music, than to try to add music only to make it unwatchable.
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.
17:20 this is a bad example of properties. The original component set was bloated but clear. After the cleanup it has become possible to create a button with left & right icons, and no text. This should not be allowed
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?
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.
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.
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?
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?
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 ;-)
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...
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?
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.
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.
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.
text was easy i didnt have any of the options to do this with the icon. i think the simple button you started was too complicated for me 😅 i did a rectangle and text and tried my own icon
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
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 :)
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?
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?
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.
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.
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
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: ruclips.net/video/hobK6JqADio/видео.html
@@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!
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
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)...
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.
2:52 - can't see that option.(Apply instant swap property). 5:34 - Can't see any controls. seriously, what am I doing wrong here? am I using an older version?
Hi Jay, - You should be able to see the apply instant swap property when you're using icon from the component library. - The controls will show up when you're clicking on an instance of a component that has component properties defined.
@@Figma and I am using the Component Properties Playground file, in the batch editing screen, how do you select both CTA's at once. they both wrapped up in two different groups?
The huge downside to this is that you can't build out a component set using a single "master" component (which gives you the ability to make updates to all your variants at once) because your icons/text need to be direct children of your variant/one layer deep.
Hi Mike, we have 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: ruclips.net/video/hobK6JqADio/видео.html
@@Figma hello guys!! Amazin tutorial! I'm re-watching this today and wonder if these "bubble properties" are available today or will be in the near future??
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
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?
This is great thanks for posting. I think I'm not the only one struggling with this new feature. I think it's a bit of a shame that the swap icon features doesn't allow for variants. But I'm sure we'll get there. However, last thing… I'm beginning you to never use this horrible violin in the back I was about to break my laptop towards the end of the video 🥵🤯🫠
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about component properties in Figma: help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties"
Finally an official videos on Component properties. It was bit confusing at first. But now I am feeling much comfortable.
Thanks 😊
im still at confusing :'(
@@elmotareal What's wrong Ayyash?
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!
I wonder if Sketch developers take long breaks to self reflect after each one of these incredible Figma updates
Is Sketch still alive?
hahah, Sketch is like an ancient dinosaur now
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.
I had not known about a position called sketch developer. The internet is creating a variety of positions I have not heard of.
@@WealthyThomas😂😂
She has the sweetest voice. Love hearing her talk through this informative video.
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
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.
I did not spend the time to discover the new Components properties and now I understand everything. Thanks!
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.
Very easy to understand. Exactly what I needed, great job :)
These tutorials are perfect. Thank you for producing them.
I'm so glad I persued another path in my career after working as a UX/ Product designer since 2008 till 2020. To me most product designers have no clue how to design these days, they just edit components and drag & drop.
Perfect voice for such videos!
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...
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
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.
FAX
Mid blowing.. these reduce our time aslo manage our file size.. super features by figma... Simply loving it ☺️
A very good tutorial. But PLEASE get rid of that awful background music.
And narrator. Her voice is very annoying. This needs a more straightforward and focused tone.
thanks for making an official video. I finally feel like I really understand properties now.
Glad it was helpful!
Very well explained in a simple way. Thanks alot.
Dude, this is the only video that works. Thanks for posting!
Amazing tutorial! Have to watch it a couple more times for it to sink it, but it does the trick! Thanks!
Top stuff fig team, its been a little difficult getting my head around it but you have answered many questions...cheers
This is exactly , how should be a tutorial , I loved it ❤
What a great video, Clarified each and every doubt on component properties.
You guys are awsome❤❤❤❤
This has been so delightful to watch. Thanks a lot Figma, you're awesome✨
Thank you figma... awesomeness is the greatness of figma😊
THAT IS A REALLY AWESOME VIDEO!
4:40 I'm in love with how she says "false"
Great video.
Helped me a lot do understand and use properties, what makes my work so much easier
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!
You are right! That music is not a good choice.
Very useful video as always! Thank you so much!
clarity , clarity 😀 end of confusions...thanks 🤟🏻
Simply epic.
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.
This! I wish you could wire up and access some child component properties from the parent.
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: ruclips.net/video/hobK6JqADio/видео.html
@@Figma You guys are beyond awesome! Figma is shaping up to be my favorite tool. Thanks for listening to your community!
@@Figma This is great news, thank you! For anyone interested, the timestamp in that video is 46:08.
@@browsing4307 I concur, Figma just keeps getting better and better. What an amazing team! What an amazing tool!
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?
I think the component playground in Dev Mode addresses this concern.
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?)?
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).
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?
This was very needed!! Thanks, Figma!
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...
I love this!! Such a nice addition to components.
Figma is just amazing!
This is awesome! Are there any plans to add a color/text style property?
Awesome figma, love you
Meanwhile, Adobe XD still doesn't have vertical text alignment ;) Great job Figma team.
I love Figma!
Thank you
This video is amazing, but the music is so bad I have to mute it and try to interpret the captions... Please do not have such ear piercing music next time. This is a informative tutorial, much better to make it easy to watch without music, than to try to add music only to make it unwatchable.
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.
This is awesome!
I do wish you could manipulate nested Component Properties on the parent component, would make things soooooo much easier
17:20 this is a bad example of properties. The original component set was bloated but clear. After the cleanup it has become possible to create a button with left & right icons, and no text. This should not be allowed
It doesn't say in the tutorial but your icon must be a component instance to do this.
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?
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.
Cool for advanced users, but very quickly explained for a beginner! Hard to follow😪🤧🤯
I love you figma
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.
You can't share library between files with free account. But you can copy/paste them between files if you want
Love it.
thank you so much but i was wondering how to switch off one property automatically if we turn on a contradicting property. Like optional/required
love her voice
Came here to say the same. May I ask which voice actor was used for this? Would love to consider her for videos that my team makes.
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?
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?
Amazing
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 ;-)
the same situation :(
Did you find a solution?
Figma SUPER ever 😍😍.
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...
Great question, waiting for an answer too
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?
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.
@@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.
thank you
Super helpful information, but please re-visit your choice of backing track 🙉
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.
3:45 - The Content section is now contained in the Text property panel
And where is the text property panel?😅 under „appearance“ or where?
Thank´s ;)
Very Easy to understand but background music is so sad hear.
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.
wonderful
text was easy i didnt have any of the options to do this with the icon. i think the simple button you started was too complicated for me 😅 i did a rectangle and text and tried my own icon
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
Does this feature set eliminate the need for a base component?
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 :)
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?
How do you organise your icons? They are all seperate components, and not variants of the same component?
anybody has a link to download the Whyte font?
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?
great tutorial! why does the background music sound kinda sad though :333
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.
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.
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
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: ruclips.net/video/hobK6JqADio/видео.html
@@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!
ruclips.net/video/hobK6JqADio/видео.html
Check this out! It's addressed in this Office Hours video
so, now that the design system has two identical buttons, how do you complete the process? Simply delete the original button?
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
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)...
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.
same here
Hi Figma community, any suggestion??
2:52 - can't see that option.(Apply instant swap property).
5:34 - Can't see any controls. seriously, what am I doing wrong here? am I using an older version?
Hi Jay,
- You should be able to see the apply instant swap property when you're using icon from the component library.
- The controls will show up when you're clicking on an instance of a component that has component properties defined.
@@Figma and I am using the Component Properties Playground file, in the batch editing screen, how do you select both CTA's at once. they both wrapped up in two different groups?
How about when you have different button sizes?
The huge downside to this is that you can't build out a component set using a single "master" component (which gives you the ability to make updates to all your variants at once) because your icons/text need to be direct children of your variant/one layer deep.
Hi Mike, we have 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: ruclips.net/video/hobK6JqADio/видео.html
@@Figma hello guys!! Amazin tutorial! I'm re-watching this today and wonder if these "bubble properties" are available today or will be in the near future??
Background music is very distracting 😅
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
love your voice
I think it's babydoll and very irritating.
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?
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.
This is great thanks for posting. I think I'm not the only one struggling with this new feature. I think it's a bit of a shame that the swap icon features doesn't allow for variants. But I'm sure we'll get there. However, last thing… I'm beginning you to never use this horrible violin in the back I was about to break my laptop towards the end of the video 🥵🤯🫠