دسته: برنامه‌نویسان

As design and development teams grow and projects span across web, mobile, and internal tools, keeping everything consistent becomes tricky. Even small changes, like updating a brand color or adjusting spacing, can turn into hours of manual work across design files, codebases, and documentation. It is easy for things to drift out of sync.

That is where design tokens come in. They are a way to define and reuse the key design decisions like colors, typography, and spacing in a format that both designers and developers can use. Instead of repeating values manually, tokens let teams manage these decisions from a central place and apply them consistently across tools and platforms.

With Penpot’s new native support for design tokens, this workflow becomes more accessible and better integrated. Designers can now create and manage tokens directly inside their design files. Developers can rely on those same tokens being structured and available for use in code. No plugins, no copy pasting, no mismatched styles.

In this article, we will look at what design tokens are and why they matter, walk through how Penpot implements them, and explore some real world workflows and use cases. Whether you are working solo or managing a large design system, tokens can help bring order and clarity to your design decisions—and we will show you how.

What are Design Tokens?

Design tokens are a way to describe the small but important visual decisions that make up your user interface. Things like primary colors, heading sizes, border radius, or spacing between elements. Instead of hardcoding those values in a design file or writing them directly into code, you give each one a name and store it as a token.

Each token is a small piece of structured data. It has a name, a value, and a type. For example, a button background might be defined like this:

"button-background": {
  "$value": "#005FCC",
  "$type": "color"
}

By putting all your decisions into a token format like this, they can be shared and reused across different projects and tools. Designers can use tokens inside the design tool, while developers can use them to generate CSS variables, theme files, or design system code. It is a way to keep everyone aligned, without needing to sync manually.

The idea behind tokens has been around for a while, but it is often hard to implement unless you are using very specific tools or have custom workflows in place. Penpot changes that by building token support directly into the tool. You do not need extra plugins or complex naming systems. You define tokens once, and they are available everywhere in your design.

Tokens are also flexible. You can create simple ones like colors or font sizes, or more complex groups for shadows, typography, or spacing systems. You can even reference other tokens, so if your design language evolves, you only need to change one thing.

Why Should You Care About Design Tokens?

Consistency and efficiency are two of the main reasons design tokens are becoming essential in design and development work. They reduce the need for manual coordination, avoid inconsistencies, and make it easier to scale design decisions. Here is how they help across different roles:

For designers
Tokens remove the need to repeat yourself. Instead of manually applying the same color or spacing across every frame, you define those values once and apply them as tokens. That means no more copy-pasting styles or fixing inconsistencies later. Everything stays consistent, and updates take seconds, not hours.

For developers
You get design values in a format that is ready to use. Tokens act as a shared language between design and code, so instead of pulling hex codes out of a mockup, you work directly with the same values defined by the design team. It reduces friction, avoids mismatches, and makes handoff smoother.

For teams and larger systems
Tokens are especially useful when multiple people are working on the same product or when you are managing a design system across several platforms or brands. They allow you to define decisions once and reuse them everywhere, keeping things in sync and easy to update when the brand evolves or when new platforms are added.

Watch this quick and complete demo as Laura Kalbag, designer, developer and educator at Penpot, highlights the key benefits and main uses of Penpot’s design tokens:

What Sets Penpot Apart?

Penpot is not just adding support for design tokens as a separate feature. Tokens are being built directly into how Penpot works. They are part of the core design process, not an extra tool you have to manage on the side.

You can create tokens from the canvas or from the token panel, organize them into sets, and apply them to components, styles, or entire boards. You do not need to keep track of where a value is used—Penpot does that for you. When you change a token, any component using it updates automatically.

Take a look at this really great overview:

Tokens in Penpot follow the same format defined by the Design Tokens Community Group, which makes them easy to sync with code and other tools. They are stored in a way that works across platforms, and they are built to be shared, copied, or extended as your project grows.

You also get extra capabilities like:

• Tokens that can store text, numbers, and more
• Math operations between tokens (for example, spacing that is based on a base value)
• Integration with Penpot’s graph engine, so you can define logic and conditions around your tokens

That means you can do more than just store values—you can create systems that adapt based on context or scale with your product.

Key features

Design tokens in Penpot are built to be practical and flexible from the start. Whether you are setting up a simple style guide or building a full design system, these features help you stay consistent without extra effort.

• Native to the platform
  Tokens are a core part of Penpot. You do not need plugins, workarounds, or naming tricks to make them work. You can create, edit, and apply them directly in your files.
• Based on open standards
  Penpot follows the format defined by the Design Tokens Community Group (W3C), which means your tokens are portable and ready for integration with other tools or codebases.
• Component aware
  You can inspect which tokens are applied to components right on the canvas, and copy them out for use in code or documentation.
