Issue with scaling a nested icon with variable as dimension

Question

I have sort of a quirky issue with icons:

I have a set of icons that are linked to my UI kit
icons are placed in, e.g. icon button and applied variable for it’s height (it’s locked aspect ratio but we found out applying the variable to height is more reliable than width)
we have 3 density modes: regular, compact, and ultra compact
icon button nested in another component is causing the icon within to loose the 1:1 ratio when compact or ultra compact mode applied

The issue disappears when component gets detached 😓 (The search icon in the screenshot below is nested even deeper what only proves the issue is with this components being nested.)

jackowy · Accepted Answer

The issue has been resolved thanks to Figma Support. Here’s the fix:Disable Lock aspect ratioApply the desired icon variable to both the W and H dimensionsAdd instances of this new icon button to components (I actually had to redo all of the nested icon buttons by resetting overrides and applying them again).

ElenaTritean · Answer

I made the components for the icons in the following manner:
The outer frames of the Icons have autolayout 24px width and length, and the vector inside has 22px the biggest length or width. The vector has ignore autolayout on, with scale and center on, the width and height have a locked aspect ratio.

When resizing them in a component, like for example a button, they were scaling perfectly fine for at least 4 months, but now the outer frame scales well, while the vector is still 24px. When I click it sometimes, it goes back to how it needs to be scaled.

Did anyone encounter this issue recently?

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded