Almost make us feel like actual developers, great example of Figma power and designer abilities. Nice explanation too, please keep up the good work, happy to see quality Figma content on youtube 👌
This was amazing! well explained! I was having this problem and looking at so many videos and didn't understand what they did or said! Thanks to you and your video my problems is solved!
Quick question, when Im swapping the instance for my sample form, the sample form comes up upside down… any ideas? The form is in the right orientation when I build it. I dont know why its coming up upside down
This is a fantastic approach! My team has been struggling with this concept for a while. I never considered using local components and swapping them with a swappable part of a library component. Thanks for sharing! 👏🏻
Thank you for this tutorial! BTW: Which software are you using in order to highlight your cursor/pointer while moving your mouse on the screen and highlighting and creating arrows? Thanks!
Thanks for this! I adapted this solution to add browser frames around webpage designs. Only caveat that I found that wasnt really explained is that the height does not properly adjust when swapping in a Page - what you refer to as a local compoent in your video (ie, the form in your example) - UNLESS the local component also has autolayout enabled.
As you said in the beginning, everyone is probably used to doing this with icons inside buttons. Love the "replace me" component idea! But one thing I didn't quite get: when you renamed the "replace me" instance to "Content" (so that it always says "Content" in further instances, even after swapping the placeholder), what are the benefits of this? Just the clarity that "it's the content" or anything else?
Good question! Wanting to keep everything consistent in the layers panel is one thing, because, eg. I wouldn't want a developer inspecting my layers to see a window component with a "Component 1 (Copy)" layer inside of it. Another reason is that I know Figma can be picky when it comes to layers' names and carrying on component overrides throughout different instances based on that parameter. The worst part is that Figma can "change its mind" regarding the logic behind this overnight and - because it's a web tool - there's nothing we can do about it. Oftentimes there won't be any "release note" to let us know about another tiny-winy adjustment and we ourselves won't notice that something has changed until... something breaks. I've been there too many times with my components library that I'm creating since 2019. That's why I like to give my layers generic names, in general. I do it as a preventive measure if that makes sense. :)
Not sure if I understand what you mean, but you can always duplicate a Figma file for this episode and inspect the layers yourself. The link is in the description.
What do you recommend for icon components? Generally speaking, is it better to turn all your icons into variants of one big component or have them as separate components so you can swap them as instances?
Separate components 100%. Icons as variants is a difficult approach to work with, as you don't get previews of your icons and you can't really use your variants description to put keywords for your icons (for better discoverability in the Assets panel).
How do you do this if you dont wan't local component? When I do stuff like this, I usually try to have everything in our design system folder so everything can be used everywhere. Does this always need a local component in the file you are making your UI?
You can totally remove your local component once you’re done with it, as it can be restored later easily. Please, see my “Boilerplate Components” video for a better explanation of this (it’s towards the end of the video).
Personally, I like to keep my local components in the files I’m using them, just for visibility for others working with me. I create a separate page for that, called “Component Overrides”, and then I group my local components in frames, based on where I’m using them.
Developing an interface to be programmed in React makes a lot more sense when using components. The purpose of "componentization" of system elements makes no sense when the user disconnects the variant from the main component, especially for a change within the component.
That is really really good video. I have been using that technique from some time now (I hope it is not trade-marked :) ) and have one feedback - you need to really PLAN the components you want to use placeholders in. Otherwise it makes hard to determine what inherits from what and why my design got messy - especially with auto layouts. Still - very good video, not only topic is cool but delivery as well. I give a big Like and Sub.
I love your intro and your tutorials! Your channel is amazing, I wish you lots of success!!
Thanks, very useful video!! What tool are you actually using to draw on the screen as you present?
Wow, finally someone explains clearly this most important concept of all!
Almost make us feel like actual developers, great example of Figma power and designer abilities. Nice explanation too, please keep up the good work, happy to see quality Figma content on youtube 👌
Exactly my thought as well. Only people in Figma fail to realize this.
This is amazing! No more detached components moving forward.
This was amazing! well explained! I was having this problem and looking at so many videos and didn't understand what they did or said! Thanks to you and your video my problems is solved!
Quick question, when Im swapping the instance for my sample form, the sample form comes up upside down… any ideas? The form is in the right orientation when I build it. I dont know why its coming up upside down
This is a fantastic approach! My team has been struggling with this concept for a while. I never considered using local components and swapping them with a swappable part of a library component. Thanks for sharing! 👏🏻
Thank you for this tutorial! BTW: Which software are you using in order to highlight your cursor/pointer while moving your mouse on the screen and highlighting and creating arrows? Thanks!
ScreenBrush twitter.com/AdamPrzewoski/status/1387028671467298817?s=20&t=6iRg4vMT-iMx-wIkCt_1gg
10 seconds in and I already subscribed. I’m a heavy Sketch user and advanced Figma content like helps and encourages transitioning so so much! 🤩
Thanks for this! I adapted this solution to add browser frames around webpage designs. Only caveat that I found that wasnt really explained is that the height does not properly adjust when swapping in a Page - what you refer to as a local compoent in your video (ie, the form in your example) - UNLESS the local component also has autolayout enabled.
thank you for posting this! I was losing my mind!
As you said in the beginning, everyone is probably used to doing this with icons inside buttons. Love the "replace me" component idea! But one thing I didn't quite get: when you renamed the "replace me" instance to "Content" (so that it always says "Content" in further instances, even after swapping the placeholder), what are the benefits of this? Just the clarity that "it's the content" or anything else?
Good question! Wanting to keep everything consistent in the layers panel is one thing, because, eg. I wouldn't want a developer inspecting my layers to see a window component with a "Component 1 (Copy)" layer inside of it. Another reason is that I know Figma can be picky when it comes to layers' names and carrying on component overrides throughout different instances based on that parameter. The worst part is that Figma can "change its mind" regarding the logic behind this overnight and - because it's a web tool - there's nothing we can do about it. Oftentimes there won't be any "release note" to let us know about another tiny-winy adjustment and we ourselves won't notice that something has changed until... something breaks. I've been there too many times with my components library that I'm creating since 2019. That's why I like to give my layers generic names, in general. I do it as a preventive measure if that makes sense. :)
Well conceived video - great information, no wasted time. Thank you.
Hey what software are you using for annotations, is it a after effects thing?
Screen Brush :) twitter.com/adamprzewoski/status/1387028671467298817?s=21
Great tutorial. Rookie question. In your window component I can see a header and footer toggle - how are these generated?
Not sure if I understand what you mean, but you can always duplicate a Figma file for this episode and inspect the layers yourself. The link is in the description.
What do you recommend for icon components? Generally speaking, is it better to turn all your icons into variants of one big component or have them as separate components so you can swap them as instances?
Separate components 100%. Icons as variants is a difficult approach to work with, as you don't get previews of your icons and you can't really use your variants description to put keywords for your icons (for better discoverability in the Assets panel).
Was this recorded in a tiny room? lol Crazy reverb sound! But great video none the less! Thank you for it :)
How do you do this if you dont wan't local component? When I do stuff like this, I usually try to have everything in our design system folder so everything can be used everywhere. Does this always need a local component in the file you are making your UI?
You can totally remove your local component once you’re done with it, as it can be restored later easily. Please, see my “Boilerplate Components” video for a better explanation of this (it’s towards the end of the video).
Personally, I like to keep my local components in the files I’m using them, just for visibility for others working with me. I create a separate page for that, called “Component Overrides”, and then I group my local components in frames, based on where I’m using them.
Developing an interface to be programmed in React makes a lot more sense when using components. The purpose of "componentization" of system elements makes no sense when the user disconnects the variant from the main component, especially for a change within the component.
Clear and concise tutorial. Keep them coming 😄
ghehe, it feels like i am on an airplane, great tut man, keep it going
the second key on 7:16 , you can hack for the content can be parent on nested component.
Underrated video! This is gold!
A big thanks to you for that one, really helpful!
Super handy.
Thank you so much.
That is really really good video. I have been using that technique from some time now (I hope it is not trade-marked :) ) and have one feedback - you need to really PLAN the components you want to use placeholders in. Otherwise it makes hard to determine what inherits from what and why my design got messy - especially with auto layouts. Still - very good video, not only topic is cool but delivery as well. I give a big Like and Sub.
6:10 Windows shortcut?
Love this video, thanks for sharing 🤘
Wait figmate, what about markdown in figma ? Any doc is welcome :) Thanks for your awsome content
Great stuff! Keep it coming :)
Fantastic videos!
This is super cool...
Interesting idea
Wow amazing
It's insane figma does not support child components and I had too look for this
like it :) / nice voice :)
you speak fast
Am I? So far I've been worried about speaking too slow. Well, thanks for the advice anyway!
Just way too much rambling with no value, blah blah blah painful
Awesome.