Learn how to use Penpot with step-by-step tutorials created by the Penpot team. Explore core features, workflows, and best practices for designing and collaborating in open-source.
Curated by: Penpot (95 videos)
Design as code, in practice: Elena Torró, Software Engineer at Penpot, walks through Penpot, the open-source design platform, from a developer's point of view, and why the interesting part isn't (just) the handoff: Open standards instead of proprietary formats, shared systems instead of disconnected tools and structured data that can be understood not only by designers and developers, but also by AI agents. Whether you're building a design system, self-hosting your stack, or experimenting with AI-assisted development… Penpot gives you a solid foundation to build on. What Elena covers in the video: 00:00: Why developers should look beyond the handoff. 00:25 Design as code: Inspect Mode in practice. CSS, HTML, SVG code. exact spacing, typography, colors, dimensions... 01:02 Flex Layout is Flexbox, Grid Layout is CSS Grid. Fewer surprises at implementation time. 01:48 Design systems at scale W3C design tokens. 02:24 Components, variants and reusable UI. 02:42 API and AI workflows: plugins, open API, webhooks. 02:59 Penpot MCP Server. AI agents read structured design context instead of screenshots. 03:48 Penpot AI Kit. Better context, lower token cost 04:00 Ownership and sovereignty. Penpot Cloud, or self-hosted with Docker, Docker Compose or Kubernetes. 👉 Penpot MCP Server: https://github.com/penpot/penpot/tree/develop/mcp 👉 Technical guide and docs: https://help.penpot.app/ 👉 Penpot AI Kit: https://github.com/penpot/penpot-ai-kit 👉 Design Tokens Format Module 2025.10 W3C Community Group: https://www.designtokens.org/tr/2025.10/format/ Penpot Community: https://community.penpot.app App: https://design.penpot.app Help: https://help.penpot.app Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org Follow us: * Mastodon: https://fosstodon.org/@penpot/ * Bluesky: https://bsky.app/profile/penpot.app * X: https://x.com/penpotapp * LinkedIn: https://www.linkedin.com/company/penpotdesign * Instagram: https://www.instagram.com/penpot.app/ * GitHub: https://github.com/penpot Penpot: Full Stack Design #Penpot #openSource #designToCode #MCP #designTokens