Issue – updating component instances with newly set variables vs. overrides

Ask the community
1

Hey there Figma folks!

I recently stumbled upon something that seems to be a bug (or a feature?) when updating library components inside design files.

I have updated the design system library to include variables in places where there were none set previously or where the color styles were used. One of the update included tokenizing the icon set with predefined variables for icon sizes (i.e. Medium = 24px for width and height). Before the update, those same icons had also default size set to 24px but as a custom input, not a variable.

After publishing those changes I got multiple reports from the community within my org that Figma ignored the overrides set previously by designers in their local files and forced the default new instance for all icons to have this Medium variable set for width and height. I understand the reason behind this but it seems to me like a a different behavior than it normally is when you update instances of your components (no matter if these are instances of local components or instances of components coming from external libraries), when as long as the structure of a component’s layers remains the same, the styles and properties that have been changed/overriden in the past remain intact when updating to a newer version of the same component from a given library.

Could anyone share their experience if they had similar issues and how did you solve it? Or maybe it is really a bug that needs fixing?

I’m looking for a solution (either a workaround or else) as this problem basically seems to be a blocker for me to really transition our design system to utilize fully the variables and variable modes across multiple projects and files.

Thanks in advance for your input!

2

Hi there,

Thanks for flagging this. Just to clarify, do you know which specific settings get reverted to default, like text, fill colors, strokes, etc.? I’m trying to figure it out, but I might be misunderstanding something because everything seems to be working fine on my end. If you can share the steps that I should follow, that would be also helpful.

Thanks!
Toku

3

hey there, sorry for a very late reply to this but here are the steps needed to reproduce this issue:

  1. Create a component icon in File X and set its width&height to 24px (custom value)
  2. Publish the File X as library.
  3. Create a new file File Y and insert an instance of the icon component to the file.
  4. In File Y change the icon instance width&height to 16px (custom value).
  5. In library File X create a local variable (type number) of icon-size and set its value to 24px.
  6. Apply the icon-size variable to icon’s width and height.
  7. Publish new version of the File X library.
  8. In the File Y update all icon instances to the latest version of File X library.

After that – is it expected that the icon instance in File Y gets resized to 24px or should it keep the override (done in step 4.) of `16px size?