Penpot UI design software: A beginner’s guide
Penpot’s free, open-source app helps to document design ideas in a way that’s simple even for those with no design experience.
The most complex innovations often start with a simple process. Penpot’s free, open-source app helps to document design ideas in a way that’s simple enough, even for those with no design experience.
So, even if you’ve never created a digital sketch or mockup before, this step-by-step tutorial will get you well on the path to making the next big thing.
Setting up Penpot
What do you need to begin using Penpot right away? Just your computer. In fact, one of Penpot’s best features is that it runs on your browser, so you don’t have to download or install any additional software. You can even use it on notebook computers with minimal processing power or memory; it’s a lightweight app that only requires you to be online when you use it.
To begin, go to the Penpot site from the latest Google Chrome, Mozilla Firefox or Safari browser. (Other browsers may not offer the best experience.)
You’ll be prompted to set up an account if you’ve never used it before, opting between an email/password login, Google login, or GitHub/GitLab account login.
Finding your way around
With your account set up, you’ll be immediately placed into the Penpot interface, which has three main parts: Dashboard, Workspace, and View Mode. Moving between them is necessary to build, add to, and review your project, as well as share it with others for feedback.
Dashboard
This is where you’ll create, save, and store files, as well as manage the sharing of any projects. If you need to find a past project, go here. You’ll also upload custom fonts to this Dashboard and check it for notifications about team comments or changes. If you want to use a pre-existing template to jump-start your project, it’s located here in the Dashboard.
Workspace
This is where the design magic happens! Draw new designs, drag and drop components, change colors and sizing, and manage design layers. You can also zoom in and out, see who is viewing the project, and check the editing history to undo any unwanted changes. Prototyping and Inspection capabilities can be accessed from the Workspace.
View Mode
When your UI design is ready for review, share it with others from view mode. Not only can you share individual pages as well as complete boards, but this is also where your prototype’s animations and transitions will take effect. Consider this to be the big presentation where you show off your work. When you’re ready to share your designs, you can generate unique share links from the share button.
View Mode also features the Inspect functionality, so details like measurements and distances for each object can be seen. If you need CSS code snippets for styles, you can access them – along with HTML and SVG markup – here too.
Starting your first design
One of the quickest and easiest ways to make your first Penpot design is by starting with a template, the wireframing kit is a good one to start with. Penpot offers a wide selection of kits to modify and adapt to your unique needs, and a hub for plugins, libraries and templates.
You can open any template directly in Penpot from its button on the template page, or download it to your computer and upload it into Penpot later. Finding and using a template is easy, watch this video and learn how to find the right one for you.
By default, the template file will be added to the Drafts section of your Penpot team. You can add new Projects, rename and organize files into your projects from the Dashboard.
Organizing a template
For this example, we are using the wireframing kit. It comes with examples of completed wireframes that you can use as a starting point, but you may not find all of them useful. Start by duplicating or deleting them in the Layers tab on the left hand until you have what you need to edit.
First, locate the layer that represents the app function or view you want to delete. If you aren’t sure which layer goes with which screen, hover over the layer with your mouse and watch which one appears highlighted. Right-click on the layer you no longer want and select Delete. You can also use this hover/right-click method to duplicate a layer, cut and paste it in another location, add it to a board, or rotate it.
Now that you have just the sample screens you want for your project, you can now start with one of them to begin editing. Find one that most matches your idea. It’s okay if you don’t use much of one; deleting it and starting almost completely over is still easier than creating one from scratch, especially if you want to maintain the sizing of the template example.
Adding your own fonts
You’ll most likely want to personalize templates with your own fonts, colors, and other components. To get started using your own fonts, go to the Dashboard and click on the Fonts tab. Here, you can drag and drop font files to use in your UI design and share with the rest of your team. To add fonts, click on the Fonts tab and upload font files by using the Add custom font button.
(Note: Be sure you own the rights to any fonts you use before uploading them.)
With your fonts now uploaded to your Penpot team, you can now resume editing your UI design template.
Editing a template
To begin working on your edited template design, click on the Drafts tab from your Dashboard, then double-click the file thumbnail to open it. You’ll be taken to your project to resume editing. You can begin with any layer that you want to edit by clicking on the layer from the left-hand side.
Once you’ve selected a layer or element in your design, you can adjust the color, shape, size, and more with the tools in the Design panel on the right-hand side of the workspace. One of easiest ways to manipulate elements is by using the shortcuts in Penpot, which closely mirror shortcuts in other design tools, like Blender 3D. Rather than trying to remember all of the shortcuts, you can use shift + ? to bring up the Shortcuts panel. This action brings up the list of shortcuts to select from and the search bar for finding the shortcut you want. From here, you can also customize shortcuts to suit your workflows.
You can also add new elements to your design directly with tools from the toolbar at the top of the workspace. Draw freehand with pencil, make shapes like rectangles and ellipses, change the color palette, or add text. Upload images directly from your computer by choosing the image tool and selecting the image file you want to import.
Your progress saves as you work, but you can see the history at any time by clicking the clock icon on the top of the right-hand side of the screen. It will show you some actions you have taken and give you the chance to go back to that save point. You can also save versions at a specific point and preview your previously saved versions.
Creating a design from scratch
Templates may not be the best fit for your project, and Penpot offers a blank canvas for getting creative with your ideas. To start from the beginning with a new UI design, go to your Dashboard and click the New Project button with the plus sign on the right side of your screen. From there you can add a New file inside the project which will launch in the Workspace.
This Workspace will have no parameters assigned so that you can make infinite use of the canvas. Penpot offers convenient tools for making even your most unique designs more ordered. The dynamic alignment, rulers, and guides help you stay within the limits and make components in a similar size and format. You can also create design systems with shared component libraries and design tokens, and make modern responsive layouts using flex and grid.
Sharing, viewing, and collaborating
Your design is just the beginning of your project, but it’s an important one. With your rough sketch now in digital form, you can ask for feedback from teammates, clients, and stakeholders to help get it to the next stage of reality. Add comments to your design at any time by clicking the speech bubble icon on the left-hand side of the Workspace.
With this icon highlighted, any place you click on the design will create a comment field. Add your notes, ask for advice, or share directions with others. A running notes list will populate on the right-hand side of the Workspace when the Comments icon is selected and active. You can see what others have to say about the project here.
Inspecting elements and code for devs
This is only the beginning of what you can do with Penpot. After your initial design is complete, use the Prototype tab on the right-hand side of the page to add interactions and workflows on how users will experience your design. Or, select Inspect to see screen sizes, CSS code, and other element details to help you plan for the development phase.
Using Penpot with AI workflows
Penpot has created the MCP server so you can build AI workflows that interact directly with your Penpot files. You can enable the MCP integration in your Penpot account settings.
From here, you can generate an MCP key to use with any AI agent or LLM you trust. Check out our Penpot MCP server video playlist for the latest videos on installing and using AI workflows with Penpot.
Penpot plugins
The Penpot team and community have created many great plugins to help you find special assets or use advanced features. You can also easily build your own Penpot plugins for unique functionality for you and your team.
Penpot’s design tools are sophisticated enough for the most advanced platform designs but take little time to master. Even if you haven’t been involved in this stage of UI work, the simple interface and intuitive collaboration tools will have everyone building better things together.
Looking for more Penpot tutorials?
Click below to view one of our other tutorials on how to use Penpot. Wether you are just starting out with the program or have been using it for a while we have interesting guides to help you get creative.
Laura Kalbag
Laura Kalbag
Laura Kalbag
Laura Kalbag
