Skip to main content

Improve usability of variables popup


FF-Design

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.

Celine_
Figmate
  • Community Support
  • October 27, 2023

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.


Max73
  • February 15, 2024

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.


Max73
  • June 19, 2024

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.


Sanket_Chaudhari

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.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings