Release 2.4 is live! Check out our Dev Diaries for all the updates

Features for the whole team and the whole design process

Designers and developers can now finally work in unison to build beautifully designed software experiences that can truly scale up. Penpot is the Open-Source Design Tool for Design and Code Collaboration.

A browser-based design tool that gets the web

Create beautiful user interfaces in collaboration with all team members. Keep consistency at scale with components, libraries and design systems.

Components

Speed your workflow with the reusable power of components.

Flex and Grid CSS Layout

Build flexible interfaces following CSS standards.

Fonts management

Use fonts that you own on your teams.

Fonts management

Use fonts that you own on your teams.

Fonts management

Use fonts that you own on your teams.

Interactive prototyping

Create rich interactions to mimic the product behavior. Share them to stakeholders, present proposals to your team and start user testing with your designs, all in one place.

Interactions

Set triggers and define actions to add interactions to your designs.

Transitions

Add beautiful transitions like fade, pull, push and animations to your interactions.

Flows

Set multiple starting points to match your product customer journeys.

Real-time collaboration

It's teamwork that makes design whole. Penpot provides features that allow designers, developers and stakeholders to collaborate sharing the same space.

Multiplayer

Multiple members can work simultaneously in real-time over the same design.

Comments

Get and provide feedback right over the designs and prototypes.

Share presentations

Create shareable links for your prototypes and presentations of your designs.

Fonts management

Use fonts that you own on your teams.

Fonts management

Use fonts that you own on your teams.

Developer tools

Developers are at the core of Penpot's vision. We make sure they can use it as part of their productivity tools thanks to intuitive navigation and code and properties introspection. The built-in read-only mode brings a great safety net!

Code inspector

Get actual code snippets. Ready to use code for CSS styles and SVG markup.

Properties inspector

Get detailed specifications about the object’s style and content.

Distances and measurements

Easily get measurements and distances between objects.

Public resources

We build this community together. We have built an accessible place to learn more about Penpot. Once you become familiar with it, you can easily start helping other by contributing libraries & templates or even code!

Help Center

Detailed info about how to use Penpot, FAQs, and technical and contributing guides.

Help Center

Youtube channel

You can watch our tutorials and the tutorials made by our community.

Youtube channel

Libraries & Templates

A curated list of files made by the Penpot team and the community that could help you start and speed up your workflow.

Libraries and templates

Fonts management

Use fonts that you own on your teams.

Fonts management

Use fonts that you own on your teams.

More on Design features

Infinite canvas

Design without limits on an infinite canvas where you can organize and scale your designs using the space you need.

Vector manipulation

Being SVG based, Penpot is a powerful tool for editing vectors and making boolean operations.

Components / symbols

Speed up your workflow and keep consistency on your designs with components that can be reused multiple times across the files of a team

Component swapping

Easily substitute component copies with other component copies.

Component annotation

Attach notes and specifications to main components that can be read at each component copy.

Libraries

Store elements and styles so that they can be easily reused. Libraries may include components, graphics, colors and typographies. Libraries can be shared among teams.

Fonts management

If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.

Color picker

A powerful color manager with eyedropper, color profiles (RGB, HSV, Harmony), gradients, and opacity sliders.

Color style assets

Create your color styles, including plain and gradient fills, to configure your color palettes and use them on fills and strokes.

Typography style assets

Save typography styles with a set of reusable properties to create your typography palettes

Color palette

The color palette allows you to have a selected color library in plain sight. Use the menu to easily switch between libraries.

Typography palette

Penpot provides a typography palette to apply your library typography styles at lightspeed.

Gradient colors

Create stunning gradient transitions. Currently linear and radial options, but a lot more is planned.

Advanced styling features

Create and edit shadows, blurs, border radius, strokes, stroke caps and much more.

Flex layout (Auto/Smart)

The Flex Layout allows you to automatically adapt your designs. Resize, fit, and fill content and containers without the need to do it manually. Penpot brings a layout system like no other. Explore further

Resizing constraints

Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints. Combine constraints with Flex layout to build extremely responsive interfaces.

Nested boards/frames

Flexible boards (artboards/frames) that can contain other boards. Boards have options to clip their content and decide whether to show them at the presentations.

Aligning layers

Aligning options to smartly move selected layers to a position relative to one of them

Distribute spacing between layers

Distributing objects allows you to position them vertically and horizontally with equal distances between them.

Searching and filtering layers

Design files can become huge and finding a specific layer might not be easy. Penpot allows you to find layers with a simple search. You can also filter the layers list per layer type.

Freehand tool

The curve tool allows a path to be created directly in a freehand mode.

Grids

