Figma's NEW Component Properties Update | Figma Tutorial
HTML-код
- Опубликовано: 27 июн 2024
- 00:00 - Get early access to the NEW Component Properties update
00:31 - Context around Component Properties
03:26 - Issues with Component Properties
03:39 - NEW Nested Component Properties Figma Tutorial
===
My Ultimate Figma Design Masterclass (3,700+ students. 90+ Videos. 10+ hours)
👉 thedesignership.com/courses/t...
Shipfaster UI - Advanced Figma Design System (2,000+ Designers, 6,000 components and variants, 150+ global styles and 2,800+ media assets)
👉 thedesignership.com/products/...
Outline - Figma Wireframe Kit (400 designers. 350+ components and variants)
👉 www.thedesignership.com/produ...
Sign up to my newsletter for exclusive content:
👉 mizko.net/newsletter
Follow me on IG (Daily updates):
👉 / themizko
===
Level up with me:
Become a legendary designer: thedesignership.com
Personal portfolio: mizko.net
Instagram: / themizko
LinkedIn: / mizko
Twitter: / mizko 
Развлечения
Very exciting update! Was actually struggling with this recently. Thanks for sharing!
I used to love this way of handling components in Sketch. Very happy Figma caught up also in this area, will definetely help us to work faster, reduce mistakes like miss clicks and overall make our workflow much more efficient
This is great! Also, Figma's Deep select shortcut (command+click) is super useful in skipping the double-click madness for selecting nested items.
Omg. This is exactly what I have been waiting for a long time ❤ awesome
This was very useful. I like that you make videos about good practices and more efficient ways on how to do things!
:) thank you Toms
YES! Just today i had exactly this issue and wondered why this is not yet possible! Really welcome surprise to see that this is already in reach! 😍
Good old figma videos, let’s gooo
Great tutorial!! 👌 Not only did it teach me how to set up components properties correct, also why they are needed.
You make everything easier to learn, thank you!
Thank you so much! I just started create components and your videos help me a lot
This will save so much time… hope to see it in Shipfaster!
The key fix here was allowing component properties to work with nested components/variant properties, very happy with the update
This update video is so helpful, thank you!
Great tutorial! Trying to use nested instances more often!
Always super clear and well explained!!🤩
A brilliant. Thank you man!
Thanks bud! You rock!
Thank you Mizko, it was very useful
Thank you so much for the new component properties update
Anytime Vaishnavi!! :)
Thank you! Very helpful.
Awesome! This is going to make life a lot easier. Thanks for sharing.
This literally just saved me me from SO many days of frustration. I'm learning Figma and have learned to make accordians/component sets and I've seen a hundred comments all over RUclips of people being confused on how to change any kind of text description in their menu/accordian components... (like you can change the text but in the prototype it's not linked and just shows the lorem ispum that was used to create the component.) The solution I found is to add these text component properties to the text used in the component sets being created... it solves the problem and allows any new text descriptions to link in the prototype.
This is really useful but can be quite complicated to understand meaning u have to rewatch the video and also u need to get use to using this method.
Thanks, this is really helpful...
Thank you very much for all your videos. Very good explanation 😊😊😊
This is soooo great! Thanks Mizko
Thank you for the tutorial
Thanks Mizko!
Perfect, I missed this in Figma after leaving Sketch.
Oh man , You explained best
This update is super welcome! I've been working with a super dense design system at work and this will speed up prototyping by quite a bit by saving on those extra clicks which easily gets frustrating.
Edit: The option was available on the Windows Figma client by the way (the impression I got was it would only be available if I accessed via a browser so just putting this out there in case it helps anyone)
100% will save so much time!
I found it on Mac as well, by accident a few days ago
Using this feature for long time love how it makes changes in component easier
figma should hire you for their tutorial videos. so easy to learn , understand and create...keep doing the good work...🤟🏻👌🏻
Thank you!! :)
This feature is so cool, thanks for updating us Mizko
✌️
Thank you so much! I two days try to find how create component like this😍😍😍😍
Great expanation, thanks!
Thank you🤯
thank you so much
Thanks for the video!
👌
U have been teaching so well.
Thank you so much Karma!
that's sick! :)
Awesome
This is a powerhouse feature as we keep improving the usability of Design systems in Figma. Love it!
Yep! it definitely seems that Figma is prioritizing workflows with design systems
@@Mizko Have you deep dived Design tokens yet? I'm mid funnel learning more on it. The top down/global styles management solution, seems legit. Would be great for brands across platforms. Fingers crossed it becomes a feature at some point too.
Bloody amazing
Agreed!
Thanks for the walkthrough of the new update. The examples made it super easy to understand!
Also, you are going to hate me for this because you won't be able to unsee it, but there's small white fluff at the back of your hair :P
you don't have to use the web client you can also use component properties beta in the app.
great feature.
Nice update
Thanks Mohammed!
The only app update I love so far and every update is like a birthday present. Can't wait to try out the alpha stage.
Haha, glad to hear!
please Mizko, i just started ux designing. what the difference between this and just making the component a variant with their different properties? which better?
Thanks for the update tho.
Will you be updated your masterclass course based on this? Give us some updated videos?
Good video, is there a way to have the atoms be hidden when publishing. I found when you hide an atom and change a variant then publishing won't push the update to child components in other files.
Hi Mizko
I am planning to take your ultimate Figma masterclass. Would these new features be a part of that course?
How to add any icons to your Figma library (locally to use instant swap property)? any videos?
💯🔥
Hay, wanna take Figma master class course now, is their any coupon for that ? On the occasion of the Saudi National Day cause im from SA 🇸🇦
Hmm, the preferred feature seems useful in saving time swapping out icons. And the exposed nested properties feature has removed the need for you to create separate properties for those nested components that you swap out often in a large component if I'm understanding this right. Should be helpful!
In summary, much less clicking and more visibility into 'hidden/nested' properties in larger components :)
@@Mizko Much better XD. Btw, that white speck on your hair was really distracting Idk if you noticed 🤣😅
thanks bro but theres some white thingy on your head
HAHA! I noticed it in post production 😂 I was hoping no one would notice
this is insane
I really wish Axure would focus on cleaning up their UI because if it were as intuitive as Figma, it would destroy everything
I appreciate this video but there's a problem in this. Lets say your badge dimension is 100x30px and the chevron size is 24x24px. If you swap the badge with chevron - the icon also becomes 100x30px and not 24x24. Is there's a solution to this?
Hi Mizko! Thanks for sharing with us. How do I activate the new props? I tried many ways to see the option but it doesn't shows me nothing new. I mean, the only props I can see are Text, Instance Swap (with no preferred options) and Boolean. Thanks again!
Same problem now, did you find a way to solve this?
If I have this turned on and am using it within a design system, can everyone with access to the design system library then have expose nested components turned on even if they don't have early access to beta features turned on?
Yes they can, as explained in a figma webinar. The beta features have an authoring value state and consumer value. Everyone has the consumer value turned on which allows you to see components with nested instances. The authoring value which you turn on just lets you apply nested instances to components.
TL:DR you need it on to apply expose nested instances but don't need it on to use components with exposed instances.
I can't seem to add the "nested instance" property to a variant inside a component set. I don't see the option. However I can create a component, add the "nested instance" property and then create variands from that component, and it works just fine, so I assume not being able to add the property to a variant once it is part of a component set might be a Bug. Anyone else with the same issue?
I think only the main component or the group of variants has this feature. Turn it on and then the variants will have the nested instances bubble up.
But it is old. There was something like that before this update.
Component properties is old.
Nested properties is new.
Wow Adobe Figma is really impressive.
First
Approved!
Penpot
Don’t get me invested when Adobe is then going to shit it all up 😢
I have been using Adobe products for 14 years now and I still pay for their entire CC bundle. I don't have anything against Adobe.
What is figma? Never beard of it.
Way too complicated and time consuming. Sketch does this automatically handling every aspect of the component properties. I don’t know why Figma is so afraid to mimic some features that Sketch is doing just great.
Figma is getting increasingly querky and less intuitive.
figma is getting cluttred with useless features.. these features are hardly used ... i wish they stick to lcean ui like when they launched with some imp features.. doubleclicking doesnt make me sweat .. cmon