Skip to main content

Hi I’m working in a Design System where I’m using an Icon button with what is called a Master icon (so the icon inherit the color from different states or modes). When using this icon button inside another. component is shown distorted, but very randomly I would say. 
 

Here is an example, on the bottom is the base component of a File uploader component and the icon button with the bin looks fine, but when I take these base components into the main components (top one), it looks distorted. 

I assume this is a Figma bug, because sometimes happens, sometimes not and the button is done exactly in the same way as the other button component that shows Label + button.

Is anyone having the same issues?

 

Hey! I’ve run into similar behavior when nesting icon buttons inside larger components—especially when using Master icons that inherit state-based styles. It does seem like a Figma rendering quirk, particularly when the distortion appears inconsistently. In my case, the issue was more noticeable when switching between variants or when auto layout constraints weren’t fully aligned across nested layers.

 

A few things that helped:

- Double-checking that the icon’s constraints and resizing settings match across all instances.

- Flattening or detaching the icon temporarily to test if the distortion persists.

- Ensuring that the parent component doesn’t override inherited styles unexpectedly.

 

It’s definitely worth reporting as a bug if it keeps happening randomly. Meanwhile, I’ve started documenting these edge cases in my design system to avoid surprises during handoff.😊

Thanks for your response! I checked all this things already and now I’m pretty sure this is a rendering problem from Figma. It’s getting worst and worst unfortunately, also the file performance :/

Reply


Terms & ConditionsCookie settings