Design
The quick guide to Penpot layouts
You’ve used a design tool before, and you just want to know the basics to help you get started with Penpot layouts. This is the extra quick explainer just for you!
Laura Kalbag
Creating educational materials for Penpot. Designer, developer, author of Accessibility for Everyone, and co-founder of Small Technology Foundation.
Design
The ultimate guide to Penpot layouts
Everything you need to know about Penpot layouts, whether you want static and pixel-precise, or flexible and responsive. Including designing in CSS Flex and Grid.
Design
Background grids vs grid layouts: what’s the difference?
Background grids are guides you use to help you manually position design elements by eye. Grid layouts automate layouts (often responsively) based on the design rules you provide.
Design
Designing with breakpoints and design tokens in Penpot
Learn how to implement maintainable developer-friendly breakpoints with design tokens and themes.
AI
Penpot’s practical guide to multi-directional AI workflows
Learn about practical use cases for design to code, code to design, and design to docs AI workflows with Penpot MCP.
AI
Penpot AI workflows explained
What AI workflows are, how Penpot MCP connects your files to agents, and when they’re worth using on real product work.
Tools
8 advanced Penpot features for product teams (and why you should use them)
Discover 8 advanced Penpot features that help product teams reduce design-to-development friction, create more efficient workflows, and maintain consistency at scale.
AI
Set up Penpot MCP with Cursor in 5 steps and no code
The fastest and simplest way to get started with Penpot and AI workflows from scratch. Learn how to get started with Penpot and Cursor, a code editor with an integrated AI client.
AI
Set up Penpot MCP with OpenRouter and OpenCode in 6 steps
One of the fastest ways to set up Penpot for AI workflows in just 6 steps, no coding required, and only using free, open, and/or low-cost tools.
Code
Practical uses for math functions in design tokens
Penpot design tokens support both basic calculations and complex math functions. Let’s explore how you can use both to level up your design systems.
Code
A practical guide to the design tokens JSON format
Learn about the design tokens JSON file format and how Penpot works with it.
Penpot
6 benefits of design tokens for enterprise teams
Design tokens eliminate inconsistency and speed up designer-developer collaboration. Explore 6 benefits that make them essential for enterprise design systems.