Skip to main content
wgo
Active Member
February 11, 2021

Assets panel should reflect background color of page

  • February 11, 2021
  • 20 replies
  • 5853 views

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.

20 replies

PavelKiselev
May 9, 2022

I would be happy to see the change, my dark mode design assets look like this

Francis_Provencher_Leduc
December 1, 2022

Yes… That would be really helpful if Figma can propose a way to select an Asset tile color. Thuse improving the experience of using a Library by team members.

Oliver15
December 13, 2022


+1

James_McLain1
New Participant
July 28, 2023

I work in dark theme so my components are white. Any time I do a search for components, either on the layer panel or the swap instance, the thumbnails that appear are white on light gray. I’m constantly struggling to see thumbnail. Would love if this got fixed.

Celine_
Figmate
Community Support
August 24, 2023

Hey @James_McLain1 ,
Others in the community have requested something similar! i’ve gone head and merged this with an existing topic to reduce duplicates here.

Feel free to add additional context over there.

v_kosianchuk
New Participant
September 13, 2023

Can someone from Figma actually describe the logic behind this? One time it’s grabbing BG color from frame / section. Other time it’s not. I’ve achieved dark backgrounds before and now I’m having troubles to recreate it.
imageimage

January 19, 2024

I use white icons as a default since we use a dark theme for our app, but because of this, the swap instance dropdown thumbnails are very difficult to see. Is there any way to change the thumbnail background?
(This is similar to a prior request for the review modal that I don’t think was addressed. It seems this could also be addressed by using the background canvas behind the component.)

Figmate
January 22, 2024

Hi Michael79, Thanks for writing in! I found the other community members asking for something similar here. So I merged your post to have all the feedback in one place.

Feel free to vote and add additional comment!
Thanks,

January 22, 2024

I had my symbols/icons grouped into auto layouts by type (without a fill). I changed the fill to #000000 and this fixed my issue. Thanks! Apparently, the canvas color doesn’t seem to matter in this regard though. I wonder why…?

Cristina_Lester
December 18, 2024

Here’s my fix (works even after you close Figma and reopen it):
In the assets panel, right-click on the component with the wrong background (in my case it was showing black instead of white) and go to the component definition.
Then select the component and make sure that the right theme is selected. In my case, I have light and dark theme. Leaving it on auto was causing problems but selecting “light” fixed the thumbnails too! 🎉