I’m a long-time Figma user who’s recently been exploring Penpot, especially after the 2.6 release that introduced the Token system. I have to say, the token feature has really caught my interest — it’s a solid step forward and aligns well with how I like to structure design systems.
That said, I’m running into some confusion around how components behave in Penpot, particularly when it comes to instances and overrides.
Here’s a scenario I tested:
I created a basic button component with a left icon, centered label text, and a right icon.
I then created an instance of this button component.
On the instance, I changed the label text to something more app-specific — as expected.
Later, I went back to the main (master) component and made some changes — such as adjusting the font size, width, and even resizing the icons.
Here’s the issue: those changes are not reflected in the instance. It seems like once I make any change on an instance (like editing the label), it detaches or breaks the link with future updates to the master component — or at least, that’s how it appears.
So now I’m wondering:
Am I misunderstanding how component instances are meant to work in Penpot?
Is this the expected behavior?
Is there a better or more “Penpot-native” way to structure components so they remain flexible yet centrally manageable?
How are others managing overrides vs. keeping components in sync?
Any insights or best practices from the community would be super helpful. I’m genuinely excited about Penpot and want to better align with how it’s intended to be used — especially coming from a Figma-heavy background.
I just tried replicating this issue but it works fine on my side.
Here’s a video I did to show you how I proceed in case that helps:
Component test - Penpot Watch Video
It also works when adding an icon for example, and changing its size or color.
Maybe what happened in your case is that you played with the different properties of the child component and forgot, and when you came back later you noticed nothing was updating? Or maybe there’s something else going on, but that’s what I can think of now.
Hi!
Same here, everything is working as expected (Here’s a short about it). Maybe if you could upload a short video of the process you followed it might help to understand where the problem lies.
Hi everyone and have a nice day!
As discussed here, the problem arises when we change the text (color or font) of the instance; then any changes made to the text of the master component are not reflected in the instances, all other parameters (padding, fill-color etc..) seem to work correctly instead. As for the font color, using tokens solves the problem, any other changes to the text (font-size, font-weight etc..) remain indeed problematic.
I’ve been consistently using Penpot and have found a few workarounds. If I were to create styles for typography, then I could have the text behave consistently across all instances of components. However, keep in mind that I don’t prefer using styles immediately while designing, and only save them later. The issue doesn’t seem to be the lack of typography tokens.
I think the way Penpot developers are conceptualizing components and their instances isn’t entirely aligned with our use case. This is evident when I change the icon sizes on the master component of a button; the instance that had its text modified stops inheriting those traits from the master component. It’s worth noting that the icons used on the button themselves are instances of a component as well.
Hey, I just saw your message. I have uploaded a video below showing the issue I am facing. I have clearly outlined the problem I’m encountering. Feel free to take a look when you have some free time and let me know what I might be doing wrong.
Hi! I saw the video you uploaded. Here I tried to recreate the situation and it seems that with tokens it can be managed well. The font problem remains, as mentioned above, but I imagine that the fantastic team of Penpot is working on it!
Hello, I watched your video, and thank you for it.
However, I would like you to try having a different icon size for the button compared to your original icon component. The reason behind this is that I would use different icon sizes based on different button sizes. I would love to see how that is done.
Additionally, the part where you switch the icon, and the icon size and color remain the same as in the previously selected button is great. However, often I am using buttons with variable colors. For example, I may have a brand button with a darker fill, so the icon and text will be white, whereas other times, when I have a grey icon for disabled, the icon and text color could be a darker grey.(Please, do not confuse this with theme.) In such cases, this component’s properties fail.
I am getting used to a few properties and functionalities, but I find it really offsetting.
The best management that comes to my mind is to create a component for each state of the button (hover, disabled etc..) and use different tokens for each characteristic of each component (bg color, font color, icon size/color…). With tokens you can also use variables and mathematical calculations. But I suggest you look at the resources that the Penpot team has created, they are definitely better than me!
