How do you persist the scale dimension of say an icon within a component when changing to a new instance. I find this quite problematic with Figma, where say I have a 24px icon inside a comp, and then I scale the icon or its wrapper by say 2x. Then when I reuse the component and replace the icon instance, it reverts to its original dimension, not respecting/retaining what is defined/constrained by the component. Specifically, the size (height and width) fits the dimension as scaled, but the stroke with doesn’t adjust accordingly so you have deviation from the desired look or I have to manually adjust each new icon stroke with, quite laborious, unnecessary…
There are several ways you can go about this.
An approach I’ve used:
I set all the icon art constraints to “scale”. This will make it so that as I scale up an icon instance it will scale accordingly.
If I want to make my icon’s stroke thickness scale up or down I could do the following
- Outline the strokes
- Or set the icon stroke thickness for each icon within my button variants (sm, md, large).
→ Here is an example file on how I’ve set up scaling icons + using color modes to change the button colors.
I’m hoping Figma will add variables for stoke thickness, then one could just use modes to scale the stokes.
That works. Thanks
1 Like
@K16E_Inc If you don’t want to outline the strokes, I added another option to the below file where you would set the stroke thickness for each icon within the different button variants, then as you swap the icons it will maintain the corresponding stroke thicknesses.
Thanks, @Nate_G. These are hacks for now, I suppose. It’d be nice if it shipped with Figma as default - the system should learn the stroke width as it does the size (really the “scaled dimension”) of the original icon and then adjust any duplicates/instances accordingly. That’s be nifty.
1 Like