A developer's guide to Penpot | Design tokens, Grid, Flex & code

Take a full guided tour of Penpot's design-to-code workflow with Laura Kalbag, Educator at Penpot, built around one idea: design as code. Because Penpot expresses every layer as declarative, semantic structure, Inspect mode isn't just a spec sheet — it's real, code-readable structure you can build from. You'll see how Inspect mode lets you copy CSS, HTML, SVG, and Tailwind-compatible code straight from any component, with exact spacing, typography, color, and dimension values included. Flex and Grid layouts, plus native design tokens, enforce correct code structures whatever your target platform — so instead of translating a design by eye, you're pulling from a machine-readable foundation. We'll also cover accessibility and semantic-tagging plugins, components and libraries, team roles and prototyping. Whether you're a developer, a designer, or part of a product team, this walkthrough shows how Penpot bridges the gap between design and code — without leaving your browser. 👉 Dev Tools docs: https://help.penpot.app/user-guide/de... 👉 Penpot AI Workflows https://penpot.app/ai/ai-workflows 👉 Penpot MCP Server https://penpot.app/ai/mcp-server Timestamps 00:00 Intro 00:22 Breakpoints: making the most of modern design features — responsive layouts and design tokens 00:40 Inspect Code: copy and paste HTML and CSS from Inspect mode into the browser (CodePen) to see responsive rendering 01:16 Plugins: generate the exact code you need and create accessible HTML — plugins for semantic tagging and Tailwind HTML 01:48 Integrate AI into your design workflows with Penpot MCP 01:55 Inspect Panel: explore button component details, including design tokens and flex properties 02:35 Flex Layouts: work with CSS Flex layouts using a shared language between designers and developers 03:31 Grid Layout: use CSS Grid with web-friendly fr units 04:23 Design Tokens: native support using the Design Tokens Working Group format — import/export in JSON for easy syncing with development 05:00 Light & Dark Mode: use design tokens to manage themes, brands, and UI states 05:20 Components: switch variants and manage reusable components across multiple libraries 06:21 Project Overview: library files and shared assets across teams 06:46 Custom Fonts: share uploaded fonts to ensure consistency 07:00 Teams: manage invitations and roles 07:15 Design System Documentation: library files with accessibility and system guidelines 07:35 Plugins in Penpot Hub: extend your workflow with plugins, create your own using the Plugins API — accessibility tools like checklists and contrast checkers 08:33 Prototyping: build clickable prototypes for landing pages, tablet view for better visibility, overlay menus and prototyping preview 09:40 Flexible Use Cases: from simple layouts to complex design systems 09:47 Libraries & Templates 10:13 Whiteboard Template: start from a whiteboard directly in the project view 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:   / penpotdesign   Instagram:   / penpot.app   GitHub: https://github.com/penpot PeerTube: https://peertube.kaleidos.net/ Penpot: Full Stack Design #Penpot #openSource #designToCode #designTokens #MCP