← Back to all guides
Create · Design & prototyping · ~10 min read

Penpot

Live

Design interfaces and graphics, build clickable prototypes, and hand off to developers with real code inspection.

See Penpot in the tool catalogue →

What is Penpot?

Penpot is your design tool - for interface mock-ups, graphics, and clickable prototypes. It's the open-source counterpart to Figma: designers and developers work in the same file, and handoff includes real CSS/SVG code inspection.

How it works: work is organised into projects containing files; each file has pages of infinite canvas. Everything is vector-based and stored in open web standards (SVG), so your designs are never locked into a proprietary format. Collaboration is real-time - multiple cursors in the same file.

Getting started

  1. Log in at your company's Penpot address with your Brundo account.
  2. Create a project (e.g. Website 2026) and a file inside it.
  3. Learn the canvas basics: scroll to pan (or space + drag), Ctrl/Cmd + scroll to zoom. The toolbar's essentials: B board/frame, R rectangle, E ellipse, T text.
  4. Create a board - a frame representing a screen (pick a preset like Desktop or iPhone). Design happens inside boards.
  5. Invite the team: share the file; viewers can comment without editing.

Core concepts

Boards

Frames that represent screens or artboards. Prototypes connect boards; developers inspect boards.

Components

Reusable elements (buttons, cards, nav bars). Change the main component and every copy updates - the backbone of consistent design.

Libraries

Shared collections of components, colours and typography that any file can use - your design system lives here.

Prototype connections

In prototype mode, drag arrows from an element to a destination board: "tapping this button goes to this screen." Present mode turns it into a clickable demo.

Inspect (handoff)

Developers select any element in inspect mode and read sizes, colours, and generated CSS/SVG - no redlining screenshots.

Everyday tasks, step by step

Mock up a landing page

  1. Create a Desktop board (B → preset 1440).
  2. Block the layout with rectangles first: header, hero, sections, footer. Layout before beauty.
  3. Add text (T) with real copy where possible - lorem ipsum hides layout problems.
  4. Turn repeated elements into components as they emerge.
  5. Duplicate the board for variants instead of overwriting a good draft.

Make a clickable prototype for a client

  1. Design each screen as its own board.
  2. Switch to Prototype mode; drag connections from buttons/links to target boards.
  3. Press Present, walk through the flow, and share the view link with the client.

Hand a design to a developer

  1. Share the file with view access.
  2. The developer opens Inspect mode, clicks elements, and copies CSS values and SVG assets directly.
  3. Export any bitmap assets: select → Export in the right panel (PNG/SVG/PDF, 1x/2x).

Tips & good habits

  • Name your layers and boards - "Rectangle 47" costs your teammates minutes every day.
  • Set up colour and text styles in a shared library early; refactoring styles later is painful.
  • Comments in the file beat feedback in chat: pinned to the exact pixel it concerns.
  • Use flex layout (auto-layout) for anything with repeating structure - resizing stops being manual work.
  • Keep an "archive" page in the file for discarded directions instead of deleting them.

Troubleshooting & FAQ

Can we import Figma files? Direct import is limited; SVG import works well. For a team migrating from Figma, plan to rebuild key components - usually faster than expected - and ask Brundo about current migration tooling.

The canvas feels slow on a big file. Split very large files by page or by project phase. Hundreds of high-res images in one file is the usual culprit.

Do clients need an account to view a prototype? You can share view links; for commenting, they'll need access on your instance - ask Brundo about guest accounts.

Where are my exports? Your browser's Downloads folder. For team assets, store finals in Nextcloud under the project folder.

Useful resources

Curated for the version Brundo hosts (community / self-hosted editions) — cloud-only or enterprise-only material is skipped.