Search bar in selection list of Variants

15 replies
3759 views

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.

Search bar would be of great help:

Does anyone use Variants like me? How did you solve this navigation (Search) problem? 😊

Share an idea

Show previous replies

Gleb

Power Member

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.

D

David_Knowles

Thanks for the feedback.

What plugin(s) do you suggest to achieve such a result

Wes Byrne

New Member

Figma team, please improve the variants menu. As noted above, names get clipped, long lists are difficult to scan. We need a winder menu and a search bar!

Also, would love to be able to name variants with slashes to get nested menus. For example:

insights / graph
insights / chart
navigation / up arrow
navigation / down arrow
...

For anyone else that ends up here with the same needs, the Variant Sorter plugin is useful for long variant lists. But search would be the real solution here! pr🙏🙏🙏🙏

Emilie_Giraudet

New Member

I need it too! I have more than 100 icons in this dropdown 🙄

@Wes Byrne Thanks a lot for the tip of the sorting plugin. It helps !

Wes Byrne

New Member

Come on figma team. You gotta have the resources to make add a simple search to this menu. So many other menus get search inputs (variables, styles, colors, etc) why not this one?

Please 🙏

Sign up

Login with SSO

Login to the community

Login with SSO