7 Penpot prototyping features to bring your next project to life

Prototypes are essential in any major build, but their role has evolved. Today they go beyond visual mockups, helping teams catch issues early, test connections, validate assumptions with real data, and keep designers, developers, and stakeholders aligned.

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.

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.

4 reasons why enterprises benefit from open-source design platforms

Whether it’s scaling across hundreds of designers or self-hosting and customizing an instance to meet strict requirements, open-source software gives enterprises the control they need to succeed - and one of the biggest advantages is flexibility.

The developer’s guide to design tokens and CSS variables

Design tokens are a platform-agnostic representation of your design decisions, while CSS variables provide a way to implement these decisions in the browser.

How to use component variants to scale your design system

This article explores how you can use component variants to simplify, scale, and future-proof your design system, helping you design more efficiently as your projects grow.

Penpot's new rendering system

One of the hardest challenges in building a design tool like Penpot is rendering performance. As designs grow in complexity, ensuring smooth performance becomes increasingly difficult.

CSS Grid vs. Flexbox: Choosing the right layout for you

Understanding what is Grid vs. Flexbox and how to use them can help you build cleaner layouts, write less code, and avoid frustrating design issues down the line.

What is Interaction Design? A Guide for UX Designers

In this article, we'll break down what makes interaction design different from other types of design, go over its key ideas, and share the tools and steps designers use to create great digital interactions.

Understanding the z-index: A beginner’s CSS guide

What's z-index? Learn how to manipulate the z-index, why it matters, and how Penpot makes it easier to manage stacking without touching a line of CSS.

Mastering the iterative design process: A complete guide

What does it take to make the next big idea come to life in a tangible way that truly helps people? The iterative design approach can be used for any field, but it’s most notable in software development and user interface design.

Tutorial: Creating and using component variants in Penpot

Component variants are a way to create different variations of a component. Does your component need different sizes? Colors? Levels of elevation? Variants make it easy to define these properties, and choose between them when you’re using a component in your designs.