Penpot logo
Product
Self-Host
AI Workflows
Features
Release notes
Integration & API
Business Cases
Features
Community
Community Space
Ambassador Program
Wall of love
Penpot Fest
Blog
Features
Features
Resources
Learning Center
Penpot UI Course
Plugins
Libraries & Templates
Tutorials
Dev Diaries
Help Center
Pricing
Contact Sales
Log In
Contact Sales
Sign up
New
Penpot AI workflows — Explore now

The Free Open Source Online Design Tool

Penpot is a free and open source online design tool that transforms the way teams and individuals approach design and code collaboration. With a powerful and intuitive interface, it’s easy to use, even for beginners. The wide range of features that Penpot offers, enables designers and developers to work seamlessly creating beautiful designs and prototypes and turning them easily into code.

Create and manage design systems with Penpot

Design and Code

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-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.
Design from the web and for the web
Code
Design

Design and Code collaboration

Penpot makes it easy to design and translate those designs into ready-to-use code from the Inspect tab. With features such as Flex Layout and Grid layout, the fluid workflow and real collaboration that Penpot offers to designers and developers is unprecedented.
Illustration of a design project mixed with code lines
Interactive prototyping

Components

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.

Components

Speed your workflow with the reusable power of components.

Flex-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.
illustration of a hand managing components
Code
Code

Components

Penpot enables component creation and reuse, fostering efficiency and consistency in team projects. It's the perfect solution for scaling up designs in a professional manner.

Templates & Libraries

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

Components

Speed your workflow with the reusable power of components.

Flex-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.
Next level collaboration
Code
Design

Templates & Libraries

Penpot offers a wide range of templates, created by members of the Community and the Penpot team, to help you get started quickly and easily. These templates include UI kits, icons, fonts, presentation slides, wireframes, and many more. Worth checking them out!
Illustration for template and library
Illustration of vector file export
Code
Code

Vector files export

Being a SVG based tool, Penpot allows you to edit vectors and make boolean operations. Additionally, the export and interoperability of files with other tools, not only svg but other formats such as png, jpg or pdf becomes much easier. And now, HTML output available too!
Developer tools

Vector files export

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!

Components

Speed your workflow with the reusable power of components.

Flex-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.
Code
Design

Custom font 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.
Illustration of font management

Custom font management

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!

Components

Speed your workflow with the reusable power of components.

Flex-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.
Public resources

Benefits of Penpot

Penpot is more than collaborative

Penpot makes it easy to collaborate on designs with others in real time. And it goes a step further in terms of collaboration, because Penpot is the only tool that eliminates the handoff, allowing design and code to avoid the lost in translation process that generates so much friction in the workflow.

Penpot is a free design tool

Create beautiful user interfaces in collaboration with all team members. Maintain consistency at scale with components, libraries and design systems. All of it for free!

Penpot gives you freedom and flexibility

Penpot can be used either online on your preferred browser or self-hosted in case you need further security and customization of your server. It also allows you to integrate other tools and plugins to Penpot thanks to the API.

Penpot is easy to use

Penpot has a powerful and versatile interface that makes it easy to create and edit designs, even for beginners. Penpot offers a wide range of features, making it suitable for creating a variety of designs, including websites, prototypes, presentations, graphics, and more.

Penpot is Open Source

Penpot is an open source tool, which means that users are free to customize the tool to meet their specific needs and it's constantly improved by the community. As an open source tool, Penpot also allows companies to host the on-premise option in your server providing more security and control especially for larger organizations.

Penpot is easy to use

Penpot has a powerful and versatile interface that makes it easy to create and edit designs, even for beginners. Penpot offers a wide range of features, making it suitable for creating a variety of designs, including websites, prototypes, presentations, graphics, and more.

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.

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.
Image of an app project in penpot

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.
FAQ
Who can use Penpot?
How do I get started with Penpot?
Are there any design templates available in online design tools?
Does Penpot offer advanced features for experienced designers?
Can I use Penpot for collaborative design work, and what are its collaboration features?
How does Penpot handle version control and design history tracking?
What export options are available for sharing Penpot designs with developers or stakeholders?
Can I create interactive prototypes in Penpot, and how does that work?
What types of projects are best suited for Penpot's design capabilities?

How to use libraries and templates

In the following video we show you the basic notions to start using shared libraries. To learn more about this process follow the links below.

About import & export files
About how to use a Shared Library
More info about contributing and license

More on design features

User guide

Detailed documentation about how to work with Penpot, from the interface basics to advanced functionality. User guide.

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 & templates page.

Support

Get personalized help with Penpot to solve issues and questions about the product.

Contributing guide

Where you’ll find how to collaborate with translations, feature requests, core contributions, bug hunting… Contributing guide.

Contributing guide

Where you’ll find how to collaborate with translations, feature requests, core contributions, bug hunting… Contributing guide.

Community

A public space to learn, share and discuss about Penpot, its present and future with the entire Community and the Penpot core team. Community.

Stay in the loop

Receive product and Community updates!
Penpot Newsletter Illustration
Penpot logo
Full-stack Design

Product

  • Design
  • MCP Server
  • Code
  • Collaboration
  • Features
  • Design Tool
  • Penpot VS Figma
  • Penpot VS Adobe XD
  • Penpot VS Canva
  • Penpot VS Sketch

Company

  • About
  • Blog
  • Wall of love
  • Penpot Fest
  • Careers
  • Media Kit

Resources

  • Penpot UI Design Course
  • Plugins
  • Libraries & templates
  • Learning center
  • Tutorials
  • Community
  • Release notes
  • Help center

For Businesses

  • Security & Compliance
  • Pricing
  • Self-host
  • Integration & API
  • Why Penpot
  • Penpot Enterprise
  • Design Infrastructure

Resources

  • Penpot UI Design Course
  • Plugins
  • Libraries & templates
  • Learning center
  • Tutorials
  • Community
  • Dev diaries
  • Help center

For Business

  • Security & Compliance
  • Pricing
  • Self-host
  • Integration &API
  • Why Penpot
  • Penpot Enterprise
  • Design Infrastructure

Company

  • About
  • Blog
  • Wall of love
  • Penpot Fest
  • Careers
  • Media Kit

Use Cases

  • Wireframing
  • Prototyping
  • UX design
  • AI Workflows
Collaborative UI Design

Key Features

  • Penpot MCP Server
  • Design Tokens
  • Design Systems
  • CSS Grid and Flex Layouts

Legal

  • Terms & conditions
  • Privacy policy
  • Cookie policy
  • Data processing agreement
  • Whistleblowing
Made with LOVE and Open Source KALEIDOS Subsidiary SL © 2026