Penpot for beginners: a free tool for UI design

Step 1

Sign up and create your first file

Penpot runs in the browser: sign up at penpot.app and create a new file. The cloud Professional plan costs $0, and Penpot describes it as fully featured with no missing tools (up to 10 GB of storage and 8 team members); paid plans differ in storage, version history length and team features. Penpot is open source, so it can also be self-hosted, but you don't need that for learning.

• •pick a learning brief: a sign-in screen, a product card or the home screen of a notes app;
• •save 2–3 references, but don't copy them; write down what works in them;
• •prepare real copy: buttons, headings, error messages.

Step 2

Boards, layers and basic tools

The base of a Penpot file is boards: your screens, for example sized for a phone. On a board you place shapes, text, images and other boards. Layers are on the left, the properties panel on the right. If you've used another design editor, the interface will feel familiar; if not, start with one screen and simple shapes.

• •name boards by meaning: "Login", "Login — error", not "Board 3";
• •group layers logically: header, form, button;
• •set up colors and text styles at the start so you don't pick them every time.

Step 3

Flex Layout and Grid Layout

This is where Penpot is especially useful for learning. Flex Layout is built on the CSS Flexbox standard and has the same properties: direction, align, justify, gap, padding and sizing. You can add it to any layer, group or board from the Design panel or with Shift + A. For two-dimensional grids there's Grid Layout with rows, columns and areas. You learn the tool and, at the same time, how front-end layout works.

• •make a button with Flex Layout: text and icon in a row, a gap between them, padding around;
• •build a sign-in form as a vertical Flex Layout with an even gap between fields;
• •resize the board and watch how the layout behaves: if something breaks, look for a fixed size.

💡 Compare your layout with the CSS in Inspect mode: Flex Layout properties have the same names as in code. More in HTML and CSS for designers.

Step 4

Components and a prototype

Turn repeated elements (buttons, fields, cards) into components: a change to the main component updates every copy. Similar components can be combined into variants, such as a button in default, hover and disabled states. When the screens are ready, link them into a prototype: tapping a button leads to the next screen.

• •start with one button in three states and one input field with an error state;
• •build 2–3 screens of a flow: sign-in, error, success;
• •run the prototype and go through it as if seeing it for the first time.

Step 5

Inspect, export and feedback

Open the Inspect tab in the right panel: it shows distances between layers, each element's properties and a code tab with markup (SVG and HTML) and CSS styles. It's the fastest way to see how your design looks to a developer. Then share the file or prototype and ask for feedback.

• •check text contrast: for normal text, WCAG requires at least 4.5:1;
• •look in Inspect for odd spacing such as 13 or 17 px: it gives away placement by eye;
• •ask a specific question: "Is it clear what to do on this screen?" gets better feedback than "What do you think?".

💡 Penpot has a free video course, the Penpot UI Design Course: UI design theory, hands-on demos and optional assignments. Do the assignments and show the results in the community.