Figma Support Forum

Component variants with semitransparent overlay at hover state

Our engineers want to use Material-UI as the base for our design system. As much as I love how using opacity layers for different states helps keep the palette clean and makes it super flexible to change the underlying color, I’m not sure how to best build components with these layers. I can’t add another background layer to a button with Auto layout.

Should I create new Fill swatches (example: Primary / Hover = Primary color + #000 4%) and add them to my palette, or mess with Inner shadows for the Hover variant, or what? Any recommendations?

In fact, you can place another background layer in the auto layout button using a zero-height frame. I made an example file that has two options: using the above hack and using color styles. Take a look and choose the best way for you.

1 Like

Thanks @tank666. Very cool hack, but I worry about the engineer handoff - when you Inspect that button, you don’t see the #000 4% identified anywhere, just that there’s a 0px tall something inside Auto Layout. It’s fine if the overlay object is right there, and you communicate it for this single button, but if you go deeper into a project and have engineers that are not as savvy, it might cause issues?

Looking at the file from the link above, you see it exactly the same as the developers. Try clicking on any button with an overlay, and then examine the code in the Inspect Panel. Do the same for the button, which is built only through color styles.

You can also show this file to your developers so they can study it and tell you which option is better.

@Christina_Yung, if you have “Can Edit” permission, then click on the overlay while holding CTRL or CMD. If the permission is “Can View” then CTRL/CMD work the other way around. That is, the developer clicks on the “btn” without pressing CTRL / CMD, and thus selects the overlay layer (for example, “overlay/hover” instance).

1 Like