penpot
The open-source solution for design and prototyping.
What is PenPot?
PenPot is a professional, web-based design and prototyping tool used to create user interfaces (UI) for websites and apps. It is Open Source, which means it is free for everyone to use and the code is available to the community.
Shortcuts
🌐
penpot.app
It is useful for:
Wireframing: Sketching out rough ideas for how an app should look.
UI Design: Creating high-quality, colorful, and precise layouts using vector graphics.
Prototyping: Linking your designs together to create a clickable "fake" app that you can test.
Collaboration: Working on the same design with your team in real-time (similar to Google Docs).
How to Get Started
You do not need to install any software to use PenPot; it runs entirely in your web browser.
1
Go to the website: Visit penpot.app.
2
Create an Account: Click the "Sign up for free" button in the top right corner.
3
Sign Up: You can create an account using your school email address and a secure password, or sign in using a Google or GitHub account if you have one.
4
Verify: Check your email inbox for a verification link to activate your account.
5
Log In: Once verified, return to the site and click "Login" to access your dashboard.
PenPot Learning Center
The official place to learn PenPot is their Learning Center. It contains up-to-date guides and video courses on all the main features.
PenPot Learning Center - The main hub for all official tutorials.
Refresher on Flex Layout - Learn how to make your designs responsive (adapt to different screen sizes).
Prototyping Guide - Learn how to make your buttons and menus clickable.
Other Useful Tutorials
Here are some excellent video tutorials from the community to help you master PenPot:
World's Simplest PenPot Crash Course - A fast-paced guide to the interface and basic tools (highly recommended for beginners).
PenPot for Beginners - A slower, step-by-step walkthrough of creating your first design.
Web Page Design with PenPot - A specific tutorial on designing a webpage layout, including masking and gradients.
Task PenPot Beginner Challenges
Complete these three mini-tasks to prove you have mastered the basics of the interface.
1
The Traffic Light
Test your ability to use basic shapes, colors, and grouping.
Draw a dark gray rectangle to act as the box.
Draw three circles inside the rectangle.
Change the Fill color of the circles to Red, Amber, and Green.
Select all shapes and use Ctrl + G (or Cmd + G) to Group them together.
2
The Profile Card
Test your ability to use text and layout tools.
Create a new Board (frame) roughly the size of a phone screen.
Draw a square for a profile picture and give it a rounded radius (Corner Radius).
Add a text box for "Name" and make it Bold and large (24px+).
Add a text box for "Bio" using a smaller, lighter font.
Align everything to the center of the board.
3
The Magic Button (Extension)
Test your ability to use the Prototyping tab.
Draw a button on your board.
Duplicate the entire board.
On the second board, change the button color to make it look "hovered" or "clicked".
Switch to the Prototype tab on the right sidebar.
Connect the button on Board 1 to Board 2.
Press the "Play" button to test if clicking works!
Last modified: January 23rd, 2026
