Scale as a property

Yes! This is why we need scale as an actual property control. the current Scale tool isn’t actually a true scale. Scale as a property

@Gleb this is a perfect use-case for it.

Yeah, I use a plug-in called “scale”. It’s so basic I wonder why it’s not a native feature.

+1. We want this. IMO feels like a buggy implementation of “scaling”

I’m hoping I can find a resolution to this as I’ve been confused about the product behaviour since variants launched last year.

Essentially, I have icon library for which each are defined as a component. They follow a standard naming scheme (starting with icon/) so that icon instance can easily be swapped using the Swap Instance menu option. They also follow a standard sizing of 24x24 px.

In a common pattern, I then need to create a standardised Button component. I create this component and add an icon instance inside the Button component. Then, to extend this library, I create a new variant of the Button component which is the “small” variant. For this I need to make everything smaller including the icon, so I use the scale tool to reduce the icon instance to 12x12 (which also decreases the line weight). This scaling behaviour is commonly done by browsers when resizing SVGs.

When I create an instance of either the “normal” or “small” button, everything seems fine. However as soon as I want to swap the icon instance in the “small” button instance, the scaling of the icon that is swapped in doesn’t match. It is correctly sized at 12x12 however the line weight is not scaled down as expected.

I have created a step by step reproduction of the issue in this public Figma file, and I include a brief screenshot of the Figma file below for reference.

If anyone can help me with this highly confusing behaviour I’ll be eternally grateful. I simply don’t understand how people can work with icon libraries and the variants feature when scaling of icons isn’t managed consistently by Figma components.

From personal experience, the solution to this problem (not just for Figma), is to outline strokes of icons when they’re part of a library and delivered as an asset (SVG).

It’s good to keep a separate file of the original icons with stroke paths so you have a “source” that can be edited and worked on, but once the icons are ready to be added to a Figma library or exported as SVGs, all strokes should be conveted to outlines. This makes changing the fill color easier not only in Figma but with CSS (for SVGs). And on top of that, you avoid the problem you’re dealing with altogether since you’re only dealing with shapes and fills.

Thanks for your response! This seems a little strange to me - I’ve inherited this from previous designers who already had the icons in a separate Figma file as a library. Perhaps I should go investigate that source a little bit more.

I also found this on the forum: (Issue) Keep the scaling of a nested component when swapping it

It seems that the issue of nested instances not retaining their scale is an issue that doesn’t just affect things like icons.

100%

Scale in and scale out animation preset

It would also be nice if we have 2 preset options of scaling in and out from the center added to the presets. It would save me a lot of time animating overlays 😄

Thank you

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.