I have text boxes where I would like to define/reuse typography settings for e.g. Body text vs Headers. Coming from Figma’s Text Styles (and also Variables), this was very straightforward in terms of the UI and how to actually assign styles to text, or to reference variables.
Typography “Assets” in Penpot seem to work, via selecting text and then pressing the defined Tyographies Asset on the left toolbar, but the text doesn’t update if the Asset values are changed. Supposedly this is what Tokens can be used for?
However, I cannot for the life of me figure out how to actually apply the Typography “Token” to text after defining its values. Right clicking a token gives me three options: edit, duplicate, and delete. I’ve tried selecting text, text boxes, boards, etc. and then pressing the token button with left and right click to no avail. (I also can’t seem to get any of the other token types to apply, i.e. color). How do you actually apply Tokens? The existing documentation only seems to hype up the token system (yes, I gather the composite typography token is pretty new) without demonstrating how to actually apply them in the editor.
Maybe your issue is because typography tokens can only be applied to a text layer, but not to individual elements inside a text layer. Applying a Typography Token will detach any Typography Style previously applied, and vice versa.
When you select (left click) an object on the canvas, any applicable tokens are selectable from the tokens panel (either by left click or right click to see more specific options). Any tokens that can’t be applied to that object will be disabled, so for example a typography token can’t be applied to a shape.
If you can’t select any tokens, it could be what I think @carolina.portugal suggested above that you have highlighted text inside a text object selected, rather than the text object itself. Or it could be that your text is inside a group or layout, and you have that layer selected rather than the text object.
Thank you both for the replies. The tip about text vs text object and seeing the process in the attached video clips was helpful to show me that I wasn’t missing something. I had tried both options before and was unsuccessful, but after testing with a new blank file and different browser (edge vs firefox) and I am able to successfully click the token name to apply it.
@akabareth Every now and then, it seems as though I lose the ability to apply tokens (not sure why). I’ve found that if I export my tokens to JSON and reimport into the same document, it can help get things working again. I haven’t found enough rhyme or reason to the wonky behavior to report anything.
Okay! If it happens again — hopefully it won’t — I’ll download the .penpot file first and send it to the support address you referenced above before I do my JSON dance and keep working.
