Figma Support Forum

Assets panel should reflect background color of page

Scenario:
I normally keep all my components on a separate page and I like to NOT organize them into frames but use a plugin to group and sort them by name.

Problem:
However, when designing for a dark UI it’s very frustrating to use the assets panel as most components are close to invisible. Often a component itself has no background color so the bright foreground elements are displayed on a light grey rectalngle in the assets panel.

Solution:
Instead of this light grey background, the assets panel should use the background color of the page a master component is located.

When designing for a dark UI it’s not uncommon to also set the background color to a darker grey to make it easier on the eye. So this solution would also work if you do not keep your components in one single page but across the entire document. And if one likes to organize them in frames, then the frame’s color could still kick in.

2 Likes

Im not sure what the method is for selecting the background color for assets, some of mine have black while others have none, frustrating.

+100

We have the same problem. Sometimes it’s clunky and adds unnecessary hierarchy to put a bunch of white components inside frame, for the sole purpose of changing their assets panel background color.

(Our icon library has more than 400 icons organized in pages, definitely don’t want to add an extra layer of hierarchy inside each page).

If the assets panel can “read” the color of their container frame, it should be technically easy to also read the canvas color when they’re placed directly on the canvas.

1 Like

Ok, my little hack here:

  1. Open the web-inspector (Mac: alt-cmd-I, PC: don’t know). It even works in the desktop app!
  2. Select the background element in the assets panel (Mac: Shift-cmd-C)
  3. In the CSS definitions find the following class: .library_item_tile--thumbWrapper--UOgvP (the last 5 letters seem random and may vary)
  4. Change the background-color to your likings.
  5. Et Voilá! (close web-inspector with same key command)

Of course, this only lasts until you close the file but it’s better than nothing, for me at least… :sunglasses:

If you find this useful, spread the word.

1 Like

You should be able to add a frame with a background to contain the components, then refresh the page (or simply draw a frame anywhere then delete), then you should be able to see the background color reflected in the assets panel. If the components are in variants group frame, you will need to add background to that as well.

My problem is it is not working when adding image background (e.g. add watermark).

Yes, thank you for your help. I know the solution with putting everything into a frame, but I like to organize my components page with a plugin so this won’t be an option for me. The other tip (“or simply draw a frame anywhere then delete”) sounded interesting but didn’t work – or what exactly did you mean by that?

The other tip “or simply draw a frame anywhere then delete” is not another solution but an alternative way to make the background show up in the components, instead of refresh the page.