• Supports multiple types
  Tokens can represent strings, numbers, colors, font families, shadows, and more. This means you are not limited to visual values—you can also manage logic-based or structural decisions.
• Math support
  Define tokens in relation to others. For example, you can set a spacing token to be twice your base unit, and it will update automatically when the base changes.
• Graph engine integration
  Tokens can be part of more advanced workflows using Penpot’s visual graph engine. This opens the door for conditional styling, dynamic UI variations, or even generative design.

Practical Use Cases

Design tokens are flexible building blocks that can support a range of workflows. Here are a few ways they’re already proving useful:

• Scaling across platforms
  Tokens make it easier to maintain visual consistency across web, mobile, and desktop interfaces. When spacing, colors, and typography are tokenized, they adapt across screen sizes and tech stacks without manual rework.
• Creating themes and variants
  Whether you’re supporting light and dark modes, multiple brands, or regional styles, tokens let you swap out entire visual styles by changing a single set of values—without touching your components.
• Simplifying handoff and implementation
  Because tokens are defined in code-friendly formats, they eliminate guesswork. Developers can use tokens as source-of-truth values, reducing design drift and unnecessary back-and-forth.
• Prototyping and iterating quickly
  Tokens make it easier to explore design ideas without breaking things. Want to try out a new font scale or update your color palette? Change the token values and everything updates—no tedious find-and-replace needed.
• Versioning design decisions
  You can track changes to tokens over time just like code. That means your design system becomes easier to maintain, document, and evolve—without losing control.

Your First Tokens in Penpot

So how do you actually work with tokens in Penpot?

The best way to understand design tokens is to try them out. Penpot makes this surprisingly approachable, even if you’re new to the concept. Here’s how to start creating and using tokens inside the editor.

Creating a Token

1. Open your project and click on the Tokens tab in the left panel.
2. You’ll see a list of token types like color, dimension, font size, etc.
3. Click the + button next to any token type to create a new token.

You’ll be asked to fill in:

• Name: Something like dimension.small or color.primary
• Value: For example, 8px for a dimension, or #005FCC for a color
• Description (optional): A short note about what it’s for

Hit Save, and your token will appear in the list. Tokens are grouped by type, so it stays tidy even as your set grows.

If you try to create a token with a name that already exists, you’ll get an error. Token names must be unique.

Editing and Duplicating Tokens

You can right-click any token to edit or duplicate it.

• Edit: Change the name, value, or description
• Duplicate: Makes a copy with -copy added to the name

Handy if you’re exploring alternatives or setting up variants.

Referencing Other Tokens (Aliases)

Tokens can point to other tokens. This lets you define a base token and reuse it across multiple other tokens. If the base value changes, everything that references it updates automatically.

For example:

1. Create a token called dimension.small with a value of 8px
2. Create another token called spacing.small
3. In spacing.small, set the value to {dimension.small}

Now if you ever update dimension.small to 4px, the spacing token will reflect that change too.

Token references are case-sensitive, so be precise.

Using Math in Tokens

Penpot supports simple math in token values—especially useful for dimension tokens.

You can write things like:

• {dimension.base} * 2
• 16 + 4
• {spacing.small} + {spacing.medium}

Let’s say dimension.base is 4px, and you want a larger version that’s always double. You can set dimension.large to:

csharpCopyEdit{dimension.base} * 2

This means if you ever change the base, the large size follows along.

Math expressions support basic operators:

• + addition
• - subtraction
• * multiplication

This adds a lightweight logic layer to your design decisions—especially handy for spacing scales, typography ramps, or breakpoints.

What’s Next for Penpot Design Tokens?

Penpot has an exciting roadmap for design tokens that will continue to expand their functionality:

• GitHub Sync: A feature allowing teams to easily export and import design tokens, facilitating smooth collaboration between design and development teams.
• Gradients: An upcoming addition to design tokens, enabling designers to work with gradients as part of their design system.
• REST API & Automation: The future addition of a REST API will enable even deeper integrations and allow teams to automate their design workflows.

Since Penpot is open source and works under a culture of sharing as much as they can, as early as possible, you can check out their open Taiga board to see what the team is working on in real time and what’s coming up next.

Conclusion

Penpot’s design tokens are more than just a tool for managing visual consistency—they are a game-changer for how design and development teams collaborate. Whether you’re a junior UI designer trying to learn scalable design practices, a senior developer looking to streamline design implementation, or an enterprise team managing a complex design system, design tokens can help bring order to complexity.

As Penpot continues to refine and expand this feature, now is the perfect time to explore the possibilities it offers.

Give it a try!

Are you excited about Penpot’s new design token feature? Check it out and explore the potential of scalable design, and stay tuned for updates. We look forward to see how you will start incorporating design tokens into your workflow!