Penpot Tutorials

The Blender team had a design system problem, and Penpot solved it. Before Penpot, Blender's design team was hacking together HTML and CSS just to keep their UI components consistent. Then everything changed...

Renan, Penpot Ambassador in Brazil, shows how to import tokens directly from a selected linked library into the current file. Check out our complete Penpot 2.16 walkthrough with Juan de la Cruz, 👉 https://peertube.kaleidos.net/w/oujv17aSLPuUix...

Learn how to edit a ruler guide’s position by double-clicking the guide pill, as shared by Sara at dndg, Penpot Ambassador in Italy. Check out our complete Penpot 2.16 walkthrough with Juan de la Cruz, 👉 https://peertube.kaleidos.net/w/oujv17a...

Louis), Penpot Ambassador in France, demonstrates how to copy a board as an image directly to your clipboard for easy pasting in your file. Check out our complete Penpot 2.16 walkthrough with Juan de la Cruz, 👉 htt...

New to AI workflows? Start here. In this video, Laura Kalbag explains the essential AI concepts everyone should know—from LLMs and prompts to agents, tokens, and MCP. A practical introduction for designers, developers, and anyone looking to unders...

What exactly are AI workflows, and why are they becoming such an important part of modern product development? In this video, Laura Kalbag and Juan de la Cruz explain how AI workflows combine structured processes with AI agents to help teams wo...

Discover one of the most impactful updates in Penpot 2.16: Design Tokens for numeric inputs are now integrated directly into the Design panel, just like color tokens. No more jumping between panels to check token bindings or apply system values...

Juan de la Cruz, Designer at Penpot, walks us through what's new in Penpot 2.16. This release introduces WebGL rendering (beta), designed to improve performance when working with large and complex projects, including design systems, multi-page ...

In this video, Juan de la Cruz, Designer at Penpot, introduces one of the latest platform improvements: WebGL Rendering (Beta), a faster canvas for demanding files that users can now enable from their settings. Learn how this new rendering tech...

Juan de la Cruz is part of the Penpot design team, where he’s exploring how AI agents, design systems, and code-readable workflows can actually work together in real product design. In this conversation, he shares what surprised him most about...

Discover why the new Penpot MCP Server changes the way AI agents work with design. In this video, we explore a real workflow using the Penpot MCP Server inside Penpot 2.15. Not just generating random UI, but giving AI agents access to the actua...

Learn how to install and run the local Penpot MCP Server for advanced AI-powered design workflows. In this video, we cover both local installation methods: • Running the MCP Server directly with npm • Installing it from the official GitHub re...

In this quick and practical tutorial, you'll discover how to connect Cursor to Penpot and start building an AI-powered workflow instantly. This setup is just an example. The Penpot MCP Server works with any client, agent, or model that support...

Learn how to set up a Penpot MCP Server Remote in just 5 minutes! In this quick and practical tutorial, you'll discover how to connect OpenCode as a client and use OpenRouter to manage model subscriptions efficiently. This setup is just an exam...

In this hands-on session, we’ll explain the basics of working with Penpot and agentic AI, get you set up with Penpot MCP (and explain what Model Context Protocol means!) Then we’ll look at some of the use cases for using AI workflows in the design...

We tested different AI design tools (Claude, Stitch, Figma, V0 and Penpot) with a complex UI prompt that required more than visual generation: "Design a real estate property card. The design should encourage a non-linear yet coherent visual jo...

Watch this Community Hours session to learn more about the Penpot Ambassador Program. What makes it unique? A peer-to-peer learning model and a collaborative, open library where take aways, resources, and real-world experiences are continuously...

Penpot is the first Open-Source design platform for seamless collaboration between designers and developers. Built on open standards, it gives teams flexibility, control, and aligns with values like transparency, inclusion, ownership, freedom, and...

This short video showcases how Penpot's MCP Server can assist in generating production-ready, semantic HTML and modular CSS from a specific Penpot board. Official Penpot MCP server, already available at https://github.com/penpot/penpot/tree/dev...

Penpot 2.14 brings major improvements to design token management, collaboration, and automation, making it easier for designers and developers to keep systems consistent and scalable. ✨ Juan de la Cruz, designer at Penpot, walks us through th...