Almost a couple of months ago, we launched Design Tokens in Penpot. Since then, we can proudly say that Penpot has become the first design tool to offer native support for design tokens.
This release has brought us plenty of joy and just as many learnings. The data we are gathering shows that the usage of tokens is growing steadily every week, and community feedback tells us that the idea of a built-in design tokens engine that adheres to standards at a design tool really resonates and is appreciated.
The DTCG represents a large community of designers and engineers pushing to make the design tokens format an official W3C standard
Also, and this was no surprise, we’ve learned that some things are very much missed, and that we’re already working on new token types, GitHub sync and better UX for the tokens system. I’ll dive into this later in this post.
If you need more context about Penpot Design Tokens, I highly recommend reading this enlightening post by @laurakalbag.
Unboxing Penpot Design Tokens
Shortly after the release, we hosted a live session to celebrate not only the launch of Penpot’s native design tokens, but also the exciting partnership with Tokens Studio by Hyma.
They talked about why this is a significant milestone and how innovation can be driven through collaborations like the one that we have with Hyma. There’s also a live demo and a Q&A, making it a particularly complete session. One personal highlight was something Mike said that I can’t agree more:
Design should be a shared language and not some sort of proprietary puzzle
First Community Contributions
The creativity and generosity of our community didn’t take long to show up, and that makes us very happy. Here are just a few of standout contributions among the many we’re already seeing:
Shadcn UI Penpot Version by @FatumaA
Shadcn is an open-source set of beautifully designed, accessible components and a code distribution platform. Here you can find a (WIP) adaptation of Shadcn into Penpot, using design tokens.
TailwindCSS base theme design tokens by @Squix
A collection of design tokens for Penpot created to mimic most used TailwindCSS utilities. Includes tokens for spacing, border-width, border-radius and sizing. You can get the file here.
Figma variables to Penpot tokens by @lazar
This plugin bridges the gap between Figma’s design system variables and Penpot’s design tokens, allowing seamless migration of your local variables. You’re welcome to leave feedback here.
Website layout library by @louis
A full website design library implementing design tokens. In this post you’ll find the file and a great feedback discussion.
Design tokens starter kit by @LauraKalbag
A design tokens built for real life projects. It contains no more and no less than 531 design tokens in action. You can download it from PenpotHub and give feedback in the Community.
Looking Ahead: What’s Next?
The reception has been overwhelmingly positive, and if I’m not sharing an endless stream of nice quotes here, it’s only out of modesty. However, our users have expressed several strong needs and we’re well aware of areas that need some care.
The good news is, the most requested improvements are already aligned with our roadmap. We’re currently working on new token types (yes, typography!), contextual token visibility, and GitHub sync. All of this is aligned to our main focus: to make sure Penpot supports the best design token workflows out there.
Let’s get into it:
New Token Types
Our first launch included token types for the most commonly used properties: Color, Opacity, Border Radius, Sizing, Spacing, Rotation, and Stroke. But there’s more coming. In the short to medium term, we plan to add:
- Composite tokens - Tokens that hold multiple values (e.g., a single token with size, color, and opacity). These are a prerequisite for the next bullet point.
- Typography token type - This is one of the most requested Penpot tokens features. This is a composite token that includes several single tokens, most of which will be available independently. Taiga story.
- More single token types! - As you might have already imagined, we’ll start with the ones needed for the Typography token: Font Family, Font Weight, Font Size, Letter Spacing, and Text Decoration.
Synchronization of Changes
Right now, if you want to update the tokens in a Penpot file, you need to manually import/export them. Tokens are meant to bridge design and codebases, so it makes sense that sync should be more automated. Here’s what we are already working on for this case:
- GitHub sync - Seamless updates, versioning, and collaboration. Taiga story.
- API access to tokens - We’ll expose tokens in Penpot’s open API so they can be used in plugins and external integrations. Taiga story.
Visibility and Application of Tokens
Currently, the only way to view or apply tokens is via the tokens tab in the left sidebar. This simplicity helped us to launch the feature soon, but it came with two main tradeoffs:
- Lack of visibility of system status - It can be hard to tell if a token is applied to a property. For example, if a fill uses a color token, you only see the color value, but not the token name.
- Poor ergonomics - Users want to apply tokens where they’re working. Right now, if you’re editing a fill, you have to leave that context and open the token panel to apply a token.
Here’s what we’ll work on:
- Apply tokens from the design panel. Taiga story.
- Show token references in both the design panel and the inspect tab. Taiga story.
What do you think?
Is there anything you think we might have missed? I’d really love to hear your thoughts on our roadmap for Penpot Design Tokens.
