Figma COMPONENT PROPERTIES (2022 Update) Explained - With Examples
HTML-код
- Опубликовано: 29 май 2022
- Visit my STORE: bit.ly/mavi-design-store
Explore Mavi Design COURSES : bit.ly/mavi-design-courses
Get FIGMA for FREE: bit.ly/get-started-with-figma
Take FULL advantage of ALL FIGMA's features: bit.ly/figma-professional-plan
In this video I'm going to explain the latest Figma update introduced on Figma Config 2022 regarding Component Properties. We'll go through what they are, how to use them and I'll also show you a few examples.
Using component properties enables you to create and use Figma components easily - you can define boolean properties to easily show / hide layers, text content properties to edit component instances through a text field and instance swap property that enables you to easily change any nested components. All of this easily accessible through the right control sidebar.
How to use Figma Component Properties - 2022 Update introduced on Config 2022 - Explanation Video and Tutorial (Easy to follow)
------
© 2022 Mavi Design 
Хобби
This is exactly the answer I was looking for , I've been digging through so man lengthy videos 😭
Same here!
Thank you! It is so helpful, straight to the point
Thank you so much for this video! The best part is that it's so short and easy to follow!
that's a great explanation, thank you, man! ✌
so useful many thanks !
Is it possible to change Text of Nested Component through the parent component properties?
thx Mavi !!! good job
This was driving me crazy, thank you so much. Honestly I find it so less User Friendly than the previous version, hopefully they'll make it easier to use
You’re welcome! Yes it does take some time to adjust to. I think Figma should provide some more in-app explanation we see with other features. Btw I also have a video explaining the new auto layout in case you need more clarity on that. That one also takes some time to re-learn
Mavi
Agree 100% David. I prefer the older version, and don't see the advantage of the new version. We build everything with a .base component, and set all of the boolean options there, and the sidebar properties panel is just like the new one, aside from the Text property, which we couldn't do in previous version… but we never change text in the panel, we always change the text in hte frame.
@@WePiphany I think the purpose of this (and a lot of other features in Figma) is so that properties can match the properties passed into components on the dev side.
@@pleasejustletmebeanonymous6510 I think you’re right. It all has to work with where the product is headed and we are seeing the early parts of that. I have fully adopted the UI approach to creating component properties over layer naming.
thank you, I was getting confused by the layer property vs icon property. you explained it perfectly, thank you so much!
You're welcome! Layer visibility is for any layer and icon / swap instance property is only for nested components:)
Mavi
Thank you I was soo lost
Thank You
Please make a video on instance swap
Thanks a lot. Overall good news. Nevertheless, not yet thought through to the end.
Create a component with title and text. You can easily edit the text in the design panel. But for styling you have to select the text in the component (instance) again, otherwise you can't access the text options.
that's always the case though? a frame can have multiple text fields so it wouldn't make sense to be able to edit text styling without selecting the text layer. you can always control/cmd click the text to get to it easily.
@@wge621 Perhaps I have expressed myself in a misleading way? I have a paragraph. 40 words, font style 16px regular. 7 words have style 16px medium. 2 words of it in another color. Now I want to set the whole text to 18px. with one click.
@@michaelschultze3595 do you mean while using text styles? i agree the behavior with text styles is very frustrating, you can't even see what styles are being used if it's mixed. but if it's not added as a style and just a mix of text format (without those formats being added as design styles) then you should be able to set the paragraph block to a specific font as long as the paragraph is selected.
If the paragraph is within a component, though, I don't think it would make sense to be able to edit the text style just by having the component selected, because as I mentioned, there could be multiple text boxes nested within one component. so still not sure if I'm totally understanding the issue properly (e.g. are you trying to change one text box with multiple formatting options? are you trying to change one component with a text box inside it? are you trying to change mixed text with text styles applied?)
@@wge621 Now we are talking ;-)
What about if I have CTA with left/right padding 30px and top 15px and I want to create Icon only variant with Fixed 50x50 size. It's not possible with component properties. Or am I wrong?
That probably means setting the whole cta to hug contents and then create a sub-autolayout with the padding +text you mention. No padding on the whole cta. Then create a fixed 50x50 icon that will be also placed within the cta right next to the sub-autolayout but the 50x50 icon visibility will be controlled through component properties. That should do it :)
Thank you for tutorial. I think it is useful topic, but I find difficult to follow. I did not get what is going on. (beginner)
This video will definitely help:
ruclips.net/video/dLyghoKMB8c/видео.html
Can you make a smart animation video?
Sure, thanks for the tip! I have a couple of videos I'm currently working on but I can add Smart Animation Prototyping to my queue 😊
Thanks for being here!
Mavi
@@mavidesign This would be amazing, thanks! :)
Figma really messed up with this Text Property, needlessly complicated
Agree. Isn't it easier/faster to edit the text on the frame instead? I do think there may be a benefit to the Text Property if you need to make sweeping changes to default text. Hopefully, I will discover something about the new component properties that proves to be useful. Definitley more confusing to build components now. Luckily, the old way is still fine and we do not have to use the new features.
@@WePiphany You're absolutely right!
@@WePiphany Agreed. Being able to mass-change is _really_ nice, but doesn't apply in most cases. But I think using the text property in a table component would be great for this!
And while these new features do pare down how many variants we have, now the user of our design system is overloaded with even more properties. You have to have two full properties to show and swap an icon out. It's nice to not have to dig into the component for it, but there's a lot more work for design system managers.
@@miadietrich7347 I’ve really been focused on mastering the new component properties the past two weeks and have come to appreciate them a lot more. Yup are right about how it can make thing a bit more complicated to manage.
Working on a few videos over on my channel to cover what I learned about converting base components and a massive design system to the new component property approach.
I’ve become a fan.
Its kinda confusing