The open-source design platform Penpot, that puts creative control in users’ hands, has just launched its Plugin System. This new feature opens up endless possibilities, empowering designers and developers to tailor Penpot to their specific workflows, automate repetitive tasks, or integrate entirely new capabilities—all while remaining true to Penpot’s collaborative and open-source spirit. This release marks a significant step for Penpot as it continues to prioritize community-driven innovation and adaptability.
And here’s the exciting part: to celebrate, Penpot is holding a Plugin Contest from November 15th to December 15th, 2024, inviting developers to build their own plugins, share their work, and compete for cash prizes! Let’s dive into what this Plugin System offers and how you can get involved.
The Penpot Plugin System: Designed for Flexibility and Independence
Ultimate Customizability
Penpot’s Plugin System is all about flexibility. Developers can use any JavaScript framework, Angular, React, Vue, or even none at all, giving them complete freedom in how they build. The plugin code operates independently of Penpot’s core platform, so there’s no need for specialized knowledge. You simply host your plugin on any platform you like, and it’s ready to go.
Community-Powered Innovation
Penpot has always been driven by its community, and this Plugin System is an extension of that collaborative spirit. Designers and developers now have the tools to build, share, and benefit from each other’s plugins, enriching the Penpot experience for everyone. By pasting a plugin’s manifest URL into Penpot’s Plugin Manager, and following final team approval, users can access and enjoy a whole new set of features.
Safe and Seamless Integration
Each plugin can specify permissions for interacting with different parts of Penpot, like reading or modifying designs, accessing libraries, or managing comments. This permission-based approach ensures plugins stay secure and focused on their intended functions while enhancing your Penpot projects with ease.
Getting Started: Building Your First Plugin
Penpot’s Plugin System makes development accessible for anyone familiar with JavaScript, HTML, CSS, and the basics of the Penpot platform. To make things even simpler, Penpot offers the @penpot/plugin-types and @penpot/plugin-styles libraries, which come packed with tools for styling and seamless API integration.
To create a plugin, here’s the general process:
- Set Up Your Project: Start a new project with your favorite framework or go without one.
- Build Your Plugin Files: Write your main code in a
plugin.tsorplugin.jsfile, where you can define the plugin’s look, feel, and behavior. - Deploy Your Plugin: Host your plugin on a platform like Netlify, Cloudflare, or Surge, then share the manifest URL with users for installation.
Penpot provides templates to make this even easier, including a basic TypeScript starter and framework-specific templates to get you up and running quickly.
To get started, have a look at the introduction how to kick things off. Have a look at this video to help you understand how to install plugins in Penpot:
Penpot Plugin Contest: Create, Share, and Win!
Penpot’s Plugin Contest invites developers, designers, and open-source enthusiasts to showcase their creativity. Running from November 15th to December 15th, 2024, this contest is a perfect opportunity to experiment with the Plugin System, develop unique tools, and win some great prizes!
Contest Highlights:
- Prizes: $1,000 for first place, 20 honorable mentions at $200 each, plus a special “Outstanding” award for an exceptional plugin.
- Judging Criteria: Plugins will be evaluated based on innovation, functionality, usability, performance, and code quality.
- Requirements: All submissions must be open-source, well-documented, and ready for users.
Plugin Inspiration: Ideas for Your Contest Entry
Shape Creation
Starting with shapes is always a good first step. Try creating a plugin that allows quick access to shapes like rectangles, ellipses, or custom paths. Imagine a tool that lets users draw out multiple elements with ease.
javascriptCopy codepenpot.createRectangle();
// or
penpot.createEllipse();Text Customization
Enhance text options! Your plugin could allow users to style text dynamically, including font, size, color, and alignment, or even add custom fonts.
Grouping and Layer Management
Keep projects organized with a plugin that groups or ungroups shapes, making it easy to manage multiple elements in one go. This could be a time-saver for complex designs.
Flex and Grid Layouts
Create responsive, adaptive designs with Flex and Grid Layouts. A plugin that acts as a “Layout Wizard” could help users quickly align and space elements.
Reusable Components
With a component plugin, users could save commonly used assets, colors, and typography styles for easy reuse across multiple projects. Just remember to set the necessary library permissions in the manifest.json!
Color and Typography Libraries
Give users a library for easy access to custom colors or typography styles. This makes it easy to maintain consistency in designs and saves time.
javascriptCopy codepenpot.library.local.createColor();Theme Compatibility
Make your plugin seamlessly integrate with Penpot’s dark and light themes. This ensures a cohesive look, no matter what mode a user is in.
Third-Party API Integration
Connect Penpot to external resources! For example, you could build a plugin that uses Picsum or another image library for placeholder images, or even connect to Google Fonts.
Interactive Prototypes
Turn static designs into interactive prototypes that allow users to navigate between pages or simulate app flows.
Ruler Guides for Precision Alignment
Help users align elements with ruler guides. A simple but effective addition for designs where layout consistency matters.
Commenting Tools
Add a collaborative element by letting users add comments directly to specific parts of the design. Perfect for team feedback sessions.
Animated Transitions
Bring some life to designs by allowing users to add animations or transitions. This can be particularly useful for app and web prototypes, where flow and motion play a big role.
For more detailed examples, check out Penpot’s examples. You’ll find useful templates, code snippets, and practical actions to bring your ideas to life. And if you need guidance, Penpot’s documentation covers setup steps and example code to support you every step of the way.
Let’s Get Started! Your Journey with Penpot Plugins
Penpot’s Plugin System is a gift to its community—a way for everyone to make the design tool exactly what they need it to be. Whether you’re a seasoned developer, a designer with a knack for coding, or just curious to try something new, now’s the perfect time to dive in, build something useful, and contribute to the open-source ecosystem.
Grab your favorite framework (or none at all), and let’s make something great together!