Constrain proportions when changing width/height variable of a component (icon)

Share an idea
1

It would be really nice if the constrain proportions button would also work when changing the width/height of a component such as an icon.

Example:

  • Lets say I have a set of SVG icons made as components. Each icon as its own component. * Icons are all the same height but different widths.
  • I created a variable called “icon-height” and set it to some value
  • I placed the icon/component and assigned width to the variable “icon-height”
  • Now when I change the variable value only the height is changed and the width stays the same. Even though the mark to constrain proportions is turned on.
  • Also when swapping the icon to some other icon (that has a different width than the previous one, the proportions should be fixed so that the icon is not squeezed/stretched.

Am I missing something?

4 Likes
2

I’m having the same issue when setting a logo height to a variable. ‘Constrain proportions’ doesn’t work when I change the variable mode on a component instance > the height updates as expected but ‘constrain proportions’ doesn’t, the width remains the same

3

Yes, it is annoying and makes use of width/height variables kind of useless on components …

1 Like
4

I consider this as a crucial change. I also encountered this problem, when I first set up variables for my icons and I found it quite annoying. It really makes the variables for this use case unnecessary.

5

I see this issue whether the icon is a component or not. I have constrain proportions on, then I select either the height or width (it doesn’t matter which) and select a variable. It only changes the one dimension instead of scaling it proportionally.

1 Like
6

Yes, it doesn’t matter if its a component or not. This is quite annoying. I hope that the Figma team will fix this soon.

7

Yeah, I’m having the same issue–which is really important for logos. I considered setting variables for both height and width, but it won’t work when switching to a different logo, because the proportions are different; so each logo would have to have its own height and width variables (which defeats the point of using variables).

8

Having the same issue. I work with Design System and have a Icon Wrapper, once I applied the variables in the width/height the Scale constraints stopped working so we have to apply width/height size manually.

9

Still an issue. Anybody have any ideas for workarounds?

10

Hi all,

Thank you for providing feedback! I will share this with our internal team. Your input is highly valued, and we will take it into consideration for future enhancements.

Thanks,
Toku

1 Like
12

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.