Enhance Themes UI

When managing a large number of Themes, it’s difficult to navigate and take action on them. Can we add some UI affordances to make this a little easier to search, find, collapse, and expand long volumes of themes?

A bit of context

I manage a fairly complex Design System with several themes inside of it. Some of my themes are foundations related, most of them components specific.

Overall, because of how I use Figma variables now, some components can be linked to more than one collection (which means, more than one theme), because one is about coloring (e.g. button type has colors for three different variants of the button component), another one is about spacing (for example, if there's an icon on the left I change the space accordingly in the button). I added some screenshots to give you an idea of the complexity of my themes (I count 25 atm, but they're growing fast).

The issue

With this kind of view, it can be quite difficult to manage themes, because I am forced to scroll the whole list to find what I'm looking for, without a way of isolating foundations-related theme to components specific.

For example, if you look at the image: "protected", "global", "device", "themes", "mail-typography", "shadows", "email-styles", "typography" are all foundations themes, while the others are more components related. If it was the possibility of grouping the themes, like it happens with tokens sets, it would be really helpful.

Solutions

• Short term solution, just having the possibility to creating dropdowns like it happens in token sets would be great. Maybe just by adding the "/" like in token sets and getting to decide whether or I want to export the "folder" name as part of the theme name

• Long term solution would be creating visual folders or a column navigation of some sort (i made a quick layout to give an idea)

It would make it easier to see what I'm working on and what themes are turned on or off. Also, there would be a more consistent visual between token sets and themes :)