I am actively using Variants, but there is not enough search in the Variants selection list in component. In my Design System I decided to design one basic component: 1 button, 1 input field, 1 icon … etc. I implement the rest of the variations and states in Variants. I’ve in my base 16px Icon component 34 Variants of icons, in base 24px Icon as many.
I have many variance with fairly long names and hence, the variants menu is extremely long. Just like the fonts menu. I would like to be able to search/filter this list, possibly through a search field at the top of the menu. Furthermore, since the variants names are very long, I would like to see the variants menu, as well as the fonts menu widened to accommodate all the text, without using ellipses.
Have a look at the screenshot here, you’ll see multiple variance that seemingly have the same name. However, the end portion of the name differs from the front portion but the end portion is hidden away as the menu is so narrow:
Hello, I created a Variant for the icon family that I use to design. Using variants makes it much easier to create prototypes for icons, but when I am using them in design it is too hard to find the specific icon because I can not search icons by name or at least preview them if they are created as Variants.
The family of icons that I use (it takes too much time to find the icon I want to use ):
This feature suggestion is still valid and useful, so I’m keeping it open, but I’m gonna mark this answer as a solution for visibility — so many people make this big mistake. More info:
Using variants is the only way —at the moment— to access icons and photos programmatically. I use variables that reference strings that correspond with image and Icon variants in a product catalogue.
This makes sense when used in combination with the variables, although that’s a bit hacky, there are no other methods other than using plugins for filling the content.