Skip to main content
tcldr
September 1, 2022
Question

Component scaled element not inherited by instances

  • September 1, 2022
  • 13 replies
  • 2911 views

I’m creating some icons with a base resolution of 1024 x 1024.

Each icon design variation is created as its own component at 1024px.

Then, I have some components which contain those icons where those icons are scaled to different sizes depending on the treatment. (60px, 72px, etc.) In order to maintain the icon design at various scales, I use the scaling tool accessed via the ‘k’ key.

From within the main component (non instances) I can then swap the scaled icon for any other icon component and the scaling applied by the ‘k’ tool is maintained.

However, when creating instances of the component, and then attempting to swap the inner icon instance in exactly the same way as I do within the parent instance, scaling is NOT maintained.

I’ve attached a video which demonstrates the issue:
https://imgur.com/F2wLXJd

In the video, I’ve created two example icons. The first icon contains a series of grey capsules which should be scaled. The second icon is exactly the same but with yellow capsules.

The icon-01 component has been placed within a new component and scaled to 60px with the ‘k’ scaling tool. As you can see in the video, when the inner icon instance is swapped within the parent instance, the scaling is maintained and the capsules are correctly scaled. This is the expected behaviour.

But, when performing the same operation from a child instance, the scaling is lost and the capsules are rendered much larger than expected.

Is this a Figma bug or is there a way to do this?

I’ve heard workarounds of using the ‘scale’ constraints all the way down, but 1) it hasn’t worked for me, and 2) it shouldn’t be necessary as the top-level scaling should cascade down (as it does within the parent component).

This topic has been closed for replies.

13 replies

claud_gp
New Member
May 2, 2024

Thanks so much for responding and creating a demo file Gleb!

Thanks for suggesting the fixed aspect ratio hack. I’ve had a look into it and it seems so far that it mainly works for keeping the aspect ratio for “Cover images” - ie. a frame that has an image fill. I’ve asked on the Ratios page if anyone know if this would also work for in my case where I’m using vectors.

So that leaves me with going for a fixed width + height for all logos. This is a bit of an awkward solution because in my case, if my team puts logos side by side, it will look too spaced out. Is there a way to adjust it in this case? Thanks again!

Gleb
Power Member
May 2, 2024

The only solution is fixed aspect ratio. I don’t know about the plugin but the hack itself should work for all kinds of layers. Check the files I shared. Do some searching yourself to see if you can find more examples or plugins.

Luke34
September 14, 2024

Sept 2024, variants inside an instance (component) still not retaining the overall parent instance scale when switching variant. Common sense. 😡