New tool for managing design tokens
I tried out Penpot
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / Podcast / My Linkedin
Let’s start by repeating what design tokens are.
Design tokens are simple, platform-agnostic values that are nicknames for your design elements. Instead of hardcoding hex colors or pixel sizes, you name these values and store them in a standardized format (usually JSON or YAML). These tokens then:
Create a single source of truth between design and development
Work across different platforms (web, iOS, Android)
Follow W3C Design Tokens Community Group standards
Can be directly used in code via tools like Style Dictionary
Unlike Figma Variables (which only work within Figma), design tokens are portable between design tools and codebases, making them useful for design-development collaboration.
We can manage design tokens with the Tokens Studio Figma plugin or the Design Tokens plugin for Figma. Now, we can use them natively in Penpot.
How Penpot Integrates Design Tokens
Penpot is the first design tool to offer native design token support. Penpot is a web-based open-source design tool that bridges the gap between designers and developers. This means:
↪️ Deep W3C Standard Integration: Tokens are built into the core of how Penpot handles styles and components
↪️ JSON Import/Export: Export tokens to JSON via the Tools menu, edit them, and import them back
↪️ Theming Support: Create themes (like dark/light modes) by duplicating and modifying token sets
↪️ Library Integration: Tokens live inside libraries and maintain linkage when components are used across projects
Key Features and Benefits
No Performance Limits: Create hundreds or thousands of tokens without slowdowns
Style Dictionary: Native integration means clean conversion to CSS, iOS, Android
Shared Language: Improves communication between designers and developers
Coming next →
API Support: programmatic token handling for automation
Typography Tokens: composite tokens for font family, size, weight, line height
What’s different from the Tokens Studio plugin for Figma?
My first attempt at trying Penpot was 3 years ago. It has changed a lot since then.
You can start from scratch or import “starter files” when you open it.
I tried with importing the Design system example. Penpot UI looks familiar, you will quickly understand what is going on. Find Tokens on the left side under LAYERS/ASSETS/TOKENS.
As you can see, I got premade components and styles, and everything is divided into pages: atoms, molecules, organisms, templates, pages, governance… However, there are no design tokens in this starter file.
I decided to try out the flow for adding tokens. First, I tried adding a few tokens manually. You can start by clicking the plus icon next to each category (border-radius, color,… etc.). When there are no tokens, categories are sorted alphabetically.
Then, I imported an example set of design tokens. As you can see, the category order changes once you add the tokens. Empty categories are pushed to the bottom, and the ones with tokens get the number.
The side panel shows all the tokens, but you can close or expand each category or make the side panel wider for better visibility.
Applying design tokens is the same as in Figma. You click the layer and the color, that’s it.
Creating sets and themes follows a similar path to the Tokens Studio plugin. You can create multiple sets and connect them to themes (you don’t need PRO license here).
The most significant difference is that you can’t directly edit design tokens in JSON in Penpot. You have to export JSON, edit it, and then re-import it.
You can get the code by inspecting the element.
This flow will be very similar if you are familiar with Tokens Studio. If you are not, you will need time to understand it.
Check the video for a detailed overview of new features:
Enjoy the Easter weekend. ✌️
💎 Community Gems
41 days to Into Design Systems Conference
I will present: My Toolkit: Educating Teams and Demonstrating Design System ROI
In this talk, I'll share my battle-tested toolkit for securing leadership support, building cross-functional champions, and demonstrating measurable ROI. I'll reveal my strategies for educating teams and provide a collection of practical resources you can use immediately.
🔗 Link
Atlassian design (system) updates and new custom typography
🔗 Link
What Founders Can Do To Improve Their Design Game
YCombinator
🔗 Link
If you enjoyed this article, please tap the Like button below ♥️
Kind of impressed and waiting for more from penpot.
Please try the TOOLS button, bottom-left of the Token panel. You will be amazed to see how easy it is to import and export tokens.