Skip to main content
Solved

Instance swap not honouring new scaled size

T

Hi Figma Community!

Basically, I have a bunch of one size icons as variants in a component - they all have an auto layout frame applied to them.

I want to use the icons throughout my design, but in different sizes. However, I don’t want to create varying sizes within the main component, as there would be too many icons and it would look messy.

So what I normally do is:

  1. Create another test component using the icon with another element (for example, with a CTA here)
  2. Scale the icon using the scale tool (larger as an example here)
  3. Then instance swap it and it usually adheres to the new scaled size that I give it.

However, recently, this method hasn’t been working and the instance just retains the same size as its original parent varient.

*As a note, the icon starts scaling properly if I detatch the instance. Which ideally I don’t want to be doing, as I may have changes to the test component that I need reflected throughout the file.

Can anyone assist in finding why this is, that would be much appreciated!

image

Best answer by Tommy_Dinh

The Figma team have told me it’s a known issue James, but they haven’t created a solution as of yet.

I think it has something to do with the complex nature of the icons itself (they were made in Illustrator with many separate vector parts), because if I use icons from the Google Materials plugin, instance swap honours to the new scaled size.

View original

Celine_
Figmate
  • Celine_
  • Community Support
  • August 18, 2023

Hi @Tommy_Dinh ,
I see in our backend that you have already filed a ticket to our support team and they have replied you. Feel free to send them a copy of your file so they can try to replicate.

Do not hesitate to share a quick video of the issue so we can better visualize the issue! 🙂

James_Lawrie

what was the outcome to this as I am having the same issues

K
1 person likes this
  • K
    Kenn_Lucas1
T

The Figma team have told me it’s a known issue James, but they haven’t created a solution as of yet.

I think it has something to do with the complex nature of the icons itself (they were made in Illustrator with many separate vector parts), because if I use icons from the Google Materials plugin, instance swap honours to the new scaled size.

Karen_Beal
  • Karen_Beal
  • Active Member
  • November 23, 2023

I am having the same issue. I have made a set of icons – based on the Material Icon set, but renamed and adjusted for my needs. When I use an icon in a component set, for example for a header component that has different sizes for small, medium and large, when swapping the icon in the instance the size of the icon doesn’t change. The content ‘box’/frame’ is the same size but the icon inside reverts to the original icon component size. Not sure I have explained that correctly. The icon ‘vector’ inside reverts to the original component size within a correctly resized component ‘frame’. Not sure what I am doing wrong.

If I use the Material Design icon set directly, it keeps the size but not my colour changes! Also I don’t want so much padding inside my icons for alignment purposes so this isn’t workng for me either!

Karen_Beal
  • Karen_Beal
  • Active Member
  • November 23, 2023

I have fixed it for my purpose, basically the icons were strokes so I had to flatten them, and then make sure the icon itself was set to scale as well as the component frame set to scale. Now it works.

T
Nate_G
2 people like this
  • T
    Tommy_Dinh
  • Nate_G
    Nate_G
T

Awesome Karen, thanks for letting us know!

K

Almost a year later and Figma is still ignoring this.

Simon_Edwards2
1 person likes this
  • Simon_Edwards2
    Simon_Edwards2
Luke34
  • Luke34
  • September 14, 2024

Sept 2024, just encountering this issue too. I have a component, it has three variants inside. I put an instance of the component in my frame, by default it’s on variant 1. Scale (K) up the instance. Set the instance to show variant 2 OR 3, and neither have the new scale of the overall instance. Figma 😡

Luke34
  • Luke34
  • September 14, 2024

I still don’t understand how Figma became the darling of the world. It’s fails in SO MANY situations of baseline prototype/design needs…

Helena13
1 person likes this
  • Helena13
    Helena13
Karen_Beal
  • Karen_Beal
  • Active Member
  • October 16, 2024

I have a component using an icons which has three options as component properties in a library. When I use the icons in a component in my design file, it swaps properly and keeps the component scale in the component, but component instances do not maintain the icon size when I swap the icon. I have it set up correctly but it’s just not working. Very frutrating!

Bruno_Biagioni_Neto

This happens here too, for all components we have to create a frame with auto-layout and zero padding to insert into a slot.

KatUX
  • KatUX
  • New Member
  • May 8, 2025

I was having a similar issue with Icons.
I found that adding a max and min for height and width adding auto layout to the icons. The instance swap will honour the size. 

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings