New Plugin: Color styles to JSON file

Events and Announcements Product updates
,
1

Hey! We’d love to share with you the plugin we’ve developed to migrate your current Color Styles to Tokens easily.
image

What does this plugin do?

It converts the color styles you’ve already created in Penpot into a JSON file compatible with Design Tokens. Then, you can import this file into the Tokens tab to replicate the same structure as your styles.

Things to keep in mind:

  • If your styles are grouped, those groups will be turned into token sets.

  • It works with solid colors and colors with opacity, but not with images or gradients (those aren’t supported by tokens yet).

  • Keep in mind that styles only store raw values, while tokens can also store references to other existing colors, so you will be able to create those references once imported.

  • This file gives you a solid starting point for your color system - no need to recreate everything manually.

Plugin page:

Install URL:
https://colors-to-tokens-plugin.pages.dev/assets/manifest.json

img
img2280×1076 93.9 KB

8 Likes
2

This is great!
Just to ensure I got it right, when importing a json file it will replace the current tokens in the penpot file correct?
So if we want to simply add these generated colors to our existing tokens, we should copy and paste the content into our json at the right place correct?

3

Right, currently importing a new JSON will override the existing sets, tokens, and themes.

Right, the best approach here is:

  • First, export the tokens you’ve already created in the Tokens tab
  • Export your styles using the plugin
  • Merge or copy these new tokens into the original JSON

This way, you’ll keep your sets, themes, and tokens when reimporting. If you’ve already applied tokens in your designs and those tokens still exist (with the same name), everything will work as expected, since the information about applied tokens is still stored in Penpot.

hope I’m explaining this clearly!

Let me know if it helps!

2 Likes