Skip to main content
K16E_Inc
K16E_Inc
October 5, 2023
Solved

Scaling icon to fit frame/wrapper with each new instance

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…

    This topic has been closed for replies.
    Nate_G
    Nate_GSolution
    Power Member
    October 5, 2023

    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.

    Nate G
    View in thread

    4 replies

    Nate_G
    Nate_GSolution
    Power Member
    October 5, 2023

    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.

    Nate G
    K16E_Inc
    K16E_IncAuthor
    October 7, 2023

    That works. Thanks

      Nate_G
      Nate_G
      Power Member
      October 7, 2023

      @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.

      → View example file

      Nate G
      K16E_Inc
      K16E_IncAuthor
      October 7, 2023

      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.

        Terms & ConditionsAccessibility statement