Scale as a property

I know what @Aalok_Trivedi is saying. It’s the ability to abstract the idea of scale from components/objects so that you can scale them in a non-destructive manner. This means relationships can be built between different components. For example, a header could be an instance of a text component and set at a specific scale. Then an instance of that header could do the same. In theory, it’s possible to do this using the scale tool, but it’s not intuitive to the way that scale is perceived as a characteristic by designers. The question is how would this be achieved through UI that doesn’t add issues or increase unnecessary complexity. I’d like scale as a property not just for frames but for properties as well like border thickness.

3 Likes

@Gavin Yes, exactly. I honestly don’t think it would complicate things, but I’m sure there would be a few wrinkles to think about. I was envisioning a literal scale input that would scale everything inside the frame (stroke, corners, text, etc…), exactly how it would work in development. Although they are not a design tools, Principle and Origami have this for prototyping and it works well.

As I’ve said before, the current scale tool isn’t really a true scale tool. It just uses a scale to calculate computed dimensions; which you’ve mentioned is destructive and frustrating to control.

Interestingly there is already a concept of a scale property underneath the hood, (see Figma Plugin API) but this only exists on instances I believe.

Guess I´m struggeling with the same issue.

1 Like

There are so many plugins called scale, skale oder scale whatever, can you let us know which one it is? <3

This one!

So you can scale at least something in height or width or in percent. but it does not what I want. The idea is that after changing an asset the list entry gets the height of the new entry. actual the old entry pretends the height. so if I switch an entry it the list entry should change to the height the new entry actually has. And I dont want to change it manually as I have a huge bunch of lists where this should happen … but thanks anyways <3

1 Like

yeah this is not something that a plug-in can solve I’m afraid. I noticed that this issue happens only with nested components, so if you find a way to avoid nesting comps the scaling should stay in place.

I’m having this issue as well, I was able to solve it in the case of simple paths like icons, by setting every layer to ‘Scale’. But it doesn’t work with text layers.

It automagically fixes itself as soon as you detach the component or simply select the layer in the main component (if it’s a Local Component), so it’s definitely a bug. :bug:

4 Likes

I was having a similar issue with nested variants. I have:

Component 2 [ Variant 2.A(Variant 1.A), Variant 2.B(Variant 1.A), … ]

where the variants of component 1 are different sizes and scales.

Replacing Variant 1.A within the master component for 2 scaled properly, but not when I replaced it in component 2.

I was able to resolve this by going to Component 1 and adding auto layout to all the variants. This yielded correct scaling in the instances when the variant was switched out. I don’t know if this will work with variants, and I don’t know why the auto layout I had on the components before combining into variants didn’t carry, but it’s worth a shot.

(I found this thread from another one and thought I’d post my solution here as well)

I’ve had some similar issues with swapping variants. I was able to resolve it by adding autolayout to all my variants. I don’t know why autolayout didn’t carry over when I made the components in the first place, but adding it back fixed it.

It’s not quite the same thing as what you’re talking about here, but I figure checking autolayout is worth a shot!

1 Like

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)

8 Likes

@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

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.

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. :man_facepalming:

9 Likes

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

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 :slight_smile: :sweat_smile:

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…

1 Like

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.

3 Likes

This is a huge issue. @anon21722796

1 Like