There is this tool for Figma called Tokens Studio (https://tokens.studio). What it does is allows designers to create tokens for all their design choices like fonts, colours, shadows etc etc… and save them into a Json file that can then be pushed to git etc.
Developers can then use that output to generate CSS variables with all the same names and values making this file that is shared between the development and design environments the source of truth for all these design decisions.
Tools to transform the Json to CSS:
This feels like a really natural fit for PenPot and it’s aspirations.
I’m surprised this was suggested so late; design tokens are the future!
However, if we look at something like Figma, there is a lot of overlap between color/text/layer styles and the design tokens plugin. They don’t mix that great together either.
Since individual design tokens can be combined to create token “compositions” (effectively css classes), it’s only natural then that all color/text/layer styles in Penpot actually use (or generate) design tokens in the background to make the UX seamless and better integrated. Beginners can simply use the UI, while advanced users could access and modify the tokens directly.
If someone is able and willing to develop this, I would gladly chip in with my design time to tackle some of the challenges, as (to my knowledge) Figma has yet to implement design tokens natively.
You’re right, there is nothing native to Figma right now. What is great in the Token Studio approach is that it generates a file that is becoming a standard for communicating design tokens. That’s great because then any other system that talks this standard can use this file as well like build systems etc for devs. You then have this one source of truth between the design and the code that walk lock step with each other.
Accidentally deleted my previous reply instead of editing
Yup yup, it we’re serious about it, it would be important that it’s a 2-way sync since I’ve seen some people advocating for a frontend-first approach when it comes to design tokens. In such cases the tokens are (almost?) entirely made in code and then synced back to Figma using the plugin.
For me personally, I would also love that freedom to change the tokens wherever I find it more practical.
I think it would be a good idea to keep the generation of design tokens decoupled from Penpot. Token Studio seems like a good way to maintain that decoupling. There are also alternative design token systems that input/output their own JSON/CSS with their own alternative syntaxes. So I think it would be good to consider that when/if implementing some kind of design token integration.
I think with the standard that is taking shape (https://tr.designtokens.org/) it would be better to stick to what will be the standard instead of trying to cater for everyone’s flavour. With the standard it might be nice to have it built into PenPot just like they are building in the CSS standards with their layout features instead of following other traditional design apps like Figma etc that deviate from it.
“Right now” is the correct term.
Figma is currently working on native support for design tokens internally and they e.g. push the w3c standard for theming and native mode support (jjcm is a key figure at Figma).
Keen to stay abreast of this as its key to us moving to Penpot from Figma. Is there a group at PenPot I can join or should I be talking to the Token Studio guys?
Bump. Also interested in any updates, roadmap confirmations, literally anything. This is probably the last major feature we need to transition from Figma.
I’m new to PenPot and it being integrated with Token Studio is definitely a draw for me.
I’m curious since I’ve seen that the feature to download the tokens to JSON is available; is there expectations to sync with GitHub/GitLab by any chance?
