Hi Ridd, it would be nice to have a step by step video on create these components, subcomponents, and variants. I am still having a hard time working through the prompt on the course.
Hi Ridd, It was an informative video. If possible, Could you please make a video on how you created all the base components which were shown in the video. Thanks in advance
This is very helpful, I knew this "process" by naming these "base components" as "Masters", but I've always had this question, is it a good practice to have hidden layers in your .base/master components? If you are duplicating that instance many many times, all of those instances will contain hidden layers. I do that because sometimes it gives me the flexibility to override the instance without creating a new variant, but I'm suspecting that's the reason my files filling up so quickly (I often get this yellow banner at the top saying that I already used 2GB of max file size) and navigating the files can be a tedious task :c
Ya ideally instead of hiding layers you can create subcomponents. So let's say you have a slightly different combination of icons/images for a disabled state... Instead of hiding all of them. You could create a "CardImagery" (needs a better title lol) subcomponent that is nested in your .base. Then you could toggle between what you need at the subcomponent level using the variants menu which is a bit more straightforward and less bloated than hiding a bunch of layers. Hope that makes sense!
Hey, thank you for this video and the other videos. Plan is to get into the course, in the meantime. Figma now allows you to change the text when the main component is within the variant set. However, when you adjust that main component the variants don't readjust in size or if you change the color the variants don't follow. But if you make your main component outside of the variant set, when you adjust the size/color all the variants copy. I am guessing, it's still worth having the base component outside of the variant set? Thank you in advance.
Super helpful video (and community file) one question, how do devs like working with this approach? Do they see a whole bunch of hidden layers and question everything?
Admittedly this file is going on ~6 months now :) I rarely use hidden layers now. Instead, I create subcomponents with variants to be able to switch between sub-states. That definitely helps dev collaboration. In fact, in Figma Academy one of the prompts is to take this hidden layer example and turn it into a subcomponent variant set.
But base components are no longer required with the current update, can you please make a video on how to set up the components file with this new update...
soooo what if you have made a component and you want to now create a base component and attach that component to the base component b/c you just learned about base components and you don't want to go back and replace them everywhere
The "Building scalable variants" in the Design System module is kind of a more polished version of this video :) But this specific file is available in the Figma community! www.figma.com/community/file/946766673072149394/Mighty-Fine-Variants
Hi Ridd, it would be nice to have a step by step video on create these components, subcomponents, and variants. I am still having a hard time working through the prompt on the course.
Hi Ridd, It was an informative video. If possible, Could you please make a video on how you created all the base components which were shown in the video. Thanks in advance
Thank you, Ridd! Your content is really helpful and useful.
Glad to hear it!
Hey Ridd and how can I proceed if I want to delete a .base components without losing the overrides on the instances on icons and texts?
awesome tutorial, thanks
This is very helpful, I knew this "process" by naming these "base components" as "Masters", but I've always had this question, is it a good practice to have hidden layers in your .base/master components? If you are duplicating that instance many many times, all of those instances will contain hidden layers. I do that because sometimes it gives me the flexibility to override the instance without creating a new variant, but I'm suspecting that's the reason my files filling up so quickly (I often get this yellow banner at the top saying that I already used 2GB of max file size) and navigating the files can be a tedious task :c
Ya ideally instead of hiding layers you can create subcomponents.
So let's say you have a slightly different combination of icons/images for a disabled state... Instead of hiding all of them. You could create a "CardImagery" (needs a better title lol) subcomponent that is nested in your .base.
Then you could toggle between what you need at the subcomponent level using the variants menu which is a bit more straightforward and less bloated than hiding a bunch of layers.
Hope that makes sense!
@@ridd ohhhh, this is interesting! 🤯 Thank you!
Your content is very usefull, thantk you!
Glad it's helpful!
Hey, thank you for this video and the other videos. Plan is to get into the course, in the meantime. Figma now allows you to change the text when the main component is within the variant set. However, when you adjust that main component the variants don't readjust in size or if you change the color the variants don't follow. But if you make your main component outside of the variant set, when you adjust the size/color all the variants copy. I am guessing, it's still worth having the base component outside of the variant set?
Thank you in advance.
Working on an update about this now :)
Super helpful video (and community file) one question, how do devs like working with this approach? Do they see a whole bunch of hidden layers and question everything?
Admittedly this file is going on ~6 months now :) I rarely use hidden layers now. Instead, I create subcomponents with variants to be able to switch between sub-states. That definitely helps dev collaboration. In fact, in Figma Academy one of the prompts is to take this hidden layer example and turn it into a subcomponent variant set.
But base components are no longer required with the current update, can you please make a video on how to set up the components file with this new update...
Yup! Check out some of the newer videos on component properties :)
soooo what if you have made a component and you want to now create a base component and attach that component to the base component b/c you just learned about base components and you don't want to go back and replace them everywhere
You could get really hacky with the Master plugin. But honestly... in a post component properties world, it's probably not worth it now :)
Hey, is this a part of the Figma Academy on Figma? Can I access these files over there?
The "Building scalable variants" in the Design System module is kind of a more polished version of this video :)
But this specific file is available in the Figma community! www.figma.com/community/file/946766673072149394/Mighty-Fine-Variants
@@ridd Thank you very much!