Sneak peek: Tokens + multidimensional themes

Inside Penpot
1

Hey everyone!

I’ve been experimenting with our upcoming Design Tokens feature to show just how powerful this functionality is.

Right now, I’m playing around with multidimensional themes for color themes and modes—here’s an example! Let me know what you think. :rocket:

25 Likes
2

Looks good. Will we be able to export SVG with something like:

<rect fill="light-dark(var(--bg-light, white), var(--bg-dark, black))">
1 Like
3

Looks amazing well done :smiley:
So when using tokens, there’s no more need/added value to use the original color library right?

1 Like
4

Eventually yes. Design Tokens will be available at the Inspect tab both as Info and Code, but not in their first version. We have already prioritized the next improvements after the first release and this one is among them, so stay tuned.

2 Likes
5

Color assets and color tokens will be two ways to cover the same need, so yes, you’ll be able to completely replace the former with the latter.

However, there are reasons why we’ll maintain the color assets (at least for the moment):

  • In its first version, tokens sync will be done through import/export token files. Considering this, the updating flow of a Shared Library can be more convenient depending on the use case and the update frequency needed. We’re already working on a better way to sync them, so this reason will soon be no longer valid.
  • Assets are less powerful, but a bit easier to use. Some people might just find them enough and feel more comfortable sticking with them, and that’s totally fine.

In any case, we expect a shift in how Penpot users manage their colors at Penpot that will probably result in less use of assets. This can be one of these rare occasions in which worsening a metric can be good news :slight_smile:

4 Likes
6

Thanks, yes it makes total sense, that for some projects color assets can be enough :blush:
Another advantage of color assets I see -for now at least- is that they can always visually available in one click in the bottom toolbar, and that we can easily generate a palette with a plugin (but I guess it’s a matter of time before the same will be possible for color tokens!).

1 Like
7

Here’s another video, this time with the UI included, showcasing themes, spacing, grid, and possibilities around branding.
I hope you enjoy it!

5 Likes
8

Congratulations to both teams Penpot and Token Studio for the great achivement !

I think this would be a game changer for devsigners (half developers / half designers) and Penpot to increase the number of users.

Some comments:

  • Videos shared by @natacha look great and only give as a hint of what could be achieved. I can imagine fonts, gradients, shadows, transitions.
    Btw, what version of the Design Tokens Format are you implementing?
    Do you have a public taiga board / roadmap of the state of implementation of each type?

  • Is API for design tokens available? I would love to experiment with this as I see a great potential for plugins (for example a random design generator, AI bridge from text to design, or some kind of tool that can generate accessible design systems).
    If it is already available, do you have any example?
    API docs

  • Library for design tokens. It would be useful to share design token files with penpot designs. Maybe through the PenpotHub?

  • Lastly an idea that I´m not if make sense or could be of interest.
    Design tokens are a way to expressing design decisions.
    But I can fell a gap here: creating the design tokens you create names / values / descriptions but there is still the need to select and apply by hand which elements in the design should be linked to which design token. This might be a bit repetitive, verbose or redundant.
    It would be great to have something like this: you import the design tokens file and it autodetects to which element / component in the design should apply a specific design token.
    Does this make sense or it´s just me not having sleep enough? :slight_smile:

To sum up, thanks very much for your hard work and passion.