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 teamComponent 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 palettesColor 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.CSS 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 furtherResizing 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.CSS Grid layout
Use columns and rows to distribute elements in the layout. Organize the content in a very flexible way and implement it easily into code.
Penpotbrings a layout system like no other.
Explore furtherAligning layers
Aligning options to smartly move selected layers to a position relative to one of themDistribute 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.