Open-Source Meets Design Tooling With Penpot ![rw-book-cover](https://files.smashing.media/articles/open-source-meets-design-tooling-penpot/open-source-meets-design-tooling-penpot.jpg) ## Metadata - Author: [[https://www.smashingmagazine.com/author/atila-fassina/]] - Full Title: Open-Source Meets Design Tooling With Penpot - Category: #articles - Document Note: --- tags: - #open-source - #design-tools - #Penpot Author: Atila Fassina Source: Smashing Magazine Reference: [Open-Source Meets Design Tooling With Penpot](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/) date created: 2024-11-14 16:02 --- # Title: Open-Source Meets Design Tooling With Penpot ## Table of Contents: - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#-notes) - [📖 References](#-references) - [🗣️ Paraphrase](#-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) ## 📝 Summary: The article introduces Penpot, an open-source design tool that fosters collaboration between designers and developers. It highlights Penpot's new Plugin System, which allows users to extend functionality by creating and integrating plugins, even serving them locally. The piece emphasizes the importance of open-source software in enhancing flexibility, accountability, and user engagement. ## 📖 Main Content: Penpot is a free, open-source design tool built on web technologies, enabling seamless collaboration between designers and developers. Its intuitive UI offers functionalities comparable to proprietary tools like Figma. The newly introduced Plugin System allows users to create plugins using templates for various frameworks, enhancing extensibility. This system empowers users to add missing functionalities without delving into the core codebase, promoting a more customizable and user-driven experience. ### 🗒️ Notes - **Penpot Overview**: - Free and open-source design tool. - Built with web technologies; operates in the browser. - Facilitates collaboration between designers and developers. - **Plugin System**: - Allows creation of plugins to extend functionality. - Supports various frameworks with available templates. - Plugins can be served locally, enhancing development flexibility. - **Open-Source Benefits**: - Promotes transparency and user engagement. - Enables self-hosting for increased privacy and control. - Encourages community contributions and rapid evolution. ## 📖 References: - Fassina, A. (2024, November 14). *Open-Source Meets Design Tooling With Penpot*. Smashing Magazine. Retrieved from [https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/) ## 🗣️ Paraphrase: 1. Penpot's Plugin System enables users to enhance the tool's capabilities by creating plugins using templates for various frameworks, allowing for local development and customization. 2. The open-source nature of Penpot fosters a collaborative environment where users can contribute to its development, ensuring rapid evolution and alignment with user needs. ## 📰 Newsletter: **Unlock New Design Possibilities with Penpot's Plugin System** In the ever-evolving world of web development, staying ahead means embracing tools that offer flexibility and community-driven innovation. Penpot, the open-source design platform, has taken a significant leap forward with its newly released Plugin System. This feature empowers developers and designers to tailor the tool to their specific needs by creating and integrating custom plugins. Whether you're looking to add unique functionalities or streamline your workflow, Penpot's Plugin System provides the versatility you've been seeking. Dive into the world of open-source design tooling and explore how Penpot is bridging the gap between design and development. Learn more about this exciting update in [Smashing Magazine's latest article](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/). ## ✅ Action Items: As a Developer Advocate specializing in open-source and WordPress, the insights from this article align with your focus on fostering collaboration and enhancing tooling within the open-source community. Consider the following actions: - **Explore Penpot's Plugin System**: Investigate how Penpot's extensibility can benefit WordPress developers and designers, potentially integrating it into your advocacy and training materials. - **Promote Open-Source Tools**: Highlight Penpot as an example of successful open-source design tooling in your communications, emphasizing its benefits in transparency and community engagement. - **Facilitate Contributor Engagement**: Encourage the WordPress community to contribute to Penpot's development, fostering a culture of collaboration and shared growth. - **Align with OSPO Objectives**: Leverage Penpot's open-source model to inform strategies for establishing an Open Source Program Office, focusing on transparency, inclusivity, and sustainable development practices. ## 🧪 Hypotheses: 1. Implementing Penpot's Plugin System will enhance customization and efficiency in design workflows. 2. Open-source design tools like Penpot can improve collaboration between designers and developers, leading to more cohesive project outcomes. ### 📊 Methodology: - **Data Sources**: User feedback, project completion times, and collaboration metrics before and after implementing Penpot's Plugin System. - **Research Design**: Conduct a mixed-methods study combining quantitative analysis of workflow efficiency and qualitative interviews with users. - **Analysis Techniques**: Utilize statistical analysis to assess efficiency improvements and thematic analysis for qualitative data. ### ❓ Questions: - ::contentReference[oaicite:0]{index=0} - Document Tags: [[design]] [[graphic design]] [[open source]] - Summary: Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let’s explore its newly released Penpot Plugin System. So now, if there’s a functionality missing, you don’t need to jump into the code base straight away; you can create a plugin to achieve what you need. And you can even serve it from localhost! - URL: https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/ * [Atila Fassina](https://www.smashingmagazine.com/author/atila-fassina/) * Nov 14, 2024 * [0 comments](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/#comments-open-source-meets-design-tooling-penpot) ### Open-Source Meets Design Tooling With Penpot * 5 min read * [Workflow](https://www.smashingmagazine.com/category/workflow), [Plugins](https://www.smashingmagazine.com/category/plugins), [Tools](https://www.smashingmagazine.com/category/tools), [UI](https://www.smashingmagazine.com/category/ui) * Share on [Twitter](https://TwItTeR.CoM/intent/tweet?text=Open-Source%20Meets%20Design%20Tooling%20With%20Penpot&url=https%3A%2F%2Fwww.smashingmagazine.com%2f2024%2f11%2fopen-source-meets-design-tooling-penpot%2f&via=smashingmag), [LinkedIn](https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2024%2f11%2fopen-source-meets-design-tooling-penpot%2f&title=Open-Source%20Meets%20Design%20Tooling%20With%20Penpot) [![Atila Fassina](https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6dd1c4c7-7ccc-4871-b300-0031d8c3d9ce/atila-fassina-200x200.jpg)](https://www.smashingmagazine.com/author/atila-fassina/) ###### About The Author Atila Fassina is a Google Dev Expert, member of the [Solid](https://solidjs.com/) DX team, and a [Tauri](https://tauri.app/) advocate. He enjoys making complex code simpler via articles, conference talks, … [More about Atila ↬](https://www.smashingmagazine.com/author/atila-fassina/) ###### Email Newsletter Your (smashing) email *[Weekly tips on front-end & UX](https://www.smashingmagazine.com/the-smashing-newsletter/). Trusted by 200,000+ folks.* Penpot helps designers and developers work better together by offering a free, open-source design tool based on open web standards. Today, let’s explore its newly released Penpot Plugin System. So now, if there’s a functionality missing, you don’t need to jump into the code base straight away; you can create a plugin to achieve what you need. And you can even serve it from localhost! This article has been kindly supported by our dear friends at [Penpot](https://penpot.app/?utm_source=Article&utm_medium=SmashingMag&utm_id=Penpot2.0) whose mission is to provide an open-source and open-standards platform to bring collaboration between designers and developers to the next level. *Thank you!* [![Penpot](https://files.smashing.media/articles/meet-penpot-open-source-design-platform-designers-developers/penpot-logo.svg)](https://penpot.app/?utm_source=Article&utm_medium=SmashingMag&utm_id=Penpot2.0)([Large preview](https://files.smashing.media/articles/open-source-meets-design-tooling-penpot/1-penpot.png)) Penpot is a free, open-source design tool that allows true collaboration between designers and developers. Designers can create interactive prototypes and design systems at scale, while developers enjoy ready-to-use code and make their workflow easy and fast because it’s built with web technologies, works in the browser, and has already passed [33K starts on GitHub](https://github.com/penpot/penpot). The UI feels intuitive and makes it easy to get things done, even for someone who’s not a designer (guilty as charged!). You can get things done in the same way and with the same quality as with other more popular and closed-source tools like Figma. [![Penpot tool](https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/open-source-meets-design-tooling-penpot/1-penpot.png)](https://files.smashing.media/articles/open-source-meets-design-tooling-penpot/1-penpot.png)( Large preview ) #### Why Open-Source Is Important [#](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/#why-open-source-is-important) As someone who works with commercial open-source on my day-to-day, I strongly believe in it as a way to be closer to your users and unlock the next level of delivery. Being open-source creates a whole new level of accountability and flexibility for a tool. Developers are a different breed of user. When we hit a quirk or a gap in the UX, our first instinct is to play detective and figure out why that pattern stuck out as a sore thumb to what we’ve been doing. When the code is open-source, it’s not unusual for us to jump into the source and create an issue with a proposal on how to solve it already. At least, that’s the dream. On top of that, being open-source allows you and your team to **self-host**, giving you that extra layer of privacy and control, or at least a more cost-effective solution if you have the time and skills to DYI it all. When the cards are played right, and the team is able to afford the long-term benefits, commercial open-source is a win-win strategy. #### Introducing: Penpot Plugin System [#](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/#introducing-penpot-plugin-system) Talking about the extensibility of open-source, Penpot has the [PenpotHub](https://penpot.app/penpothub?utm_source=SmashingMag&utm_medium=Article&utm_campaign=PluginsContest) the home for open-source **templates** and the newly released **plugin** gallery. So now, if there’s a functionality missing, you don’t need to jump into the code-base straightaway — you can create a plugin to achieve what you need. And you can even serve it from localhost! ##### Creating Penpot Plugins [#](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/#creating-penpot-plugins) When it comes to the plugins, creating one is extremely ergonomic. First, there are already set [templates](https://penpot.app/penpothub/libraries-templates?utm_source=SmashingMag&utm_medium=Article&utm_campaign=PluginsContest) for a few frameworks, and I created one for [SolidJS in this PR](https://github.com/penpot/plugin-examples/pull/2) — the power of open-source! When using [Vite](https://vite.dev/), plugins are Single-Page Applications; if you have ever built a Hello World app with Vite, you have what it takes to create a plugin. On top of that, the Penpot team has a few packages that can give you a headstart in the process: ``` npm install @penpot/plugin-styles ``` That will allow you to import with a CSS loader or a CSS import from `@penpot/plugin-styles/styles.css`. The JavaScript API is available through the window object, but if your plugin is in TypeScript, you need to teach it: ``` npm add -D @penpot/plugin-types ``` With those types in your `node_modules`, you can pop-up the `tsconfig.json` and add the `types` to the `compilerOptions`. ``` { "compilerOptions": { "types": ["@penpot/plugin-types"] } } ``` And there you are, now, the Language Service Provider in your editor and the TypeScript Compiler will accept that penpot is a valid namespace, and you’ll have auto-completion for the Penpot APIs throughout your entire project. For example, defining your plugin will look like the following: ``` penpot.ui.open("Your Plugin Name", "", { width: 500, height: 600 }) ``` The last step is to define a plugin manifest in a `manifest.json` file and make sure it’s in the outpot directory from Vite. The manifest will indicate where each asset is and what permissions your plugin requires to work: ``` { "name": "Your Plugin Name", "description": "A Super plugin that will win Penpot Plugin Contest", "code": "/plugin.js", "icon": "/icon.png", "permissions": [ "content:read", "content:write", "library:read", "library:write", "user:read", "comment:read", "comment:write", "allow:downloads" ] } ``` Once the initial setup is done, the communication between the Penpot API and the plugin interface is done with a bidirectional messaging system, not so different than what you’d do with a Web-Worker. So, to send a message from your plugin to the Penpot API, you can do the following: ``` penpot.ui.sendMessage("Hello from my Plugin"); ``` And to receive it back, you need to add an event listener to the `window` object (the top-level scope) of your plugin: ``` window.addEventListener("message", event => { console.log("Received from Pendpot::: ", event.data); }) ``` **A quick performance tip**: *If you’re creating a more complex plugin with different views and perhaps even routes, you need to have a cleanup logic. Most frameworks provide decent ergonomics to do that; for example, React does it via their return statements.* ``` useEffect(() => { function handleMessage(e) { console.log("Received from Pendpot::: ", event.data); } window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, []); ``` And Solid has `onMount` and `onCleanup` helpers for it: ``` onMount(() => { function handleMessage(e) { console.log("Received from Penpot::: ", event.data); } window.addEventListener('message', handleMessage); }) onCleanup(() => { window.removeEventListener('message', handleMessage); }) ``` Or with the [`@solid-primitive/event-listener`](https://primitives.solidjs.community/package/event-listener#createeventlistener) helper library, so it will be automatically disposed: ``` import { makeEventListener } from "@solid-primitives/event-listener"; function Component() { const clear = makeEventListener(window, "message", handleMessage); // ... return (<span>Hello!</span>) } ``` In the official documentation, there’s a [step-by-step guide](https://help.penpot.app/plugins/create-a-plugin?utm_source=SmashingMag&utm_medium=Article&utm_campaign=PluginsContest) that will walk you through the process of creating, testing, and publishing your plugin. It will even help you out. So, what are you waiting for? #### Plugin Contest: Imagine, Build, Win [#](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/#plugin-contest-imagine-build-win) Well, maybe you’re waiting for a push of motivation. The [Penpot](https://penpot.app/?utm_source=SmashingMag&utm_medium=Article&utm_campaign=PluginsContest) team thought of that, which is why they’re starting a [Plugin Contest](https://penpot.app/plugins-contest?utm_source=SmashingMag&utm_medium=Article&utm_campaign=PluginsContest)! For this contest, they want a fully functional plugin; it must be open-source and include comprehensive documentation. Detailing its features, installation, and usage. The first prize is US$ 1000, and the criteria are innovation, functionality, usability, performance, and code quality. The contest will run from November 15th to December 15th. #### Final Thoughts [#](https://www.smashingmagazine.com/2024/11/open-source-meets-design-tooling-penpot/#final-thoughts) If you decide to build a plugin, I’d love to know what you’re building and what stack you chose. Please let me know in the comments below or on [BlueSky](https://atila.io/bsky)! Explore more on * [Workflow](https://www.smashingmagazine.com/category/workflow) * [Plugins](https://www.smashingmagazine.com/category/plugins) * [Tools](https://www.smashingmagazine.com/category/tools) * [UI](https://www.smashingmagazine.com/category/ui), Open-Source Meets Design Tooling With Penpot, https://www.smashingmagazine.com/author/atila-fassina/, 01jcp7q465t1f117mzkqe1ard2.