This explanation literally better then all freaking tutorials from official Figma channel I`ve seen, omg... I'm so thankful!
@thejunboy
2 ай бұрын
Wow, appreciate the comment thanks! You might want to try learning Variables which is the new way to do this. kzitem.info/news/bejne/0Kyn05tnoYOZn5w
@vivianli2150
2 жыл бұрын
I like the 'avoid this method' section being put upfront as that is exactly the frustration comes from!
@thejunboy
2 жыл бұрын
Yes exactly! It is good for people to understand why other 'quicker' method may be worse in the long run.
@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. kzitem.info/news/bejne/0Kyn05tnoYOZn5w
@nathaniel-web4493
Жыл бұрын
@@thejunboy ok noted, will look it up
@alexbaciu8211
2 жыл бұрын
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.
@thejunboy
2 жыл бұрын
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
@NavesNiche
Жыл бұрын
dude you should make way more videos! You have the personality for it, you're very inspiring
@AnastasiyaKrivets-wr3fz
6 ай бұрын
Thank you so much! I ‘ve been looking for this tip so long
@thejunboy
6 ай бұрын
Glad I could help! Make sure you watch the follow up video, where you can use variables instead. (came in a more recent update) kzitem.info/news/bejne/0Kyn05tnoYOZn5w
@goner13
2 жыл бұрын
I was the guy from the first example until I watch your guide. Thx man!
@salmanseif1767
2 жыл бұрын
thank you for the video, this is very helpful in solving my problem for replacing the icon on a button
@ahsanshamoon7861
2 жыл бұрын
Thanks Buddy! Was stuck at variants since yesterday.
@hannahrufenacht4366
Жыл бұрын
This is amazing - thank you!!
@thejunboy
Жыл бұрын
no worries - make sure you watch my updated video on Component Instance Swap :)
@Camilaboldrin2
2 жыл бұрын
Omg thank you soo much, i was looking for something like this
@harshithavlog8605
5 ай бұрын
Thank you so much for ❤
@thejunboy
5 ай бұрын
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! kzitem.info/news/bejne/0Kyn05tnoYOZn5w
@ermandunyauzun3126
2 жыл бұрын
This was what I exactly needed, thanks! :)
@graphic-nations
2 жыл бұрын
Amazing
@beratcavdar2310
2 жыл бұрын
I work on it an hours and i tired and i said lets check KZitem. See you and i learned. Thanks body
@alidaisgandarli2659
2 жыл бұрын
Best explanation ever! THANK YOU!!!!
@wahibagoumad3843
Жыл бұрын
thank you
@vickydiabinha
2 жыл бұрын
Thank you so much
@marcuscustodio9338
Жыл бұрын
Very nice tutorial, thank you!
@joanerhabor3233
2 жыл бұрын
Life saver. 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?
@machimuse7526
2 жыл бұрын
Excellent! Well explained 👍👍
@patrickmartin1149
2 жыл бұрын
Since the icons are already symbols, couldn’t we just swap them out without having to make them variants? What is the main difference?
@thejunboy
2 жыл бұрын
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.
@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.
@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 :)
@wanderdutts4584
2 жыл бұрын
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?
@thejunboy
2 жыл бұрын
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.
@shubhamgujarathi7155
2 жыл бұрын
Great, helpful :)
@brian9790
2 жыл бұрын
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?
@TheLiipex
2 жыл бұрын
will this effective for large scale icon pack ?
@ashrafulhaquemanna
2 жыл бұрын
Yes
@ddraccoo
2 жыл бұрын
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??
@thejunboy
2 жыл бұрын
Yes! Your selection must be only of objects that are 'Main Components' for the variant option to come up.
@ddraccoo
2 жыл бұрын
@@thejunboy I already have all of the icons and images there so how do i turn them into components?
@thejunboy
2 жыл бұрын
@@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'
@ericwangphotography447
2 жыл бұрын
nice video ligma
@SushiPat
2 жыл бұрын
What's ligma?
@rmsphotodesign
2 жыл бұрын
How do you maintain the white color style of the button icon while swapping out the variants?
@rmsphotodesign
2 жыл бұрын
Just figured it out, the nested layers have to share the same name (in this case, vector)
@isgalida
2 жыл бұрын
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.
@thejunboy
2 жыл бұрын
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 :)
Пікірлер: 53