The applying design token to a design UX is fundamentally broken and inconvenient. I really don’t understand why the team felt the need to go for something different than the tried and true dropdown menu next to the field where the user is applying the value. Having to hunt the property I’m trying to apply a token to inside of a different dropdown, after you’ve already gotten my mind used to the UI in the right side makes 0 sense.
And this is not even mentioning that applying tokens and managing your layers basically become either/or operations, since they reside in the same left panel, so you cannot do one while doing the other.
Why did the team opt for this UI/UX choice? Should we be expecting functional dropdowns for tokens in the right panel? What about auto-completion for tokens? I started out loving the idea of Penpot but it seems like the same old design issues of open-source software are rearing their ugly heads into Penpot too.
The short answer is yes, we’re currently working on showing and applying design tokens from the design panel fields and the color picker. Here’s the user story if you want to dig into the specifics. Most of the tasks are wrapped up at the time that I’m writing this, so I’m feeling confident about publishing this huge improvement soon. Also, here’s a sneak peek of what’s coming.
Why did we decide to launch design tokens so they could only be seen and applied from the assets panel? Because we saw that as the minimum viable version we could ship first. We’d rather release earlier than wait for the “perfect” version for several reasons:
We can solve user problems sooner by unlocking real use cases.
We learn from actual usage, gathering real evidence (not assumptions) that helps us prioritize and improve the product.
It’s not about lowering quality. It’s about taking the right steps to reach the best possible solution. Without the learnings that come from releasing early, it’s hard to make the right calls.
This way of thinking applies to the rest of the feature too. The first release of design tokens in Penpot was just the foundation, and since then we’ve shipped five consecutive releases with design token improvements. We intend to keep doing this. We share more about our short- and mid-term plans in this post.
I am struggling to use the tokens in current form and the colors in general:
there is assets library where I can define colors
there is separate tokens tab where I can define separate colors
I can’t pick a color token from the “fill”/”stroke” color selector: only colors from library show up, not design tokens
I can’t edit the recent colors, for example clear them?
If I have a flex layout with text, the flow to set text color on a background is very long and confusing: go to Layers tab → select board → go to tokens tab → hunt for token to apply background → go to layers tab again → click on child text → go to tokens tab → hunt for another color token again. I need to do that for example for texts which are the same size as boxes they are in.
It is really unfortunate that tokens are not displayed on the floating toolbar at the bottom of the canvas, like the palette and typography, and that I can’t have both layers and tokens opened at the same time
It would be a lot easier if I could just select elements and select the appropriate tokens from the selection box
Given that it is half a year later, are there any improvements to that? Currently I am using hosted penpot app but I would be open to use any experimental/self-hosted version if it had anything like that. Do you have a roadmap for that item? Currently this makes the usage of tokens very tedious. Related question: do you have an item for having multiple tabs opened and docker at the same time? For example “Layers” tab and “Tokens” below them on the same sidebar. This reconfigurable funcitonality would help a lot.
Hi, maybe I’m wrong, but I think there’s a way to select colors from the token list directly from the color selection window. Applying a background color to text in Flex Layout usually takes two clicks: I select the object, in this case the text box in Flex Layout (not the text itself, otherwise the text color will change), and in “Fill,” I select the desired color token. In the color selection window, in the top right, there are two icons, one teardrop-shaped and one hexagon-shaped; the hexagon-shaped one opens the color token list.
@T3sT3ro here’s a video reproducing what you’re asking for…
You might also find this tip useful: if you hold down the ctrl/command key while clicking layers, it’ll help you directly select the object you’re hovering over. This means you’re less likely to need the layers panel to navigate to the exact object.
Oh, I was not aware of it, I coul swear that there was a very similar icon doing something else elsewhere, so I ignored it. Maybe the icon isn’t very idiomatic?
Sometimes selecting the token from the colors popup doesn’t work. I click on a token and it doesn’t get applied. I then usually have to reload the page, but it is weird nonetheless.
