Apply different tokens sets in different boards

Hi!

Currently when choosing a token set, Penpot applies it across all pages and boards in the file where those tokens are used. This behavior can sometimes feel restrictive.

For example, I have a token set for wide cards and another for compact cards, but I haven’t found a way to make these two coexist within the same file. At the moment my cards end up being either all wide or all compact.

It would be handy to be able to apply one token set to a specific board and another set to a different board within the same file.

Have you tried using themes to switch between the compact and wide token sets? That’s probably the best way for your different modes to coexist in one design file, and should translate well into the development process.

Hi Laura!

I tried using themes, but I think this approach doesn’t fully cover my use case. I’ll attach a video to better illustrate what I want to do and what I currently cannot achieve.

I have a main component card where I have assigned my spacing tokens (wide and compact). What I’d like to do is assign the compact theme to the compact board and the wide theme to the wide board.

Right now, if I switch themes, the change applies to the entire file. This means I can only view the wide theme or the compact theme, but not both coexisting in the same file on different board.

This behavior forces me to choose one global theme, while what I’d prefer is to keep one single component with tokens assigned and then decide in the prototype which instances should use the wide variation and which ones the compact variation. I used the wide/compact example, but I would apply this approach in many other cases too.

If there’s already a way to achieve this in Penpot without having to create a separate component for each variation, I must be overlooking it — so I’d love to learn how. Thanks a lot for your help!

That makes sense :slight_smile:

I think the upcoming component variants might be a useful way to express these variations within one file.

Variants seem like they’ll get me to a similar result, so definitely looking forward to them. That said, I still see value in achieving the end goal with tokens, and I hope my suggestion might be considered down the line.

Thanks again for the pointers!

Hey @haveyouseenf

This is definitely something we’d like to do. I agree it’s very useful to have different sets or themes applied to an element side by side, or to different pages within the same file. For me, the ideal solution would be to allow selecting the scope of application—by file, by page, or by selected element. That said, we might also consider alternative solutions to achieve the same goal, since this particular approach is quite complex.

Unfortunately, this is not on our immediate roadmap, as there are many factors to consider and other features we need to prioritize first.

Thanks for explaining your use case, this is super useful!

2 Likes

Totally understandable, thanks for the insight :slightly_smiling_face:

2 Likes