FOSSPicks

UX designer

Penpot

Penpot is a tool that helps designers create and prototype a user interface (UI). A little different from the desktop and command-line utilities that typically fill these pages, Penpot is a web application, designed to run in your web browser and, most usefully, online. Like WordPress, Nextcloud, and Home Assistant, the online element in Penpot is an essential feature that performs such an important role that the application is worth investigating, regardless of how it presents itself. And like those other brilliant web apps, it has a huge Linux bias and a commitment to open source.

Over the past few years, if you worked on any project that required a designer, it's likely the designer will have used a prototyping tool like Penpot. They're used to sketch up various UI designs, present them to the team, make changes, and eventually fix those changes so that developers can start adding whatever functionality is required. This is why similar prototyping tools work best when they're hosted online: It allows a project's various "stakeholders" to access the designs, make their own suggestions, and leave feedback. Penpot can do all of this and a lot more.

While Penpot is a web app and its developers offer their own portal, which is currently free to use, the open source version can be easily downloaded and self-deployed via a Docker image. This also happens to be the default development environment for anyone who wants to tinker with the code. Despite loading via a web browser, the application itself operates much like Inkscape or Scribus, only with additional social and prototyping features. There are shape drawing tools, a freehand mode, paths, curves, images, and text boxes. All are tightly bound to a grid, object boundaries, many alignment modes, and accessible data values for every element. These can then be grouped into reusable objects.

The UI is remarkably quick and responsive. As you might expect from a tool for designers, it really has been beautifully designed. From the icons and expandable menus to the comprehensive example documents that are used to onboard you to the workflow and functionality, you soon forget you're using a web application. In common with other user experience (UX) tools, when you're done with design, it's also possible to build some skeleton functionality into your creations to see how it feels to interact with your proposed interface. This is the prototyping element, and it lets you link one element to another so that transitions can be made with a click. It's simple but likely to be developed further in the future, considering that Penpot is still alpha software.

When it comes to sharing your ideas, you can create teams to allow other users to access specific projects, and projects are chosen from a dashboard before being loaded into a workspace, which is where the creating and editing happens. The open source element in Penpot is obviously important too, not just because one of the first panels you're presented with invites you to get involved with the code development, but also because Penpot makes fantastic use of the SVG format. Penpot uses it for import and export, along with wide browser compatibility and performance. Using SVG means you're never going to be locked into a single application.

Project Website

https://penpot.app/

1. Dashboard and workspaces: Projects are opened from the dashboard into the workspace. 2. Hosted: Host your own project and access Penpot from a browser. 3. Properties: Exact values for every element can be edited. 4. Assets: Easily access styles, assets, buttons, and properties. 5. Canvas: Zoom in and out, group elements, and easily arrange them. 6. Prototyping: Create one-click actions to see how the application might feel and behave. 7. History: Every action is saved and can be recalled or reset. 8. Drawing tools: Forget you're in a browser and draw just like you're using Krita or Inkscape.

System monitor