top of page

Getting started with Penpot? Check out how to use these 6 basic functions!

If you’re working in the field of UX/UI and aren’t familiar with Penpot, this article is for you. Penpot’s greatest strength lies in providing a platform for collaborative design among cross-domain teams. Although it is an open-source design software, it has numerous functions that rival its paid competitors like Adobe XD. The functions we’ll be looking at today are just the tip of the iceberg, but enough to help you get a feel of Penpot.


An artboard appears as a white canvas with fixed edges. You can choose a specific screen or print size based on your design needs.

  • Create artboards: Click on the first square icon directly below the ‘move’ pointer in the toolbar. Click and drag the pointer to create a custom-sized. artboard. You can also choose presets with the most common resolution for devices and standard print sizes at the Design Properties Sidebar.

  • Select and move artboards: Click on the artboard name or over an area without layers. When the borders become green, you’ll have successfully selected it. Once selected, hold the ‘Shift’ key then click and drag the artboard to move it around.

  • Set artboard as thumbnail: Select an artboard and right click. On the menu, choose ‘Set as thumbnail’. The selected artboard will be shown as the file thumbnail on the file card at the dashboard.

Color Palette

The color palette lets you choose colors in the viewport without having to look for the color picker. You can switch between saved color libraries with the menu.

  • Show/hide the color palette: There are 3 ways to do this: From the main menu at the top left of the navigation bar, click the color palette button (circled) on the toolbar, or use the color palette launcher at the color picker.

  • Color palette menu: The menu can be opened by clicking the 3 vertical dots on the left of the color palette. From there, you can switch between color libraries, as well as switch between big and small thumbnail sizes.

  • Applying color: To fill, select the shape and choose the desired color from the color palette. To apply color to stroke, press ‘Alt’ while clicking.


A component is an object or group of objects that are reusable across user files. Components are separated into Main components and Component copies. As all copies of a component used in user files are linked, any changes done to the main component will be reflected in all component copies.

It is also possible to create overrides for specific parts of component copies which allow the copies to keep these unique changes whilst staying in sync with the main component.

  • Create a component: Click and drag your cursor and select an/a group of object(s). Right click on your selection and choose ‘Create component’ from the object menu.

  • Create a folder for components: First create a component. Then rename the component like this: ‘FOLDER NAME/COMPONENT NAME’, such as ‘Buttons/Button-1’.

  • Update main components: If you’d like to apply a change you’ve made in a component copy to the main component, right click on the component copy and choose ‘Update main component’.

  • Component overrides: These are marked with a ‘*’ at the layers list. You can reset overrides and allow the component copy to be affected by the main component by right-clicking the copy and selecting ‘Reset overrides’.


Grids help you align content geometrically. Penpot has three types of grids: squares, columns and rows.

  • Add grids: You can create grids on an artboard. First, select the artboard. On the right sidebar, choose ‘Grids & Layouts’ and click on ‘+’ to add a grid. You can add as many grids as you want.

  • Hide and remove grids: Under ‘Grids & Layouts’, you can find your existing grids. Hover on a grid and you’ll see an eye icon and a ‘-’ icon beside it. To hide, click on the eye. To remove, click on ‘-’.


You can build interactive prototypes by connecting artboards. These prototypes can help you visualize how users navigate through the screens in your product.

  • Connecting artboards: First, open a file with at least two artboards. Then, activate Prototype mode and select an object (shape/artboard/group) to act as the trigger of an interaction. From the selected object, drag a connection to the destination artboard. This automatically creates a flow starting point. You can test how your prototype runs by clicking the play button on the Prototype tab.

  • Fix elements when scrolling: Select an element and go to the Design sidebar on the right. Under the Constraints section, choose ‘Fix when scrolling’. Elements will be fixed in place as you scroll in View mode.


You can use comments to communicate with and leave feedback for team members.

  • Add comments: Click on the comment icon (circled) in the toolbar of the workspace. Then choose where you’d like to leave your comment. After you’ve written your comment, choose ‘Post’ to leave the comment.

  • Reply to comments: Click on a comment (numbered circles), then write your comment in the text box at the bottom of the comment popup.

  • Mark comment threads as read: Click on the checkbox on the upper right of a comment popup and it will disappear from your comments notifications.

Explore the rest of Penpot!

The above functions are just a select few out of the sea of functions Penpot has, but you’re now more familiar with Penpot than when you started! If you’re liking Penpot so far, we recommend this course to have a more comprehensive understanding of Penpot’s many functions and applications.

Not sure if Penpot fits your design style? You can also check out the Penpot community to see what other UX/UI designers have to say about Penpot.

Aside from Penpot, we also publish feature articles on other useful open-source tools. Feel free to check us out on Facebook and Instagram, or contact us directly!

0 次查看0 則留言

我們專有的網上學習平台,並與免費的創意和生產工具無縫協作,為 DECT 教育即時提供作業和學習材料管理、遠端協作、分析等功能,滿足不同使用者的學術及管理需求。


學生展才計劃為學生提供在全球數字經濟中不可或缺的知識、技能和工具, 有助學生掌握在未來世界中出類拔萃的生存技能,脫穎而出。


一項綜合計劃,旨在為個人 和公⺠提供必要的數字能力和軟技能,以便在數字經濟中生存。為了在數字時代保持競爭力和繁榮,各國需要為其公⺠提供必要的知識、技能和工具。


培訓專業教師計劃是維持數譜生態系統的基石。這是一個可擴展的專業發展模式,當中全面的 DECT 內容和學習管理系統可分別為教師提供相關支持。


Krystal OTP 包含所有辦公室軟件,有效提升日常工作效率和減輕營運成本,為當今多元化 的業務營運需求提供了完善解決方案。 

bottom of page