Figma Support Forum

Option for excluding background in instances

When creating themed components, in order to see the contents of said component, I need to have a background color that contrasts the canvas background color. Having this background also helps me grasp which components are using which theme quickly.

The problem is when I use a smaller themeable component inside a larger component of the same theme, I have to remove the background as an override.

This isn’t hard, just tedious when you have multiple nested items and numerous themes.

Alternatively, if I could group variants and apply a background color to the group (that doesn’t get applied to instances), that would satisfy the need.

Hey Guy, so if you apply background to a Variants Frame that background doesn’t show up when you use an instance of said variant.

Now, with simple components, you can wrap the component in a Frame and that frame has a background that also doesn’t show up when you use an instance of said component.

Right! I’ve tried this approach with a medium gray background color, but dependent on the theme, it can either disappear or be difficult to discern the content/theme of each variant.

At one point, I even applied a gradient to the variant container that was 50% white and 50% black. This actually works REALLY well to help minimize frames within frames and conversely multi-click hell!

However, similar to using just a frame to group objects and apply a background…I found myself wishing I could see the size of the components parent frame. Applying the outline frames option wasn’t a bullet proof option either.

So now, I group my themes within the same variant to consolidate similar components. I totally get this is a preference thing, but I’ve found it makes toggling a bit easier for testing purposes.

Not sure if this helps but in my team we use 2 plugins for speeding up theming and not having to worry about these details:

  1. Tom Lowry’s Themer
  2. Figma - Variant Switcher | The Variant Switcher plugin recursively changes component instances to a different variant based ...

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.