Variables are incredibly powerful and enjoyable to work with. It’s astonishing how swiftly flexible designs with multiple themes can be created. However, the variables pop-up is challenging to work with. It appears to have been designed in Figma and implemented by the dev-team “as specified.”
Converting a complex theme with tens or hundreds of nested style-colors feels like torture:
The pop-up should be resizable. The narrow column width for multiple modes will make links unreadable.
The color pop-up should remember which tab was changed from “Custom” to “Library.”
It would be excellent if color-styles could be dragged from the Local-Styles list in the inspector into the variables pop-up.
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!