Force component instance to update font style?

Ask the community
1

I’ve built a component, added a bunch of instances of said component to my layout, and now decided to change one of the font styles in the component.

So I go back to the main component, make the change and…nothing. I can’t get all the instances of the component to reflect the change.

I also tried changing font size. Same thing. No changes to the instances of the component.

Tried color. That works! I can change the color! But not anything else. Is there a way to force these font size/style to change throughout the instances?

2

Probably you already changed the style of text in instances, so they don’t accept the main component changes anymore. Try to reset it

444×187 14 KB

3

Thanks, but I don’t have that option. Probably because I didn’t change the text style in the instance?

I went ahead and did change to text style in the instance to see if that option would show up but…nope. Still not there. Weird. Any reason I wouldn’t see that option? (I’m using 124.5.5)

1 Like
4

So, as a test, I made another quick component in the same file and then added a bunch of instances to the page.

With that one, I can select the parent component, go into the font selector, and as I change the font style I see all of the instances changes–as they should.

So then I went back into the component that I’m having issues with, selected the text, and as I toggle through all the font styles, I do see the changing live in the instances but once I pick a style and click out of the component, all the instances snap back to the older text style.

This feels a lot like a bug. And not sure how to get around this. Short of completely rebuilding everything in a new file.

5

So I realize that I can reset all changes and all properties on an instance. That resets everything and in doing so, DOES pick up the new styles.

But that, of course, completely destroys all the content changes I added into every instance of the component.

I’m now thinking component instance behavior wasn’t fully through through by the Figma team.

It looks like that if you change the text property of an instance, Figma assume that text is now completely detached, even though the component is not. This is illogical, as the entire point of having a component is to be able to keep it attached to it’s parent component.

Why am I even allowed to change the font style in an instance of a component to begin with? This should not be a thing. If I create a component that uses 12px italic, I don’t want people to be able to change that.

So, not sure this is a bug as much as it is just really poorly designed logic. I think this is what happens:

  1. Create component with a particular text style. Make the text a property that can be changed.
  2. Drag an instance of a component onto the page. Change the text property.
  3. At this point, Figma now detaches that text* from any further updates in the component. It will no longer inherit any font style changes made at the parent component.

Do I have that right? Is this a bug? Bad design? Any workarounds to this? This makes the whole idea of using text-heavy components a nightmare.

* = except for font-size. For some reason, font size will update throughout all the instances, but not font family/style. This makes less and less sense the more I poke at it.

6

On a whim I made another component to test my above theory and…that works.

So…I dunno. I’m pretty sure that this is a bug and that for some reason, something in my more complicated component just breaks this functionality.

What works in the new component I made:

  • Create component
  • Set text property
  • Drag instance of component onto canvas
  • Change font style/size/etc in parent component
  • As you’re changing style in the parent component you see the changes reflected live in the instances.
  • Click out of the parent component and change are applied to the parent component and all instances.

What is happening in all the rest of the components on the page that I previously made:

  • Create component
  • Set text property
  • Drag instance of component onto canvas
  • Change font style/size/etc in parent component
  • As you’re changing style in the parent component you see the changes reflected live in the instances.
  • Click out of the parent component and change are applied to the parent component but not all of the instances.

At this point, it looks I need to rebuild my document from scratch. Frustrating. Will report after rebuilding everything.

7

I’m having the same issue as you! which is super frustrating, because I just spent hours adding variables to the typography. and it doesn’t show up in the components used in other files :sob: