Skip to main content
Aalok_Trivedi
February 9, 2021

Scale as a property

  • February 9, 2021
  • 96 replies
  • 7363 views

Scale is one of my most used properties when designing interactions and states. It would be great if we had true ‘scale’ as a property.

No, I’m not talking about the scale tool. That’s fake scale that affects the width/height of elements.

I want the ability to enter something like ‘1.5’ and change the scale of an element, respectively.

96 replies

Joris_Hoogendoorn
May 4, 2021

Same issue here, we (the entire design team) use a lot of components containing illustrations/icons from a separate library. With this ‘bug/issue’ we are forced to flatten all shapes (rounded corners), text, and outline all the strokes. Which is not really ideal if we want to edit the illustrations (or icons) later.

@Figma Can you please fix this?

How it should work;
If a nested component is scaled (not resized) in its parent component, the scale should be preserved when swapping the nested component. (including scale of rounded corners, line-weight and text size)

Aalok_Trivedi
May 4, 2021

@Joris_Hoogendoorn Unfortunately it’s not a bug because their ‘scale’ tool isn’t really a scale tool. It’s not a scale property. It’s a normal resize tool that just uses ‘scale’ and a measurement key. I have a feature request for having scale as a property. This would solve all of thissss. I’d appreciate a vote! Scale as a property

Joris_Hoogendoorn
May 4, 2021

You can switch between ‘scale’ and ‘resize’ with K key on your keyboard, right? So, it should be a real ‘scale’ tool, then… I guess.

Kei
May 10, 2021

The fact that scale (also stroke weight/thickness) is not preserved when swapping instances is a real pain… Every time when you want to change an icon, you would have to reconfigure the stroke property and tweak it one by one. 🤦‍♂️

Mike_Johansen
August 13, 2021

I think I’m having a similar instance building out a Material Design List Component. I’ve built out 1, 2 and 3 line List Rows which due to their content have different heights. I am wanting to nest them inside of a parent component called List State so that I can have interactive component linkage for hover, selected and dragged states without quadrupling my already huge (288 variants) List Rows variant.

Inside of the variant container for List State, when I swap the instance of List Row, the parent (List State) changes height to accommodate the larger or smaller nested List Row.
Instance resizes

The problem is when I use an instance of List State and swap the nested List Row, it no longer changes height thus making the component useless.
Instance doesn't resize

Mike_Johansen
August 14, 2021

Just fixed it… Had to set both List State and List Row to Hug Contents inside of the List State Variant. Could’ve sworn I already had tried that 🙂 😅

Sara_Golpagon
September 28, 2021

I’m having this issue with buttons that include icons. I’ve made three different, and every time I want to swap an icon for the small button the icon doesn’t scale…

K4mij33
October 20, 2021

I think I understand what @Aalok_Trivedi wants.
I have the same need.
And as a picture is better than a long speech, here is my need.

@Gleb, maybe you have a solution.

StLa
November 26, 2021

This is a huge issue. @anon21722796

John_Cummin
January 3, 2022

Or any transform property. Yes please! 🙏