Typography tokens take the spotlight in Penpot 2.11! This release also brings an improved experience for inviting teammates, a refreshed and more informative user menu, and, of course, our unstoppable Variants getting even better. And there’s more good news: we’ve just released our official MCP server! Learn more: https://penpot.app/dev-diaries

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

Follow us:

Penpot: Design as code.

00:06 What's a Component

This week marks the release of Penpot Variants, and this hands-on workshop will guide you through everything you need to know to start using them effectively. Laura Kalbag, Design and Developer Educator, we’ll begin with a quick primer on components and component libraries, then dive into creating variants: exploring how, why, and when to use them in your design work. You’ll see live demos of different use cases for variants, learn how to convert existing components into variants, and understand how to combine components and variants with design tokens to build more consistent, scalable UI designs. By the end, you’ll have practical knowledge and workflows you can take back to your own projects.

00:00 Intro

00:00 - Intro

Penpot is the free open-source design tool 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.

LIVE August 21st - 3-4 PM

We’ve teamed up with Locofy to bring you a powerful plugin that turns your designs to code in a flash! Whether you’re a designer looking to better support devs or a developer aiming to speed up your workflow—this demo is for you.

Join us on August 21st for a special live hands-on demo, where you’ll see the full design-to-code journey in action, with Pablo Ruiz-Múzquiz, CEO at Penpot, Locofy team and, as always, Laura Kalbag, educator at Penpot.

00:00 intro

Feel free to try the plugin here: https://penpot.app/penpothub/plugins/locofy

The 2.9 release brings solid and constant progress on design tokens management —with new typography token— along with smarter text overrides for components, plus a rich collection of quality-of-life enhancements. Watch and find out!

Learn more: https://penpot.app/dev-diaries

Penpot Variants are almost here to bring serious power to your component workflow.

Get a sneak peek at the powerful new functionality coming soon! 🎉

Variants allow you to create and manage different versions of the same component, all while keeping shared properties and connections intact. That means faster workflows, simpler updates, and a smoother design experience across the board.

The release is just around the corner — get ready!

Sign up for free 👉 https://design.penpot.app/#/auth/register

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

Follow us:

Penpot: Design as code.

LIVE: Thursday, June 26th. UTC 3-4 PM

How can we really work day-to-day with Penpot design tokens? Join Laura Kalbag, educator, designer, and developer at Penpot, for an interactive, hands-on session where she’ll walk you through creating a complete UI design using Penpot’s design tokens and our Design Tokens Starter Kit.

You'll learn how to:

1:22 Intro

👉 For a complete set of resources to help you get started with Penpot design tokens, visit our Penpot Design Tokens site: https://penpot.app/collaboration/design-tokens

👉 You’ll find all the info about this live in our community space! https://community.penpot.app/t/ui-design-with-tokens-hands-on-demo-june-26th/8983

👉 Enjoy the entire Hands-on demo series, where we explore real-life designer and developer use cases. https://www.youtube.com/playlist?list=PLgcCPfOv5v56_iRm-lwkdNtgXEP2M-vUA

Penpot 2.8 delivers a powerful set of new features and thoughtful UX improvements. Design Tokens now support multi-file import and export, making it easier to manage complex setups. We’re also working on typography tokens: Get ready! Performance has also been improved for SVG-heavy files, thanks to backend upgrades and ongoing work on a brand-new rendering engine.

This release is packed with smart enhancements to streamline your workflow: AI-powered help built right into the workspace, Ctrl+Shift+Drag to quickly deselect layers, theme syncing with your OS, and refreshed tooltips. Thanks to our community, Penpot now supports Serbian, and the font catalog has grown to include accessibility-focused options like Atkinson Hyperlegible.

Don’t miss the end of the video for a sneak peek at what’s coming next.

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

Follow us:

Penpot: Design as code.

New to design tokens? Start here! In this quick introduction, Laura Kalbag, designer, developer and educator at Penpot, explains what design tokens are and their benefits for your design workflow. The video includes practical examples and demonstrates how to create design tokens in Penpot. Watch the full version of this video: https://www.youtube.com/watch?v=3Yh5vDV8vTg

Also learn more about Design Tokens in our blog: https://penpot.app/blog/what-are-design-tokens-a-complete-guide/

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

Follow us:

Penpot: Design as code.