Laura Kalbag - Penpot Blog

The image shows the title: "8 penpot features for product team" , in the background there is a blurred pics of a monitor with a design system project on i

Tools

8 advanced Penpot features for product teams (and why you should use them)

Discover 8 advanced Penpot features that help product teams reduce design-to-development friction, create more efficient workflows, and maintain consistency at scale.

Set up Penpot MCP with Cursor in 5 steps and no code

The fastest and simplest way to get started with Penpot and AI workflows from scratch. Learn how to get started with Penpot and Cursor, a code editor with an integrated AI client.

the cover shows the sentece "set up mcp server in 6 minutes with opencode and openrouter"

Set up Penpot MCP with OpenRouter and OpenCode in 6 steps

One of the fastest ways to set up Penpot for AI workflows in just 6 steps, no coding required, and only using free, open, and/or low-cost tools.

Code

Practical uses for math functions in design tokens

Penpot design tokens support both basic calculations and complex math functions. Let’s explore how you can use both to level up your design systems.

The image shows the title "A giude to design tokens .JSON format" on a dark background

Code

A practical guide to the design tokens JSON format

Learn about the design tokens JSON file format and how Penpot works with it.

Penpot

6 benefits of design tokens for enterprise teams

Design tokens eliminate inconsistency and speed up designer-developer collaboration. Explore 6 benefits that make them essential for enterprise design systems.

The image shows Penpot Ui with the prototype of an app. There are two cursors working on it, the Developer one is touching code while the designer one is touching the layers

Tools

How Penpot makes design and developer collaboration seamless

Penpot bridges the design-development gap by eliminating the translation layer that creates friction in traditional workflows.

Editing the shadow design token in Penpot. The token has a name, color, x and y offset, blur and spread

Tutorial

Tutorial: Creating and using shadow tokens

Using shadows carefully and consistently in your UI design can make it feel polished. Shadow design tokens help you implement the consistency and quickly update your shadows across your design system.

Tutorial

Using design tokens for a proportional typographic scale

A proportional typographic scale is a hierarchy for font sizes that uses a consistent mathematical ratio. Design tokens are ideal for creating these scales.

Tutorial

Tutorial: Creating and applying typography design tokens

Typography design tokens are a way to save your text styles for reuse across your projects. The typography composite token combines multiple typography-related properties in one mega token.

A screen prototype in the center of the image, on the left the tokens Ui and on the right the Assets Ui from Penpot screen

Tutorial

Penpot deep dive: Color tokens vs asset colors

Color design tokens and asset colors are both ways you can store colors in Penpot for reuse. There are some key differences that might affect which you choose to use in your project.

Color, Typography, Stroke Width, Opacity, Sizing

Design

Design tokens for designers: A practical guide

Design tokens bring together design and development teams with a single, unified language for expressing color, fonts, sizing, and more.

See all