Penpot is integrated with Aamu.app. Let’s see what Penpot is all about.

Penpot is revolutionizing the design world as a free, open-source design and prototyping platform that brings designers and developers together like never before. Built on open web standards like SVG, CSS, and HTML, Penpot eliminates the traditional handoff struggles, offering a collaborative, intuitive, and powerful tool for creating stunning user interfaces and prototypes. Whether you’re a solo designer, a developer, or part of a large team, Penpot’s feature set is designed to streamline workflows and empower creativity. Let’s dive into what makes Penpot stand out, including the exciting features introduced up to version 2.7.

Core Features of Penpot

1. Seamless Design-to-Code Workflow

Penpot is uniquely designed to bridge the gap between design and development. It expresses designs natively as CSS, SVG, and HTML, allowing developers to access ready-to-use code directly from the Inspect tab. This eliminates the need for complex exports or translations, making handoffs smooth and efficient. Designers can work with layouts that mirror real-world CSS standards, ensuring the final product aligns with their vision.

2. Flex and Grid Layouts

Penpot’s Flex Layout and CSS Grid Layout (introduced in version 2.0) enable designers to create responsive, adaptive interfaces that behave like real web layouts. Flex Layout works like CSS Flexbox, allowing automatic resizing and alignment, while the CSS Grid Layout (a highlight of version 2.0) lets you distribute elements using rows and columns for precise, developer-friendly designs. These features ensure designs are not only visually appealing but also practical for coding.

3. Components and Design Systems

Penpot’s robust Components system (revamped in version 2.0) allows teams to create reusable design elements and maintain consistency across projects. You can save components to local or shared libraries, organize them with intuitive naming conventions, and sync them across files. Combined with Design Tokens, Penpot provides a single source of truth for colors, typography, and other design values, streamlining collaboration and scalability.

4. Interactive Prototyping

Penpot empowers you to create rich, interactive prototypes that mimic real product behavior. Set triggers, actions, and transitions (like fade, pull, or push) to simulate user journeys. Shareable prototype links allow stakeholders to test designs, provide feedback, and collaborate in real time, making Penpot a one-stop shop for ideation to validation.

5. Real-Time Collaboration

Penpot’s multiplayer environment allows designers, developers, and stakeholders to work together in real time. Features like comments, notifications, and role-based permissions ensure everyone stays in the loop. You can share designs publicly or privately, customize feedback settings, and integrate stakeholders without worrying about licensing costs.

6. Open-Source and Deployment Flexibility

As an open-source tool licensed under the Mozilla Public License 2.0, Penpot is free for all users and fully customizable. You can use Penpot’s cloud service or self-host it using Docker, Kubernetes, or other methods, giving teams control over security and infrastructure. Its open standards ensure zero vendor lock-in, so you own your designs and data.

7. Typography and Visual Design Tools

Penpot offers a Typography Palette for quick application of consistent text styles, along with tools for creating gradients (linear and radial, with multi-stop support in version 2.7), shadows, blurs, and more. Custom fonts can be uploaded to the dashboard, ensuring brand consistency across projects.

8. Infinite Canvas and Templates

Penpot’s infinite canvas provides limitless space to organize designs, from wireframes to high-fidelity UI. The platform offers a variety of templates and libraries (e.g., UI kits, icon sets) to jumpstart projects. You can also contribute your own templates to the vibrant Penpot community.

9. API and Plugin Support

Penpot integrates seamlessly into development workflows with its API and access tokens, enabling automation and custom integrations. The plugin system (expanded in recent updates) allows teams to build and share custom extensions, enhancing functionality for specific needs.

What’s New in Penpot 2.7?

The latest release, version 2.7, builds on Penpot’s strengths with practical enhancements for designers and developers. Here are the key updates:

  • Multi-Stop Gradient UI: Version 2.7 introduces an improved gradients interface with support for multi-stop gradients, giving designers more control over complex color transitions.

  • Fixed Media Asset Handling: A critical bug fix resolves issues with media assets (e.g., fill images), ensuring no broken references in component libraries. A script is provided to correct existing files, improving reliability for teams managing large design systems.

  • Enhanced Workspace Features: Updates include improved path editing, better component management, and refined token handling for consistent design systems.

  • Improved Sharing and Prototyping: New board presets for modern devices, enhanced prototype sharing for editors and viewers, and a redesigned Invitations page make collaboration smoother.

  • Performance Optimizations: For teams with large databases, version 2.7 offers improved processing speeds by allowing parallel file processing, configurable via the max-jobs setting.