How to change text without breaking style sync?

Ask the community
1

How do you handle this workflow in Penpot?

I created a component, made a few instances, and customized the text for each one. Later on, I went back to the main component to update the font size, but the instances didn’t inherit the change.

By default, overriding the text string seems to completely break sync with the main component. Is there any way to update text content while preserving the other text attributes (like font size)?

2

You’re running into two things at once.

  1. Editing the text in a copy can mark its style as overridden too. Penpot keeps a copy whose only change is the text in sync with style changes of the main. But if the copy’s style counts as changed as well, it keeps its own font size. That is what your video shows.
  2. Even when the new size reaches a copy, its text box isn’t re-measured. I reproduced this with the WebGL renderer. After the main goes from 32 to 11 px, the copies get 11 px, but their auto-width text boxes keep the old 32 px size. So in a flex layout the text no longer sits in the middle, even after a reload.

Workarounds:

  • Set the font size through a typography (Assets → Typographies) or a font-size token instead of by hand. Changing the typography or token updates every text that uses it, copies included.
  • If copies still look off-centre, select their text layers and switch the text sizing to Fixed and back to Auto width. They re-measure and centre again.

This fits the open epic on copies falling behind their main component: Improve how components and their copies stay in sync in the workspace and across libraries · Issue #12294 · penpot/penpot · GitHub

2 Likes
3

Thanks!! I didn’t know there was already a GitHub issue for this, so I’ve followed it.

However, I noticed some differences today! I ran a few more tests using the same file and the same component, but the results seem to vary.

I also tested it with WebGL rendering disabled, and the text became resizable again.