I love your intro and your tutorials! Your channel is amazing, I wish you lots of success!!
@nabgilby2 жыл бұрын
Wow, finally someone explains clearly this most important concept of all!
@brownnutter2 жыл бұрын
This is amazing! No more detached components moving forward.
@XTRMAyronside3 жыл бұрын
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 👌
@velimirtopolovacki89563 жыл бұрын
Exactly my thought as well. Only people in Figma fail to realize this.
@JonDaiello2 жыл бұрын
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! 👏🏻
@almaslacАй бұрын
Thanks, very useful video!! What tool are you actually using to draw on the screen as you present?
@faranakvn3976 Жыл бұрын
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!
@JamesWilsonBluespark2 жыл бұрын
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.
@TheRiteHand2 жыл бұрын
thank you for posting this! I was losing my mind!
@Irakli0083 жыл бұрын
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! 🤩
@CarlosAndresVelasquez2 жыл бұрын
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
@DustinYoung-dr4df Жыл бұрын
Well conceived video - great information, no wasted time. Thank you.
@j.k24 Жыл бұрын
ghehe, it feels like i am on an airplane, great tut man, keep it going
@alissonsantoro Жыл бұрын
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.
@luiscamino3 жыл бұрын
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?
@TheFunofIterating3 жыл бұрын
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. :)
@antonbagdatyev36992 жыл бұрын
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!
Great tutorial. Rookie question. In your window component I can see a header and footer toggle - how are these generated?
@TheFunofIterating2 жыл бұрын
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.
@chazzems2 жыл бұрын
Thank you so much.
@auburntiger68292 жыл бұрын
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?
@TheFunofIterating2 жыл бұрын
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).
@borkolar3 жыл бұрын
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?
@TheFunofIterating3 жыл бұрын
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).
@TheFunofIterating3 жыл бұрын
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.
@thiagovilla9708 ай бұрын
Super handy.
@mateuszjankowski17823 жыл бұрын
Love this video, thanks for sharing 🤘
@billysweetman70403 жыл бұрын
Fantastic videos!
@jakubkuik103 жыл бұрын
Great stuff! Keep it coming :)
@bpsujith3 жыл бұрын
This is super cool...
@Introvernauta Жыл бұрын
6:10 Windows shortcut?
@1000monograms3 жыл бұрын
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.
3 жыл бұрын
Wow amazing
@louisdauvergne17272 жыл бұрын
Wait figmate, what about markdown in figma ? Any doc is welcome :) Thanks for your awsome content
@neblinamorado3 жыл бұрын
Interesting idea
@samislam2746Ай бұрын
It's insane figma does not support child components and I had too look for this
@invisiblehandofadamsmith2 жыл бұрын
like it :) / nice voice :)
@abdullahprogamer20223 жыл бұрын
you speak fast
@TheFunofIterating2 жыл бұрын
Am I? So far I've been worried about speaking too slow. Well, thanks for the advice anyway!
@blackshirtdesign3 ай бұрын
Just way too much rambling with no value, blah blah blah painful