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.
So what would you scale with this scale if not width/height? Only stroke thickness?
@Gleb No it will affect everything, just like current the scale tool, but I want it to behave like a true scale property. The current scale tool just adjusts the actual values to match that scale value you drag it to. My idea is actual scale property I can control., but doesn’t affect the layout.
In actual dev, scale doesn’t actually physically change the computed width and height of an element; you’re just changing it visually.
I know it might be a little more tricky, Tech/UX-wise, but I think this way could work. Here is a simple example of what I’m envisioning:
So it basically works like Scale tool but for inner contents of the frame? Why not use Scale tool then? And why can this be useful in Figma?
No it’s It’s different. Also I can’t control the percentage of the scale. I have to rely on the property width and calculate it myself, which is frustrating. The current scale tool is just a glorified resizing tool
What if you could control the percentage of scale tool? (Actually a plugin called skale already allows you to do that.) Will that solve your problem?
No not really, because it will still change the actual dimensions of the element, which will potentially affect the rest of the layout behavior, especially if it’s in an autolayout (ex: I have a list of items and want an item to change scale on hover or click).
As a workaround you can simply put your list item in a frame and scale it, leaving the frame the same size, like you showed above.
I’m aware, but this is a feature request so I don’t have to rely on countless workarounds that add more unnecessary complexity. Thanks though.
Hello beautiful people.
Basically I have a component instance which I resized inside another component. When I try to swap the nested component, Figma doesn’t keep the scaling and brings it back to 100% of its size. This happens only with nested components.
Is this a bug? Any idea of how to fix this?
I think this is a limitation, but people have already started posting about it on several slack channels and here too.
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%
Facing the same issue here. Outlining is not a viable option for me. Only work around I have found is detaching. When detaching the component, the correct scale is applied to the nested component.
I have seen the same issue on some of Figma playground.
Check that one about variant. The variant menu for mobile/desktop is buggy. Drag an instance of the menu and the highlight is offset.
