Tokens - Initial Impressions

[dfelinto]

Hi,

I decided to give tokens a try and share some early feedback. This is based on the develop branch. I never used tokens elsewhere so I’m coming in fresh. Please take this with a grain of salt.

Current scenario

At the moment at Blender we have two separate widget components. The high-fi and low-fi:

We also have two separate icons set for the different styles.

This duplication adds a lot of work and maintaince. So I’m hoping I can unify those widgets into a single Design System by using Tokens + Themes.

Quick test

(Note: The low-fi was supposed to have no shadows, but this is not possible at the moment)

Overall I believe this will be a game-changer and radically improve how I can use components for mockups.

I also tested having the tokens set on the Icons file, and using this for my components, and it’s working like a charm too! I did need to make sure the same tokens were defined in both documents.

Pain points

I often catch myself editing the token from the wrong set:

Maybe it is only me, and how I’m working with multiple Themes. But the fact that I can select a Set which is not active, leads to situations where what I’m editing is not what I wanted to edit.

Smaller annoyance

• LAYERS + TOKENS
  • I often use the LAYERS tab to select my elements. But because I can’t see LAYERS and TOKENS at the same time, I’m using the Ctrl/Cmd select instead.
  • If I could set the token via the context menu on the same place I set the colors/dimensions/… this wouldn’t be a problem. I believe an old version of this had this option?

Wishlist

• API access.
  • I create the icons document using a custom plugin, for me to set the tokens for all the icons I will need to do it programatically.
  • Maybe this is already supported. If so, sorry, I forgot to test it [update: I tested and doesn’t seem supported]
• Copy/paste/duplicate a Token to a different Set.
• Color picker for color token values.
• Token for shadow (opacity)
  • I know there are plenty of tokens missing, but I personally miss tokens for shadow control.
  • For my specific use case I already know that I will need at least “shadow opacity”.
  • Possibly the option to disable/enable shadow as well … though this I can do with the opacity.
• Tokens and Libraries:
  • It would be nice to have a way to bundle the tokens with a Library file.
  • Otherwise everytime I start a new document I will need to:
    • Import my Widget Library.
    • Import the Tokens from it.
  • Without this it also makes it harder for anyone else to use an external component library. Since first they need to add the library to their project, then need to open the file and export its tokens, and finally, link the library and import the tokens in the new documents.

---

Thanks Penpot + Tokens Studio for working on this. Let me know if something is not clear.

I’m also fully aware that this use-case (white-boarding) is not a priority for the penpot project. But I hope that some of those painpoints are common to the web folks as well.

I hope you find this unsolicited feedback useful!

[Laurentiu_Cotet]

How can I try this on web?

[dfelinto]

I’m not sure if you can. I self-host in order to try the develop branch.

[dfelinto]

@dfelinto

API access.

(…) for me to set the tokens for all the icons I will need to do it programatically.
Maybe this is already supported. If so, sorry, I forgot to test it

It doesn’t seem to be supported yet
I tried looking for it in a very crude way:

console.info(findKeysContaining(penpot, "token"));

function findKeysContaining(obj: any, keyword: string, depth: number = 5, prefix: string = "penpot") {
  if (!obj || depth < 0 || typeof obj !== "object") return [];

  let foundKeys: string[] = [];

  for (const key of Object.keys(obj)) {
    const fullPath = `${prefix}.${key}`;
    if (key.toLowerCase().includes(keyword.toLowerCase())) {
      foundKeys.push(fullPath);
    }
    try {
      foundKeys.push(...findKeysContaining(obj[key], keyword, depth - 1, fullPath));
    } catch (e) {
      console.warn(`Could not access: ${fullPath}`);
    }
  }
  return foundKeys;
}

[carolina.portugal]

Today! It’s liveeeeeeeeeee

[dfelinto]

Today! It’s liveeeeeeeeeee

That was unexpected

[findut]

You can do magic, I’m playng around with this and it’s beautiful! I’m strugglin’ on a tool to convert Material Design Token (DSP) in the right format to use in Penpot (Design Tokens Format Module) because i find Material Theme Builder useful do an awesome work in creating palette and color schemes…but I’m not so good in coding…

[Beryesa]

Maybe it is only me, and how I’m working with multiple Themes. But the fact that I can select a Set which is not active, leads to situations where what I’m editing is not what I wanted to edit.

From my understanding; the theme selection/toggle is just “which sets are active”, i.e. controls the checkboxes, and has nothing to do with which set is selected on the token editor.
So it is the expected behaviour, I believe.

The sets are not tied to any theme, just activated. It looks confusing with just two sets but think of one theme activating/deactivating multiple sets simultaneously.

Except, we can activate multiple themes (from different groups) as well?
That makes the intended grouping structure unclear [Would we organise by set groups or theme groups etc.] but that might be for when the tokens get more sophisticated and hooked up to the prototype system.

Maybe it can be made more clear? I see how it looks like a child element there, but that’s not the case.

