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.
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!
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.
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!
For me it’s the principal use for themes and tokens, especially for colors and spacing. Changing tokens when in certain context is the way to go to display components side by side, or use a compact card (in sidebar) and a large card (on main content) on the same page.
It’s the way component-query CSS standard is working and it’s a game changer!
I know @hirunatan was working on this some week ago so I know it’s in the works. I tried to find the user story but I couldn’t find it, Andrés, do you know where we can track progress on this? Thanks!
This feature includes one thing, that is separating the themes activation status from the tokens library, to be able to have different status in the library and in the files that use it.
This change is crucial to be able to specify status for smaller units like pages and boards. But this is a different story, that will need more work. This is not prioritized yet. You can track the progress in Taiga
