Skip to main content

Fix Confusing Variables & Library UI

B

The way Variables and Libraries are displayed in the UI are extremely confusing. I just spent a day looking at MUIs design kit to figure out where and how variables and colors and libraries are edited, displayed and linked to one another. I think some changes are necessary.

  1. The terms ‘library’ and ‘variable’ should not be used in multiple panels to describe various objects/functions.

  2. Use the term ‘Library’ to only refer to a set of file components, variables, styles etc that are published to be used in other files. I have no idea why the word ‘libraries’ appears in the left panel and in the selection colors modal.

  3. The colors modal should deal only with color styles. It is very confusing to have a dedicated Variables modal, and also have the option to add a style or variable in the colors panel.

  4. Make the colors modal a default pane or be able to be toggle on to display as a view setting. Users should not have to click on a color selection to access this modal to view their projects color pallet.

5 replies

B
  • bryan14
  • Author
  • 6 replies
  • March 17, 2024

Why is this panel called ‘Libraries’ and not ‘Variables’? Better yet, why is it even in the colors panel? There is already a button for it.

Screenshot 2024-03-16 at 8.34.54 PM

dvaliao
Figmate
  • dvaliao
  • Community Support
  • 4591 replies
  • March 19, 2024

Hey @bryan14, thanks for the feedback!

To clarify this for you, we call this panel Libraries because it is surfacing variables and styles from the enabled libraries that can be applied. We chose to not call it Variables, specifically because a user’s list can also include styles. In the specific panel in your screenshot, you can choose either a variable or style to apply.

B
  • bryan14
  • Author
  • 6 replies
  • March 19, 2024

Yes I understand what the feature does. My feedback is that it is quite poor UI/UX experience.

  1. It is hidden from use, there seems to be no way to activate or access this panel accept to select a component or object.
  2. Multiple Panels named ‘Libraries’ is confusing. This seems to be a functional programing approach opposed to object oriented. I think it would make more sense to have a colors panel and then just display color collections from the imported libraries. There should also be a dedicated libraries panel to show all elements, variables and styles imported to the file. I don’t think the library button should be nested within the assets panel.

I would appreciate leaving this thread open a bit longer as other users might have an opinion on this.

dvaliao
Figmate
  • dvaliao
  • Community Support
  • 4591 replies
  • March 19, 2024

We hear you! Our team acknowledged how valuable this feedback is, because of how our Design Systems team considers what fits under the Library umbrella, as opposed to how our users understand the same concept.

FYI - we were never planning on closing the topic, but we will occasionally mark a reply as the solution to bring Figma’s inital acknowledgement of requests to the top of the thread, just in case anyone else in the community wants to chime in later.

B
  • bryan14
  • Author
  • 6 replies
  • May 1, 2024

Agreed. If I had to guess the design/product team making some of these decisions is very design focused and might benefit from some pragmatic engineer input. Forgive me if I’m incorrect but signs point to the two departments being segregated/disconnected somewhat.

Reply


Terms & ConditionsCookie settings

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