Hey ! I just want to let you know that you have thought me more about design in 30 minutes than design school has in a year, I am so grateful to you & you also explain things in a way that it is so easy to understand. For once I thank TH-cam's algorithm for helping me find you, looking forward to future videos.
Also if possible, I have joined a company and I’m struggling cause I don’t know any of the basics, Could you please make a video showing the base font size , padding, button sizes all of those standard guidelines if possible, thank you
You can. But adding so many variants to a master Icon component is not a common pattern. It makes organisation of icons really tricky. For example you might want to have 4 variants for an arrow icon where each variant defines a direction.
Is there a way to unionise or flatten a group in a way that lets elements with different stroke weights carry forward them after they r unionised or flattened? For e.g, 1 element has 0.5 stroke and other has 1, the union or flatten picks one weight and not their respective strokes
doubt here in this course, we are creating the design system from a fully -fedged developed app. but isn't it should be reverse? In companies, wont we be expected to create design system first and then the app (assuming its the very beginning of the company). In that case what should be the approach? because this seems like a reverse engineering
Hi guys, there is an easiest way to create and change icon entire icon component, i use fontawesome 12px as a main icon then add text properties, whenever i want to change the icon i just change the text properties input like heart or chevron etc. than add size properties 12-16-20-24-32-40-44 color properties etc. So in this way you dont need to choose nested component to change icon just write which icon you want to use on the label area on instance.
Interesting idea. Not sure if it scales well. I will try it out. Can you DM me a Figma file or screenshot or something that I can test? You can DM on Instagram
Are there any drawbacks to creating a single Icon component and have all icons as variants, instead of Instance swap? I find it faster to create and make changes using the Variant method.
Yes. 1. It’s very poor organisation of icons. It becomes hard to find something and maintain them 2. Becomes really hard to maintain when there are too many icons. 3. Sometimes icons themselves have its own variants. For example you might group all arrows (up,down,left,right) as a component set. Same would apply to other types of icons such as chevrons, statuses etc
What i learnt that we have to rename all the icons with a similar name to get inherent the property. As you renamed every icon shape. In this case if someone is using icon set from other design system, he needs to rename each icon name? Is there any shortcut to rename in single go😂
Hey, Thank you for the video, also I understood the benefit of creating component then the Instance and then a component with in nested Instance for easier swap. However I tried component with same shape or vector for icon and then instance of all component and still getting the same result without the additional result and it is maintaining the same colour size and scaling well as well. so I had a question is it like important to create 1. component then Instance and then an atom icon or it works the same with Instance because it worked for me and I even used the Instance and created a component and then an Instance of that component and did the icon swap and it worked as well.
So if you’re creating a button and a list item and a title with an icon, then you need to make sure that this icon can be replaced with any other icon. So instead of adding a instance swap property for each of the icons in the 3 components manually, you can create a master icon component and add the instance swap property there. You don’t have to manually create an instance swap each time you make a new component. If you use the icon component itself (which has the instance swap), you will save time.
Hi, great video, i learned a lot, like in every other video you make ! Great content and explenations. But I noticed something with the component icon, while you don't have to apply the swap instance on every instance which is great, you can't scale the instances of the icon for some reasons...
I found your tutorial to be highly detailed and informative, and it covered topics that are not usually found on TH-cam. However, I encountered a problem with your teaching style. You would frequently do certain steps and then undo them, which became quite frustrating for me while following along step-by-step. This also disrupted my learning pace and focus. Despite this, I must acknowledge that your knowledge of product design is top-notch. I believe that if you could address this issue with your teaching style, it would greatly enhance the learning experience. Thank you very much for your tutorial, Chetan.
Hii Chetan, thanks for this just wondering how you created an icon atom using an instance swap that can also be archived by creating a component set, right? I just wanted to confirm this as it's little confusing 😅
I’ve got a 5 hour long mini series coming very soon! It’s going to be the best series on Advanced Prototyping you will ever find on TH-cam (hopefully) 🙏
@@DesignPilot sir ji your content is the best content on tha TH-cam platform. I am learning UI design other TH-cam channels but not satisfied. When I learn ui design from design pilot channel content is easy to understand and get more knowledge
The icon atom doesn’t have any colors itself. It’s the icon in the icon atom that has the Colors. So as long as the icons have the same layer name, the Color should be transferred.
Hey ! I just want to let you know that you have thought me more about design in 30 minutes than design school has in a year, I am so grateful to you & you also explain things in a way that it is so easy to understand. For once I thank TH-cam's algorithm for helping me find you, looking forward to future videos.
Also if possible, I have joined a company and I’m struggling cause I don’t know any of the basics,
Could you please make a video showing the base font size , padding, button sizes all of those standard guidelines if possible, thank you
Everything is in my playlist
@@DesignPilot Sorry for not checking before commenting, will have a look
Cheers !
Nailed it ! This is exactly what I was planning to implement. Dropped the video just at the right time 🙌🏻😛
God level content🙌🙌
You are simply the best! Thank you for this.
Amezing topic and tips
Sir Explain figma new update varient and prototyping
Why can't we use variants instead of icon atoms ...?
You can. But adding so many variants to a master Icon component is not a common pattern. It makes organisation of icons really tricky. For example you might want to have 4 variants for an arrow icon where each variant defines a direction.
Is there a way to unionise or flatten a group in a way that lets elements with different stroke weights carry forward them after they r unionised or flattened? For e.g, 1 element has 0.5 stroke and other has 1, the union or flatten picks one weight and not their respective strokes
Right click and outline stroke
@@DesignPilot thanks man 🙏
doubt
here in this course, we are creating the design system from a fully -fedged developed app. but isn't it should be reverse? In companies, wont we be expected to create design system first and then the app (assuming its the very beginning of the company). In that case what should be the approach?
because this seems like a reverse engineering
Hi guys, there is an easiest way to create and change icon entire icon component, i use fontawesome 12px as a main icon then add text properties, whenever i want to change the icon i just change the text properties input like heart or chevron etc. than add size properties 12-16-20-24-32-40-44 color properties etc. So in this way you dont need to choose nested component to change icon just write which icon you want to use on the label area on instance.
Interesting idea. Not sure if it scales well. I will try it out. Can you DM me a Figma file or screenshot or something that I can test? You can DM on Instagram
Are there any drawbacks to creating a single Icon component and have all icons as variants, instead of Instance swap?
I find it faster to create and make changes using the Variant method.
Yes.
1. It’s very poor organisation of icons. It becomes hard to find something and maintain them
2. Becomes really hard to maintain when there are too many icons.
3. Sometimes icons themselves have its own variants. For example you might group all arrows (up,down,left,right) as a component set. Same would apply to other types of icons such as chevrons, statuses etc
What i learnt that we have to rename all the icons with a similar name to get inherent the property. As you renamed every icon shape.
In this case if someone is using icon set from other design system, he needs to rename each icon name?
Is there any shortcut to rename in single go😂
There should be a plug-in
Hey, Thank you for the video, also I understood the benefit of creating component then the Instance and then a component with in nested Instance for easier swap. However I tried component with same shape or vector for icon and then instance of all component and still getting the same result without the additional result and it is maintaining the same colour size and scaling well as well. so I had a question is it like important to create 1. component then Instance and then an atom icon or it works the same with Instance because it worked for me and I even used the Instance and created a component and then an Instance of that component and did the icon swap and it worked as well.
Super confused 😝. Maybe you can send me a Figma file on IG?
So if you’re creating a button and a list item and a title with an icon, then you need to make sure that this icon can be replaced with any other icon.
So instead of adding a instance swap property for each of the icons in the 3 components manually, you can create a master icon component and add the instance swap property there.
You don’t have to manually create an instance swap each time you make a new component. If you use the icon component itself (which has the instance swap), you will save time.
Another mind-blowing video by an underrated designer
I like the design of the master component background grid - how was this achieved?
Just an image I made by putting equally spacing out small dots.
@@DesignPilot it is aesthetically pleasing to the eye, any chance you would release it for others to use?
Hi, great video, i learned a lot, like in every other video you make ! Great content and explenations. But I noticed something with the component icon, while you don't have to apply the swap instance on every instance which is great, you can't scale the instances of the icon for some reasons...
Make sure to set the constraints to scale
It is, when I scale the original component it works like a charm, but when it is an instance of it, it doesn't work@@DesignPilot
@user-tz7cz6un1n It should. Maybe recheck the settings and try again. Or restart Figma
i dont know why i find it confusing , am i dump ;'(?
Yeah, me too
I found your tutorial to be highly detailed and informative, and it covered topics that are not usually found on TH-cam. However, I encountered a problem with your teaching style. You would frequently do certain steps and then undo them, which became quite frustrating for me while following along step-by-step. This also disrupted my learning pace and focus. Despite this, I must acknowledge that your knowledge of product design is top-notch. I believe that if you could address this issue with your teaching style, it would greatly enhance the learning experience. Thank you very much for your tutorial, Chetan.
Hii Chetan, thanks for this just wondering how you created an icon atom using an instance swap that can also be archived by creating a component set, right? I just wanted to confirm this as it's little confusing 😅
😮💨😮💨😵💫😵💫🤯🤯
Sir Explain figma new update varient and prototyping
I’ve got a 5 hour long mini series coming very soon! It’s going to be the best series on Advanced Prototyping you will ever find on TH-cam (hopefully) 🙏
@@DesignPilot sir ji your content is the best content on tha TH-cam platform. I am learning UI design other TH-cam channels but not satisfied. When I learn ui design from design pilot channel content is easy to understand and get more knowledge
@@DesignPilot Would be looking forward to it.🙏
Yo thanks 🫡
Icon atom does not transfer color properties like components?
The icon atom doesn’t have any colors itself. It’s the icon in the icon atom that has the Colors. So as long as the icons have the same layer name, the Color should be transferred.
@@DesignPilot ohh my bad, I have not nested properties. Now working fine.