Penpot logo
Product
Self-Host
AI Workflows
Features
Release notes
Integration & API
Business Cases
Features
Community
Community Space
Ambassador Program
Wall of love
Penpot Fest
Blog
Features
Features
Resources
Learning Center
Penpot UI Course
Plugins
Libraries & Templates
Tutorials
Dev Diaries
Help Center
Pricing
Contact Sales
Log In
Contact Sales
Sign up

Learning Center

Learn more about what Penpot is and why Penpot is right for you, or simply take a tour of Penpot’s interface.
Learning centre illustration
Quick start
Wireframing
Prototyping
Flexible layouts
UI design
Design systems
Design Tokens
Quick start
Wireframing
Prototyping
Flexible Layouts
UI design
Design Systems
Design Tokens

Quick start

Know what you want to create? Use these templates to jump right in. You can also download more templates from our collection.
Template cover
Wireframes
Create wireframes in minutes with our Minimalist kit.
Template cover
Prototypes
See how prototyping works with our template.
Template cover
Flexible layouts
Learn about layouts with our example template.
Template cover
UI mockup
Discover UI best practices with our dashboard design.
Template cover
Pencil Design System
Check out Penpot’s own design system to see how it’s done.
Template cover
Design Tokens starter kit
Explore the design tokens and jumpstart your design system.
Download more Libraries & Templates

Guides

From the basics to the power tools, learn everything you need to do outstanding design with Penpot.

Wireframing

Wireframes are low-fidelity skeleton designs for fast iteration.
Creating mobile UI wireframes using components from the wireframing kit shared library.
Creating wireframes
A tutorial for wireframing with Penpot.
Wireframing: Hands-on live session by Laura Kalbag
Wireframing live demo
A hands-on live demo for creating wireframes.
Wireframing kit.
Wireframing Kit
Use our kit to create wireframes in minutes.
The menu to import Penpot files from the dashboard.
Import files and templates
Learn how to import files into Penpot.

Prototyping

Interactive prototypes help us show exactly how our designs should behave.
Creating interactive prototypes with Penpot.
Creating interactive prototypes with Penpot
A tutorial for creating interactive UI prototypes with Penpot.
Penpot Design System
How to design interactive prototypes
Watch our demo on creating clickable prototypes in seconds.
Mockups of a light and dark mode of a toggle with prototyping connectors.
Prototype examples template
See how prototyping works with our example template.
Plants app
Prototyping hands-on live demo
Watch the hands-on live demo and Q&A for creating prototypes.

Flexible layouts

Create flexible layouts for your designs using flex and CSS grid layouts.
Template cover
Basic layouts template
Use our ready-made layout components.
Hands on cover
Intro to Flex & Grid Layouts
A live demo using Flex and CSS Grid layouts for flexible designs.
Mockup of Flex and Grid Layouts using the words flex and grid.
Why use Flex and Grid layouts?
Learn how Penpot flexible layouts make responsive design easier.
Hands on cover
Advanced Flex Layouts
Dive deeper into flex layouts in our live demo.
Grid and flex layout cover
Grid vs Flex layout
Choose the best layout options for your design.
Grid and layout playground
Grid Layout Playground
Learn how to use grid layout from our template.
Flex and layout playground cover
Flex Layout Playground
Learn how to use flex layout from our template

UI design

Everything you need to know to start designing high fidelity UIs for apps, websites, and more.
Ui Design in penpot course
Penpot UI Design course
Learn core UI skills with our free video course.
Draw a bottle tutorial cover
Beginners' tutorial template
Learn how to create shapes and apply styles.
Hands on cover
Interface design with UI kits
Follow our live demo on using UI kits for UI design.
text settings in penpot
User guide: Text
Learn about Penpot’s fonts, text styles and typographies
Penpot Hands-on color palettes and libraries
Color palettes and libraries
Learn about Penpot’s colors and color palettes.
A collection of button state components.
Create and share components
Make it easier to share and reuse a pattern in your design.
Components board in penpot
Use components and libraries
Create components that work inside any layout.
How to variant blog post cover
Creating and using component variants
Create advanced components for complex design systems.
mockup of the ui of a dashboard
UI mockup
Discover the best practices for UIs with our Sales dashboard design.
Content mockup plugin cover
Plugin: ContentMock plugin
Quickly replace design elements with realistic placeholder data.
Lorem Ipsum Generator cover
Plugin: Lorem ipsum plugin
Generate customizable lorem ipsum dummy text.
freestock search plugin cover
Plugin: Free Stock Search plugin
Find high quality free stock images for your design.
Accessibility plugin cover
Plugin: Accessible Design Checklist plugin
Learn and check off accessible design best practices.
Tables plugin cover
Plugin: Tables pluigin
​​Insert CSV data and create tables from scratch.
path editor plugin cover
Plugin: Penpot path editor plugin
Edit paths using advanced tools.

Design systems

Build design systems to create more consistent user experiences and more efficient design and development processes in your team.
Design system displayed on a penpot project
Design systems with Penpot
All the tools you need to create your next design system with Penpot.
Hands On on intro to design systems cover
Intro to Design systems
Watch a live demo using design systems in Penpot.
Design system with variants hands on cover
Design systems with variants
Learn how to use Penpot’s component variants in a design system.
Penpot Design System
Pencil Design system
Check out Penpot’s own design system to see how it’s done.
Asset library user guide cover
User guide: Assets library
Learn about sharing assets across Penpot projects & teams.
Icons in component board
User guide: Components
Learn about Penpot’s components and variants.
Dragging an icon component onto a design.
How to use a shared icon library
Learn how to use icons from shared llibraries.
Variant examples template cover
Component variant examples
Check out different use cases for variants in our template.
Iconify plugin cover
Plugin: Iconify plugin
Quickly find and use icons from 150+ open source icon sets.
Color palette library cover
Plugin: Create palette from library plugin
Visualize your Penpot color assets on the canvas with one click.
Typescale pluign cover
Plugin: Typescales plugin
Generate a hierarchy of type sizes using a modular scale.
Material theme builder penpot
Plugin: Material Theme Builder plugin
Create and manage your Material assets.
tailwind styles penpot
Plugin: Tailwind Styles plugin
Find and use tailwind styles in your design.

Design tokens

Create native design tokens for your small design decisions as building blocks towards a scalable and maintainable design system
Design tokens highlights cover
Design tokens highlights
Discover the key benefits and main uses of design tokens in under 5 minutes.
Cover of the blog post design tokens with penpot
Design tokens with Penpot
A tutorial for creating and using design tokens with Penpot.
Hands on of practical UI Design
Practical UI Design with Design Tokens
Learn more about using tokens in real projects in our live demo.
Hands on of design system at scale
Design Systems at Scale
Discover advanced tokens use cases.
what are design tokens video cover
What are design tokens?
A quick introduction to design tokens in Penpot.
Intro to design tokens hands on cover
Intro to Design Tokens live demo
Dive deeper into Design Tokens, from the basics to complex use cases.
Shadow design tokens video cover
Shadow design tokens
Learn how to create and use these composite tokens.
Design tokens starter kit template cover
Design tokens starter kit
Download this template to explore design tokens in action.
Color style json file cover
Color styles to JSON file
​​Export your Penpot color styles as an importable design tokens JSON file.
Color tokens plugin cover
Color tokens plugin
Generate color palettes for Design Tokens and Penpot color styles.

Penpot's User guide

Our User guide contains detailed information about Penpot’s interface and tools and how to use them. If you have any questions, you can find answers or ask for help in our Community Space.

Penpot User guide
Community Space
More info about license and contributing

Penpot Certificate

penpot certificate illustration
Ready to prove your Penpot skills with an official certificate?
Validate your Penpot knowledge with CGGE (Computer Graphics Global Entertainment Ltd)
Get your Penpot certificate

Stay in the loop

Receive product and Community updates!
Penpot Newsletter Illustration
Penpot logo
Full-stack Design

Product

  • Design
  • MCP Server
  • Code
  • Collaboration
  • Features
  • Design Tool
  • Penpot VS Figma
  • Penpot VS Adobe XD
  • Penpot VS Canva
  • Penpot VS Sketch

Company

  • About
  • Blog
  • Wall of love
  • Penpot Fest
  • Careers
  • Media Kit

Resources

  • Penpot UI Design Course
  • Plugins
  • Libraries & templates
  • Learning center
  • Tutorials
  • Community
  • Release notes
  • Help center

For Businesses

  • Security & Compliance
  • Pricing
  • Self-host
  • Integration & API
  • Why Penpot
  • Penpot Enterprise
  • Design Infrastructure

Resources

  • Penpot UI Design Course
  • Plugins
  • Libraries & templates
  • Learning center
  • Tutorials
  • Community
  • Dev diaries
  • Help center

For Business

  • Security & Compliance
  • Pricing
  • Self-host
  • Integration &API
  • Why Penpot
  • Penpot Enterprise
  • Design Infrastructure

Company

  • About
  • Blog
  • Wall of love
  • Penpot Fest
  • Careers
  • Media Kit

Use Cases

  • Wireframing
  • Prototyping
  • UX design
  • AI Workflows
Collaborative UI Design

Key Features

  • Penpot MCP Server
  • Design Tokens
  • Design Systems
  • CSS Grid and Flex Layouts

Legal

  • Terms & conditions
  • Privacy policy
  • Cookie policy
  • Data processing agreement
  • Whistleblowing
Made with LOVE and Open Source KALEIDOS Subsidiary SL © 2026