[ericwaetke]

I’ve just tried importing existing design tokens from another project, but got this error

I’d love to see a more detailed error here—what token data is invalid? Because otherwise its pretty impossible to debug

[carolina.portugal]

Hello @ericwaetke are you trying to bring from one penpot project to another?

[ericwaetke]

I’ve got a tokens.json, with design tokens from a project created in TokenStudio in Figma—we use those tokens in production, so in theory they should be working

But when trying to import the json to the Penpot file I get the error above

Hope that helps understanding my issue

[carolina.portugal]

Thanks for the clarification, our team is taking a look into it now!

[carolina.portugal]

@ericwaetke could you send the json file to support@penpot.app?

[Garrett]

Hi all! Thanks for adding tokens to Penpot!

I’m trying to figure out how to use existing tokens. A project I work with, PatternFly, has tokens that are in Figma. I’m trying to do something with their Figma-generated tokens, and I can’t make it work.

Here’s a link to the exported and built tokens, as JSON: design-tokens/packages/module/tokens at main · patternfly/design-tokens · GitHub (there are also CSS exports @ design-tokens/packages/module/build/css at main · patternfly/design-tokens · GitHub BTW)

PatternFly has a bunch of documents overall at https://www.figma.com/@PatternFly

(Ideally, everyone would be using Penpot, but that’s not the case on the team, sadly; most of the team is already invested in Figma. But the next thing to ideal would be to do something with the Figma documents from within Penpot. And after that, the next best thing would be to be able to use the tokens from the Figma export (the github link above) somehow. I think it’s possible to use the tokens, but this Figma-exported token stuff is all new to me.)

Thanks for reading and thanks in advance for any effort in figuring this out!

[ericwaetke]

Sure I can do that, but my issue is not that this specific json doesn’t work—it’s more that I can’t see why it doesn’t work.

It’s probably some unsupported character in a token name or value, which I could easilly fix myself—if I knew what that unsupported error is

Something like

Import Error: Invalid Token data in JSON
'@' in line 12, character 36

[myfunnyandy]

We are already considering this need: Error message on importing token files with tokens not compatible with Penpot · Issue #3 · tokens-studio/penpot · GitHub

Feedback like this helps us to prioritize, so thanks for the clarification

[natacha]

Hey @Garrett
Currently we support single file json on imports, but multifile support is in our roadmap, have you tried to export from the plugin in the single json format?

[Beryesa]

A small feedback on reorganizing and linking/relative values

Dragging collapsed set groups breaks the token editor until a reload and
selecting sets for themes can really become impossible on long lists

Pressing the collapse saves instead (as a workaround), but scrolling would be needed.
Also renaming components vs tokens feel inconsistent when it comes to ungrouping

I wonder why can’t we do overrides like adjusting the alpha value of the same name without self-references and cycles, i.e. a translucent set that could take app.bg from base and do rgba({app.bg},0.5) also needs to be called app.bg for it to override correctly but that’s not possible I guess.

For now, I found a workaround to set the base app.bg to a {dynamic.color.value} and do rgba() on the same relative set in the translucent one as well

I thought we would do global aliases with the full name, e.g. {vendor.base.app.bg} etc to avoid conflicts, but I might be misinterpreting the w3c spec here.
Still on the spec, I believe this specific rgba alpha override is the only calculation we can do so far with other colours, right?
Maybe I’m just overcomplicating things, but some extended transformations (like style dictionary) could become handy.

---

Playing around with the colors, so far the new system is integrated really nicely! Better than some other competitors and any previous foss tool for sure =D

Penpot Migration — new tokens feedback demo

[natacha]

@dfelinto

Tokens and Libraries:

• It would be nice to have a way to bundle the tokens with a Library file.
• Otherwise everytime I start a new document I will need to:
  • Import my Widget Library.
  • Import the Tokens from it.
• Without this it also makes it harder for anyone else to use an external component library. Since first they need to add the library to their project, then need to open the file and export its tokens, and finally, link the library and import the tokens in the new documents.

I get that this can be misleading and confusing, but actually, you don’t need to import the tokens in every file when you’re attaching a library with tokens. They’re already in your components, so if you update or change your theme in the library, the file will trigger a library update, and the values will be synchronized.

We still need to resolve a few unknowns before we can find the right UX for this, but it’s definitely something we plan to tackle

As for duplicating sets, that’s already in our backlog (actually in progress!).

Thanks for your feedback, it’s super helpful to us!

[dfelinto]

@natacha

They’re already in your components, so if you update or change your theme in the library, the file will trigger a library update, and the values will be synchronized.

I see that, which is an interesting to keep all users of a component in sync (*).

However in my case I want to change the Theme on the file that is using the component. And for this I do need the tokens (and Themes and Sets) on the file which is using the components as well..

(*) I just found a bug with this by the way.

Thanks for your feedback, it’s super helpful to us!