Grids are design aids that are used to help you to align content to a geometric structure. In Penpot there are three types of grids: square, columns and rows.

Rulers and guides

Guides that help you align your design objects and rulers to measure them. You can manage their visibility to suit your needs.

RTL support

Diversity and inclusion is one major Penpot concern and that's why we love to give support to RTL languages, unlike in most design tools. If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.

Shortcuts

Shortcuts boost your productivity but are not easy to find and learn. A handy panel in your workspace with categories and filters will help you find the shortcut you need.

History

The history panel keeps track of the latest changes on an opened file, providing details about the object and the change type.

Zoom

The expected zooming options and plus a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.

Nudge amount

Set your desired distance to move objects using the keyboard. Being able to adjust the movement to your baseline grid (8px? 5px?) is a huge timesaver that will improve your quality of life while designing.

Dynamic alignment

Visual cues are shown when moving options for the edges and centers of the objects. Configurable visibility.

Snapping options

You can also manage snapping options to pixels and to grids.

Layers masks

A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape.

Boolean operators

Combine shapes in different ways to create more complex objects. There are five boolean operations available: Union, difference, intersection, exclusion and flatten.

Focus mode

Select the elements of a page you want to work with in a specific moment hiding the rest so they don’t get in the way of your attention. This option is also useful to improve the performance in cases where the page has a large number of elements.

Libraries & templates in app

A module that allows importing a curated selection of libraries and templates files.

More on Prototype features

Interactions

Add rich interactions using triggers (on click, mouse enter, mouse leave, timer…) and setting actions (navigate, overlays, back buttons, opening URLs…).

Transitions

Add beautiful transitions like fade, pull, push and animations to your interactions.

Flows

Design projects usually need to define multiple casuistics for different devices and user journeys. Flows allow you to define one or multiple starting points within the same page so you can better organize and present your prototypes.

View / Presentation mode

A mode to present, share and play the interactions. Perfect to mimic product behaviors and user testing.

Fix elements at scroll

Fix the position of an object when scrolling on the presentation view. Ideal for prototyping fixed headers, navbars and floating buttons.

More on Collaboration features

Multiplayer

Multiple members can work simultaneously on real time over the same design.

Comments

Comments allows the team to have one priceless conversation getting and providing feedback right over the designs and prototypes.

Export objects (PDF, SVG, PNG, JPG)

Set export presets for different file formats, scales and prefixes. Features to manage multiple exports, check the exporting progress and create PDF presentations.

Export files (binary and standard)

Exporting files is useful if you want to share Penpot files with a user that does not belong to one of your teams or you want to have a backup of your files outside penpot.app. You can select between two formats, binary (fast, efficient) and standard (open standard).

Share presentation

Create shareable links for your prototypes and presentations of your designs with permissions to decide who can comment and/or inspect the code at a shared prototype link.

More on Developer capabilities

Code inspector

Get ready to use CSS, SVG and HTML code from your designs.

Properties inspector

An info panel where specifications about style and content of an object can be found and easily copied. Different types of objects can have different sets of properties.

Distances and measurements

You can easily get measurements and distances between an object and other objects and board edges.

Self-host install

Penpot is the only design & prototype platform that allows your team or organization to deploy it anywhere. You can install with Elestio, with Docker or choose other unofficial installing options like a desktop app, Podman or manual installation.

Webhooks

Webhooks allow other websites and apps to be notified when certain events happen at Penpot, allowing teams to easily create integrations with other services or tools.

Plugins system [COMING SOON]

Our plugin architecture will bring the flexibility that devs need to create and publish their own custom extensions. Coming soon!

Access tokens

Use access tokens as an alternative login authentication. They can allow an app to access Penpot's API.

Open API

Get extensive access to objects and properties to enable external rendering, workflow automation, enhanced app functionality, and more.

Extra! Workflow integrations

Bonus! Team & project Management

Teams

A team allows you to collaborate with other Penpot users working in the same files and projects. Create or join as many teams as you need.

Projects

Unlimited projects will allow you to scale up your work and organization.

Multi-page files

Unlimited files with unlimited pages that can have unlimited layers. No limits for creativity!

Shared libraries

You can turn any regular file into a Shared Library. This means that the File Library of this file will be available to other files of projects being worked on by the team.

Users

Roles to manage what members are allowed to do within a team depending on their permissions, including editing and inviting.

Members invitations

Ability to invite multiple people to join a team at the same time using emails. At the invitations section you can check the status of the team invites.

Multi-language UI

Choose among over 30 different languages (RTL supported) and use Penpot in your own language.

UI Themes

Penpot allows you to choose between dark and light UI theme.