Thank you so much! I've struggled lately to understand why my icons would strech each time I use the instance swap. I would search online and find a solution, and each time forget it. You're the first one to really explain this so clearly and it makes all sense. thanks to you I'm going to remember it ^^
@thejunboy
Жыл бұрын
Glad it helped!
@aloysiofranca
Жыл бұрын
Thanks a lot! It was exactly what i was searching for!
@thejunboy
Жыл бұрын
Glad I could help!
@djashawe88923
Жыл бұрын
Thanks a lot. I really like how you explain the concept in an easily understandable way(e.g., a frame can act as a folder). I also appreciate how you explain why you did what you did at every step in your process(e.g., why you create an auto layout for instance). That's extremely helpful! It'll be even more amazing if you could maybe in your next videos, throw in some short examples of use cases where deleting or detaching properties can come in handy for example. Keep up the good work! 🤓👍
@thejunboy
Жыл бұрын
Thanks for your feedback! If you're working with an established design system in a company, you should never detach instances as then you would be creating a new un-approved component unless you are asked to do so. Making new components for a design system usually requires approvals by whoever is managing it. But if you're working on a rough conceptual prototype or a short quick project - just detach components to make edits if it saves you time. You would want to remake it into a proper component later/in the next phase if you get to it. Not every project needs a design system or a working component library. Do what is required for the type of work you're doing.
@djashawe88923
Жыл бұрын
@@thejunboy Thanks a lot for your detailed explanation. I appreciate it very much! 👍
@walfrido77
Жыл бұрын
Finnaly a video that made me clearly understand how it works. Perfect explanation . Than you for that.
@thejunboy
Жыл бұрын
appreciate the feedback - all the best with your Figma work 🤝🏽
@WanderyenErin
7 ай бұрын
Thank you so much. Very detailed video! Good job
@thejunboy
7 ай бұрын
Glad it was helpful!
@saalimkhan1765
2 ай бұрын
You can select and create create multiple components instead of selecting single icons and then make component
@thejunboy
2 ай бұрын
100%. This feature probably came after I made this video. But yes you can select multiple frames and make multiple individual components at the same time!
@relja_
Жыл бұрын
Great video. But unfortunately this doesn't work if icons are not the same size. Lets say that i have a button component with an icon and i make an instance of that button. When i try to change the icon on the instance it keeps the previous icons width and height witch makes it behave weird (stretch, shrink...). Do you know if there is a way to make it work for icons that are different sizes?
@thejunboy
Жыл бұрын
Thanks for the comment - you can add autolayout to your icon components to force Figma to adopt the different sizes on instance swap.
@relja_
Жыл бұрын
@@thejunboy Thanks dude it works. 🥰
@antonbagdatyev3699
10 ай бұрын
Thank you for the video! So let's say I have a button component with a "Left icon" instance swap property. In the preferred instances list I select all the icons currently available in my UI kit, and we're fine for now. Now, next week I pull up this project again add I add a new icon to my UI kit. Now, if I create an instance of this button component and I try to use its "Left icon" instance swap property, I won't see the new icon I just added. I will have to go back to the main button component and edit its "Left icon" instance property again just to add this new icon to the list of preferred instances. This breaks the whole point of this feature and makes it useless from my point of view, as it's not scalable in the long run. Are you aware of a way to overcome this? If is set the preferred icon instances on an instance swap property of a main component, I'd like to be able to set *all* the currently available icons *plus tell Figma to include all the future icons* that I might add to the project, so that I don't need to update the preferred instances myself each time I add a new icon to my UI kit. That's what I would call a good User Experience.
@thejunboy
9 ай бұрын
thanks for your comment. there is no current feature for this, the easiest work around is have no set preferred instances and instead put all your icons into one frame, essentially making a folder. when you swap instances it will automatically show all the icons in this frame (folder). add any new icons into this frame.
@antonbagdatyev3699
9 ай бұрын
@@thejunboy Yep, that's why I was saying that this preferred instances feature is violating the purpose of easing your workflow in the first place.
@bv9628
8 ай бұрын
How do you handle dark mode with the icons? So if I'm hot swapping a textfield from light to dark I want the icon to also change color. Do I need to make a set of dark mode icons or is there a better way?
@thejunboy
8 ай бұрын
Figma has released a ton of updates since this video. The key ones to learn about are 'variables' for colour and 'variable modes'. I touch upon it here kzitem.info/news/bejne/0GuFv6KsqpGSY5gsi=bcSCex4-tqV51gm9. So rather than creating another set of icons for dark mode. You can assign the icon colours to follow the frame's variable mode. This may not be available for free users, but have a look.
@bv9628
8 ай бұрын
Thanks I'll check it out, not a free user so it shouldn't be a problem.
@fnonaka
Жыл бұрын
So the Variant function is useless from now? I saw that video about swapping icons inside a button... you would use Instance, instead of Variant?
@thejunboy
Жыл бұрын
Great question! I would say they are still both useful for different use cases. Instance swap is part of a suite of 'Component Properties'. It is a property that can ONLY be used on nested instance properties and not the main component itself. This is useful for controlling icons (nested instance component) in a button (main component) Using 'Variants' is a way to control main components. An example would be swapping between a Primary button (main component) to a Secondary button (a different main component) Instance Swap is not possible with this scenario. -- Arguably you could still use Variants to define icons in a button component, however: 1. You lose the ability to search for icons in your file 2. You can't define preferred values 3. You can't swap the icon at the component's parent level, you would have to select the icon and then swap it using the variant dropdown property
@goldenant9450
Жыл бұрын
@@thejunboy thanks for that explanation. i've been using comp properties and didn't even know preferred was a thing... i find it very difficult to keep track of everything when you have complex components. I have a drop down menu and the menu items are nested inside the menu stack and then my drop down label & menu stack are nested inside of my main container which also contains a nested scrollbar & nested search field. And so I fear other people who use my components won't understand how to use them, as the properties are spread across many different layers. For the example you gave for the buttons, you say the secondary button would be a different main component. But wouldn't you have a MAIN component for all buttons which would then be used to create the rest of your buttons (changing the colors and size, show/hiding icons, etc.) So you'd have MAIN nested inside a set of variants (primary , secondary, etc)
@andre.machado
7 ай бұрын
Why dont you show it working?
@thejunboy
6 ай бұрын
hey mate - as in are you having trouble getting it working? the tutorial build starts at 8:03 i show it working at 14:16
Пікірлер: 27