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…
Solved
Scaling icon to fit frame/wrapper with each new instance
Best answer by Nate_G
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.
This topic has been closed for comments
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.
@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 person likes this
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.