This explanation literally better then all freaking tutorials from official Figma channel I`ve seen, omg... I'm so thankful!
@thejunboy2 ай бұрын
Wow, appreciate the comment thanks! You might want to try learning Variables which is the new way to do this. kzbin.info/www/bejne/pafUnppnnbabosk
@vivianli21502 жыл бұрын
I like the 'avoid this method' section being put upfront as that is exactly the frustration comes from!
@thejunboy2 жыл бұрын
Yes exactly! It is good for people to understand why other 'quicker' method may be worse in the long run.
@alexbaciu82112 жыл бұрын
While this works to an extent, it is not the purpose of variants nor the cleanest way to handle icons. You can simply have all your icons as individual components and just use the swap instance feature of Figma. Compared to variant properties, the swap instance feature has search, which makes it a lot easier to get the icon you want in a real project where you might have hundreds of them.
@thejunboy2 жыл бұрын
Appreciate the thoughts Alex! I agree it is not the cleanest when setting up a proper design system. But nevertheless, the variant trick may be useful for some who want a quick workaround for conceptual work without needing the hassle of setting up everything perfectly.
@nathaniel-web4493 Жыл бұрын
love your thoughts
@nathaniel-web4493 Жыл бұрын
Beatiful beautiful piece here. Thanks so much. This has been a thorn in my flesh expecially while working on dashboard Uis Thanks a bunch
@thejunboy Жыл бұрын
I am glad you found it useful :) - figma made some slight tweaks that makes it even easier which i walkthrough in this revised video if you want to check it out. kzbin.info/www/bejne/pafUnppnnbabosk
@nathaniel-web4493 Жыл бұрын
@@thejunboy ok noted, will look it up
@NavesNiche Жыл бұрын
dude you should make way more videos! You have the personality for it, you're very inspiring
@goner13 Жыл бұрын
I was the guy from the first example until I watch your guide. Thx man!
@AnastasiyaKrivets-wr3fz6 ай бұрын
Thank you so much! I ‘ve been looking for this tip so long
@thejunboy6 ай бұрын
Glad I could help! Make sure you watch the follow up video, where you can use variables instead. (came in a more recent update) kzbin.info/www/bejne/pafUnppnnbabosk
@salmanseif17672 жыл бұрын
thank you for the video, this is very helpful in solving my problem for replacing the icon on a button
@ahsanshamoon78612 жыл бұрын
Thanks Buddy! Was stuck at variants since yesterday.
@Camilaboldrin22 жыл бұрын
Omg thank you soo much, i was looking for something like this
@beratcavdar2310 Жыл бұрын
I work on it an hours and i tired and i said lets check KZbin. See you and i learned. Thanks body
@hannahrufenacht4366 Жыл бұрын
This is amazing - thank you!!
@thejunboy Жыл бұрын
no worries - make sure you watch my updated video on Component Instance Swap :)
@ermandunyauzun31262 жыл бұрын
This was what I exactly needed, thanks! :)
@harshithavlog86055 ай бұрын
Thank you so much for ❤
@thejunboy5 ай бұрын
You're welcome 😊. There is a new way to do this using variables. I have demonstrated it here, if you want to check it out! kzbin.info/www/bejne/pafUnppnnbabosk
@fedeallirom Жыл бұрын
the problem with this method is that commonly, at least in my case, we use more than 200+ icons, so I will have a 200+ list with no icon preview.
@thejunboy Жыл бұрын
If you haven't already - check out the new Component properties features. Instance swap :)
@alidaisgandarli26592 жыл бұрын
Best explanation ever! THANK YOU!!!!
@slack.2 жыл бұрын
Ideally the first option (wrong method) should be the way because it’s practical & intuitive, however I blame Figma for complicating it. What happened to human designs?
@graphic-nations2 жыл бұрын
Amazing
@wahibagoumad3843 Жыл бұрын
thank you
@marcuscustodio9338 Жыл бұрын
Very nice tutorial, thank you!
@vickydiabinha2 жыл бұрын
Thank you so much
@joanerhabor32332 жыл бұрын
Life saver. Thank you
@machimuse75262 жыл бұрын
Excellent! Well explained 👍👍
@patrickmartin11492 жыл бұрын
Since the icons are already symbols, couldn’t we just swap them out without having to make them variants? What is the main difference?
@thejunboy2 жыл бұрын
you can swap them out if you want manually, but the whole point is you want to make the whole button into one component. the benefit of doing this is you can edit the main component and all your instances will change with it. you cannot swap out icons if the button is a component, but making variants allow you to switch icons.
@shubhamgujarathi71552 жыл бұрын
Great, helpful :)
@brian97902 жыл бұрын
I still dont get it. Why wont you show us how you get a component in your component? How do I place the icon in the button?
@TheLiipex2 жыл бұрын
will this effective for large scale icon pack ?
@ashrafulhaquemanna2 жыл бұрын
Yes
@radiyyakhan2533 Жыл бұрын
Hi, thanks for the video its really helpful. I have a question, what do you do in order to ensure your icon is the same colour as your text
@thejunboy Жыл бұрын
You would just use Styles. A colour fill style can be applied to multiple elements and when you change the style colour, all of these elements will change with it.
@wanderdutts45842 жыл бұрын
This is cool. What happens if the icons are not the same size, so instead of 24x24, one is 27x22. Would this icon be resized to 24x24 and look a bit squashed?
@thejunboy2 жыл бұрын
That should be fine. Using autolayout will allow the components to automatically adjust to the sized elements within, but it is good practice to have your vector icons in a bounding box which is consistent. As an example, if you have an icon at 24x24 and 27x22 maybe consider a 28x28 bounding box OR shrink your 27x22 down to fit within the 24x24. It all depends on the scale of your vector icons to create a consistent style.
@ddraccoo2 жыл бұрын
This is so confusing, i don't even have the Variants option in the right sidebar. Do I have to make both icons a componet before hand? They're just PNG's. What??
@thejunboy2 жыл бұрын
Yes! Your selection must be only of objects that are 'Main Components' for the variant option to come up.
@ddraccoo2 жыл бұрын
@@thejunboy I already have all of the icons and images there so how do i turn them into components?
@thejunboy2 жыл бұрын
@@ddraccoo you can right click any object and 'create component' or you can select the object and in the top middle there is a four diamond symbol which is also to 'create component'
@rmsphotodesign2 жыл бұрын
How do you maintain the white color style of the button icon while swapping out the variants?
@rmsphotodesign2 жыл бұрын
Just figured it out, the nested layers have to share the same name (in this case, vector)
@ericwangphotography4472 жыл бұрын
nice video ligma
@SushiPat2 жыл бұрын
What's ligma?
@isgalida2 жыл бұрын
Hi there, nice explanation! Thanks tons! Would you kindly post a video about how much of a Figma community duplicate file we should change in order to make it look original i.e. "ours" rather than "a copy paste" (definitely considering the license and say it says you can change it completely and publish freely). You may mention "start with typography, colors, etc." What would be your tips and tricks in working with Figma community files. Thanks in advance.
@thejunboy2 жыл бұрын
This is a really great question! I definitely need to get back into making videos. My suggestion for you would be to use community files to learn about how people style their components and structure their files. I would personally try to always build things from scratch. 1. It is good practice to know how to build things. 2. BUT leverage components from these files to assist, you don't have to reinvent the wheel. If someone has designed a Iphone 13 mockup - feel free to take that and use it. But for components, think about why the create of the community file design things the way they did. For example a button. Would rounded corners? the colours? the spacing? the text? work for my design. Don't just apply rounded buttons in your design because you saw someone else do it, but always ask yourself why? why? why? 3. Designs that work and look great in one application/industry don't necessarily work in another. Try to find a style that not only you like but works for the user. I would also be looking into design systems online. Start with Material Design by Google and the Apple IOS systems. All the best :)