Improve usability of variables popup

Hi there, thanks for your feedback on Variables. We’ll pass it along to our team for consideration. In the meantime, I switched your topic as “Share an idea” so the community (and yourself) can vote up! Thank you.

Wider columns for variable names is an absolute must, the current width is a problem when using most common design token naming conventions as quickly identifying which variable is which when the name is truncated can be difficult.

EDIT: I’d love to see better support for longer token names in the panel where you select variables for an element as well.

Other useful additions would be sorting by name (or value) in the columns, as well as search. I’m managing a large number of variables in a design system, and it’s getting more painful by the day.

It would be really helpful if the pop-up was resizable - right now, the narrow column width makes it difficult to navigate between different modes, and the links often become unreadable. Additionally, remembering which tab was last used between “Custom” and “Library” would save a lot of time, especially when switching between multiple colors and styles.

I also love the idea of dragging color styles from the Local-Styles list directly into the variables pop-up - this would streamline the workflow and make managing styles much more intuitive. Overall, these improvements would significantly enhance usability and make the process of handling complex themes more efficient!

Btw, found an interesting article https://claspo.io/blog/pop-up-design-examples-how-to-adopt-them-in-your-website on how to use pop-ups without hiring a web developer, I think it would be interesting to check as an alternative option.

Has there been an update on this?

Not being able to resize columns in the Variables dialog is a pain to work with. Token names often stretch longer than the supported width.