top of page
Search

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.


Artboards

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.


Components

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

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 ‘-’.


Prototyping

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.


Comments

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!

37 views0 comments
KEP_06.jpg

我们专有的网上学习平台,并与免费的创意和生产工具无缝协作,为 DECT 教育即时提供作业和学习材料管理、远端协作、分析等功能,满足不同使用者的学术及管理需求。

OS_02.jpg

培训专业教师计划是维持数谱生态系统的基石。这是一个可扩展的专业发展模式,当中全面的 DECT 内容和学习管理系统可分别为教师提供相关支持。

smiling-young-asian-teacher-making-selfie-with-her-2022-03-30-14-59-24-utc.jpg

学生展才计划为学生提供在全球数字经济中不可或缺的知识、技能和工具, 有助学生掌握在未来世界中出类拔萃的生存技能,脱颖而出。

OS_03.jpg

Krystal OTP 包含所有办公室软件,有效提升日常工作效率和减轻营运成本,为当今多元化 的业务营运需求提供了完善解决方案。  

hand-with-tattoo-point-on-the-cyber-table-2022-12-15-23-00-27-utc.jpg

一项综合计划,旨在为个人 和公⺠提供必要的数字能力和软技能,以便在数字经济中生存。为了在数字时代保持竞争力和繁荣,各国需要为其公⺠提供必要的知识、技能和工具。

DECT_02_OPEN_01.jpg
DECT_06_CP_ERB_B_03.jpeg
DECT_01_AI_02_01.jpg
DECT_03_SC_014_01.jpg
DECT_07_CP_ERB_G_04.jpeg
DECT_05_OTP_05_01.jpeg
DECT_01_OPEN_02.jpg
DECT_06_CP_ERB_C_04.jpeg
DECT_03_AI_06_01.png
DECT_03_SC_016_01.jpg
DECT_07_OLE_17_01.jpeg
DECT_05_OPEN_03.jpg
DECT_01_AI_01_04.jpg
DECT_06_OPEN_02.jpeg
DECT_01_AI_07_01.jpg
DECT_03_OPEN_02.jpeg
DECT_07_OPEN_01.jpg
DECT_05_OTP_05_01.jpeg
DECT_07_I_02_01.png
DECT_06_CS_02_02.jpg
DECT_01_AI_05_02.png
DECT_03_CP_ERB_He_05.jpg
DECT_07_CS_01_04.png
DECT_09_open_01.png
bottom of page