Typography can determine the success of your design system because it defines the way users experience information and engage with your product. In this demo, Laura Kalbag—developer, designer, and educator at Penpot—will introduce you to typography design tokens. She'll show how to create, apply, and name typography tokens in Penpot, and build a proportional typographic scale with ease.

Penpot Community: https://community.penpot.app

Follow us:

Deleting a file no longer means it’s gone forever. The Trash is a dedicated space in the dashboard where deleted files and projects live before being permanently removed. From here, you can recover content deleted by mistake or clean things up for good when you’re sure you don’t need them anymore.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

Our second composite design token, the Shadow token, is now here. Until now, you couldn’t save shadows as reusable styles. Now you can create reusable, consistent drop shadows and inner shadows, made of one or multiple layers, fully tokenized and ready to scale across your designs.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

In this video, Juan de la Cruz, designer at Penpot, walks you through our first product release of the year and what it means for designers and teams.

This release includes:

👉 This may also interest you! Join the beta and help shape the future of Penpot by testing the New Render Engine early and sharing your feedback with the team: https://community.penpot.app/t/join-as-a-beta-tester-for-the-new-penpot-render-engine/10175

Try Penpot for free at penpot.app.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

00:00 intro

Sometimes the smallest interactions make the biggest impact. In this video, we introduce a customizable boolean toggle in the properties panel that lets you switch variant states instantly.

With a single toggle, you can move between states in seconds, reducing friction in your workflow and making component exploration faster and more intuitive. A simple change that brings speed, clarity, and control to everyday design tasks.

Perfect for design systems, UI/UX designers, and product teams who care about efficient workflows and thoughtful interactions.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

Managing color design tokens just got easier. In this video, we explore how you can view and edit color tokens directly from the design properties panel, giving you instant visibility and better control during your design workflow.

This improvement removes the need to dig through token lists and helps you work faster. You’ll also see how this sets the foundation for displaying all design tokens wherever they’re applied in the design properties panel in future releases.

Ideal for design systems, UI/UX designers, and product teams focused on clarity, consistency, and efficient workflows.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

Step into the world of Composite Typography Tokens and discover a smarter way to manage text styles in Penpot. In this video, Juan, Product Designer, introduces composite typography tokens that bundle font, weight, size, line height, spacing, and more into a single reusable definition.

👉 One click

Perfect for design systems, UI/UX designers, and product teams looking to maintain visual consistency across products.

#Typography #DesignTokens #DesignSystems #UXDesign #UIDesign #ProductDesign #TypographyDesign #DigitalDesign #DesignWorkflow

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

This release is all about removing friction and giving you a smoother, more connected workflow:

00:00 Intro

Penpot is the free open-source design platform for Design & Code collaboration.

Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more.

Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect.

Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster.

Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

What makes a good component? How can design tokens help improve your design workflow? In this demo, Laura Kalbag, Penpot educator, will update her Penpot template "Prototype Examples", into a more modern, system-based setup. She'll convert the UI to rely on a component library, component variants, and design tokens, showing how these tools make designs easier to maintain, faster to scale, and better for team collaboration. Along the way, she'll explain when it’s worth creating components/variants, how to organize them into libraries, and how to set up tokens (color, spacing, typography), including themes.

Penpot Community: https://community.penpot.app

Follow us:

Penpot: Design as code.

00:00 Intro

As our numbers for self-hosting continually increase, so do the need for a deeper dive to answer burning questions on self-hosting Penpot and making things your own!

Our Penpot Community Hours #3 will have our very own Yamila Moreno and Docker’s Ajeet Raina joining us. and we will take you through the process of self-hosting Penpot, using Docker.

Penpot Community Hours are all about bringing our community even closer: asking questions, discussing set topics, and seeing each other on camera. What you didn’t see is the amazing conversation we had later.