Penpot - FREE Open Source Figma Alternative  ## Metadata - Author: [[WPTuts]] - Full Title: Penpot - FREE Open Source Figma Alternative - Category: #articles - Document Note: --- tags: - #design - #opensource - #figmaalternative Author: Paul C Source: WP Tuts (YouTube) Reference: [Penpot - FREE Open Source Figma Alternative](https://www.youtube.com/watch?v=l2pkHtAl-k0) date created: 2025-08-22 18:45 --- # Title: Penpot as a Free and Open Source Alternative to Figma ## 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 Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) - [✅ Logical Validity](#-logical-validity) - [🔍 DARVO Analysis](#-darvo-analysis) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) --- ## 📝 Summary: Penpot is a free, open-source design and prototyping tool positioned as a strong alternative to Figma. It emphasizes collaboration, plugin support, and the ability to inspect and export code (CSS, HTML, SVG), which the free version of Figma does not allow. With a Figma-like interface, auto layout support, community-driven plugin growth, and integration options with platforms like Web Studio, Penpot is increasingly viable for design teams embracing open source. --- ## 📖 Main Content: Penpot provides a browser-based, self-hostable, and free design environment, supporting collaborative workflows for teams and clients. Its latest updates include plugin functionality, enhanced learning resources, design systems, and compatibility improvements. Compared to Figma, Penpot excels in open-source accessibility and export flexibility but lags in some native integrations and seamless file imports. ### 🗒️ Notes - [00:04](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=4) Introduction - Free, open-source alternative to Figma. - Supports collaboration and prototyping. - Plugin support is newly added. - [01:40](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=100) Interface - Similar structure to Figma (artboards, toolbars). - Easy transition for Figma users. - [03:11](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=191) Design Features - Component system with assets like buttons, search boxes. - Supports auto layout, flexbox, CSS grid. - Export options for guides, shadows, and visual styles. - [04:49](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=289) Interactive Prototyping - Test and connect screen interactions. - Inspect mode reveals code (CSS/HTML/SVG). - [06:30](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=390) Learning & Resources - Expanded Learning Center with tutorials and templates. - Investments have accelerated resource growth. - [08:07](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=487) Plugins - Manage color palettes from design elements. - Generate text with Lorem Ipsum plugin. - Community competition encourages plugin creation. - [09:40](https://www.youtube.com/watch?v=l2pkHtAl-k0&t=580) Web Studio Integration - Free, open-source Webflow-like tool. - Supports drag-and-drop, dynamic data integrations. - Lacks visual CSS grid but allows manual coding. --- ## 📖 References: - [Penpot Official Website](https://penpot.app) - [Web Studio Project](https://webstudio.is) - [WP Tuts YouTube Channel](https://www.youtube.com/c/WPTuts) --- ## 🗣️ Paraphrase: 1. *Original*: “Penpot is basically a prototyping tool that you can use online for free… it is open source which means you don’t have to pay.” *Paraphrase*: Penpot offers a cost-free, open-source prototyping environment accessible via the web or self-hosted, eliminating licensing fees. 2. *Original*: “The inspect option displays detailed information about elements and provides access to CSS, HTML, and SVG code.” *Paraphrase*: Using the inspect feature, designers can analyze elements in detail and retrieve their associated CSS, HTML, or SVG directly. --- ## 📰 Newsletter: 🎨 **Open Source Spotlight: Penpot as a Figma Alternative** Designers craving freedom from subscription walls should explore [Penpot](https://penpot.app). This free, open-source design platform now supports plugins, interactive prototyping, and direct access to code exports (CSS/HTML/SVG)—something even Figma’s free tier doesn’t offer. With its Figma-like interface, Penpot ensures an easy learning curve while adding collaborative power for teams. Bonus: Pair Penpot with [Web Studio](https://webstudio.is) for an open-source web design workflow. Perfect for WordPress professionals who want to integrate designs seamlessly without vendor lock-in. --- ## ✅ Action Items: - Connect Penpot’s collaborative workflow insights to open-source contributor onboarding strategies in WordPress. - Apply plugin development lessons to WordPress’s extensibility model, showcasing community-led innovation. - Highlight Penpot’s code export as an educational tool for teaching contributors about design-to-code workflows. - Frame Penpot’s growth as an example for OSPO advocacy: how investments accelerate adoption and resource development. --- ## 🧪 Hypotheses: - Open-source design tools with plugin ecosystems can rival proprietary incumbents in adoption. - Export-to-code features reduce the gap between designers and developers, enhancing collaboration. ### 📊 Methodology: - Conduct usability testing comparing Penpot and Figma workflows. - Survey teams using open-source design tools to assess productivity gains. - Analyze adoption trends tied to plugin ecosystem growth. ### ❓ Questions: - How does Penpot’s plugin system scale compared to Figma’s? - Can Penpot’s inspect-to-code functionality improve developer handoff efficiency? ### 🔮 Future Research: - Explore integration pathways between Penpot and WordPress block editing. - Assess community growth models in open-source design ecosystems. ### 💡 Implications: - Open-source design tools could reshape digital design education and practice, lowering barriers for new creators. --- ## 🧠 Learning Styles Assessment: - **Visual**: Strong, with artboards and prototyping interfaces. Add flowcharts for plugin workflows. - **Aural**: None. Could add podcasts or voice tutorials. - **Verbal**: Clear descriptions, but storytelling analogies could improve retention. - **Kinesthetic**: Strong—interactive prototyping and code export. - **Logical**: Present via code inspection. Could benefit from structured problem-solving examples. - **Social**: Collaboration features support teams. Add community discussion links. - **Solitary**: Learning Center provides self-study. Journaling prompts could improve reflection. - **Naturalistic**: No environmental analogies. Could include sustainability references in design systems. --- ## 📊 Accessibility Assessment: - No mention of alt-text, semantic HTML, or keyboard navigation. - Improve by ensuring plugin ecosystem supports accessibility features. - Contrast and resizing: unspecified; recommend WCAG alignment. --- ## 🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment: - Inclusive language present; culturally neutral. - Could expand representation in templates and examples. - Neurodiversity: Needs shorter paragraphs and chunked information. --- ## ✅ Logical Validity: - Arguments are consistent: open-source = accessibility + flexibility. - Strong causal reasoning: plugin ecosystem → increased adoption. - No major fallacies, though some “feature comparisons” risk hasty generalizations without evidence. --- ## 🔍 DARVO Analysis: - No DARVO tactics identified. - Tone is informative, not defensive. - No denial, attacks, or reversal patterns present. --- ## 🔍 SEO Evaluation: - Keywords: “Penpot,” “Figma alternative,” “open source design” are naturally used. - Title tag is optimized; meta description could be shorter - Summary: Looking for an open-source alternative to Figma? In this video, we revisit PenPot, a free, open-source prototyping tool packed with new features, including the exciting addition of plugins! I'll walk you through the latest updates, explore its interface, and highlight why PenPot might be a great choice for your design and collaboration needs. Whether you're designing for websites and mobile apps or creating responsive layouts, PenPot offers a robust set of tools to get the job done. We'll cover: - What is PenPot? A quick overview of this free, self-hostable design tool. - New Features: Dive into the plugin system and how it expands PenPot's capabilities. - Interface Walkthrough: A detailed look at the design, prototype, and inspect tabs. - Code Integration: How PenPot lets you view and copy CSS, HTML, and SVG code directly. - Learning Resources: Explore the Learning Center, templates, and design systems to speed up your workflow. - Comparison with Figma: Pros, cons, and limitations of PenPot vs. Figma. Plus, I’ll introduce WebStudio, an open-source alternative to Webflow, for those looking to continue the open-source ethos in their website-building process. WebStudio offers a familiar interface, dynamic integrations with tools like Airtable and Notion, and flexibility for creating modern, database-driven websites. If you're curious about open-source design and development tools, this video is for you! Links & Resources: - PenPot: https://penpot.app/ - WebStudio: https://webstudio.is/ - Related Tutorials: https://youtu.be/GiG4QCAgZWU?si=ljoZmcdSz916UMz- 00:00 - What is Penpot? 01:49 - Exploring Penpot 06:54 - Penpot Plugins (New Feature) 09:36 - More Open Source Design Tools #PenPot #OpenSourceDesign #FigmaAlternative #WebStudio #PrototypingTools #WPTuts Take your WordPress website and skills to the next level! ► The Essential Web Designer's Documents Pack Looking to take your web design business to the next level? The Essential Web De... - URL: https://youtube.com/watch?v=l2pkHtAl-k0&si=wzQFHVgPX__OAQuw Today we're going to back and revisit PenPot, an open source Figma alternative that has had a lot of new features added since I last looked at it. One of the key new features that have been added very recently is the ability to start using plugins. I'm going to show you that as part of this, but I also want to go over why you may want to consider this, some of the pros and cons of the features that have been added into it, and just have an overview of exactly what you can do with PenPot. Now, if you don't know what PenPot is, it's basically a prototyping tool that you can use online for free. It's open source, which means you don't have to pay. You can use this as much as you want. You can even self-host it if that's the way you want to go. Now, this is an alternative, like I say, to Figma, so you can easily use this tool to design prototypes for websites, for mobile applications, and you can use it as a general design tool should you want to. But it kind of really is aimed at those sort of mobile responsive designs and website designs. That's kind of where all the tools are kind of aimed at. Now, while it excels in the ability to help you design, it also opens up collaboration options, and that's one of the strengths that you have with PenPot. It is really focused around collaboration, so if you work as part of a team, or you just want to collaborate with your client, this may be a really good option to do just that. Now, on top of that, you also have the ability to see the code these days, which is something you can't do in the free version of Figma. That's kind of been removed. You can prototype with this, you can view your code, you can copy your code, your CSS, SVGs, all those kinds of good things. So, with all these things and the open source nature, it is a very viable option. However, there are some things that you can do in Figma that you can't do inside PenPot, and natively, you can't take your Figma files and import them into PenPot. Although, there is an add-on for Figma that allows you to do that, but I haven't tested to see how feature-rich and how successful it is on more complex designs. If you want me to, let me know in the comment section down below. I can take a look at that for you. Okay, so now we've kind of have a very, very brief overview of what you can use PenPot for. Let's jump into the interface and take a quick look with the project open, and some of the features that are available. So, here we have a sample project open, and if we take a look at the interface, you can see it looks very, very similar to what you see in something like Figma. Now, the left-hand side, you've got your structure. So, you've got your various different pages, you cover design, main components, and so on. Then, you've got your designs all sectioned up onto different artboards. So, for example, if we select this onboarding, this is the onboarding artboard, and all the relevant pieces inside there are making up that artboard. So, you consider an artboard like a page on your actual mobile device or a website page, you get the idea. So, if we take a look at this, you can break things down on the left-hand side, expand these out, you can see the various different components like the text, the images, those types of things. Very simple and self-explanatory. Then, across the top, we've got our typical toolbar. Again, we're seeing the same kinds of tools inside here that you'd see inside Figma. So, if you are moving over or you want to try this out, the learning curve should be pretty shallow if you're coming from Figma, because it operates in a very similar fashion. So, you've got your option to create new artboards, for example, which we can simply drag out, create an artboard. All the options then over on the right-hand side to set this up for the size. You can use presets inside here. So, again, you've got your standard kind of presets. Maybe you want to work on something like an iPhone 12. There's the resolution and everything sets up for your job done. And then you can start building this out by adding in what you want from the top toolbar, importing things. You can also use various different assets. So, if we come over here, we've got our local assets, our components. So, maybe, for example, we want to bring in the search box, or we can simply drag that in. There's our component added into our design, and we can carry on adding more options. So, we may want to add in, for example, a button. We'll add this button into the bottom. You can kind of get the idea. You can build these up using the components function in a very similar way that you can do inside Figma. Then, if we take a look over on the right-hand side, you'll see we've got design, prototype, and inspect. So, under the design tab, all those normal things you want for alignment, styles, typography, configuring, all those different options. You've also got the options inside here, which was added not that long ago, to use PenPod's version of auto layout. So, you have those options if you want to create a scalable using Flexbox or CSS Grid, adhering to the standards. PenPod allows you to do that in a very simple and straightforward fashion. So, all those same kind of options are available. We can export our guides, blur, shadows, and so on. So, the things you're kind of used to seeing inside a tool like Figma. So, maybe you want to add a shadow in. Come in, add your shadow. Choose a drop shadow, and you can see if we zoom in, our drop shadow is being applied. And obviously, we can control this if we want to. Expand it out, inner shadows, drop shadows. You kind of get the idea. You can customize it. If we jump into prototype, this is where you can test out the interactions. In other words, you can see how various different parts of your site will work when people interact with it. So, we jump into the prototype. This is where you can create your connections. So, if you want to create a connection between a button, for example, and the next screen, you get the idea. You can do that here. And if we want to take a look at this, we can run this. And this is now our interactive design. So, broken down, so any different elements we can click on will be shown to us. So, you can sort of step through. As we step through, we can see the design. Anything that kind of highlights in green will show us that's an interactive element. So, we can click here, for example. It'll take us to this page. We can use the back arrow to go to the previous page. You kind of get the idea. You can set up those interactions inside here if you want to. Then, finally, across the top, we have the inspect option. So, the inspect, if we choose an element, so, for example, we'll grab this particular screen, you can see we can deal with the info, which will tell us the basic information about the size of the resolution of the screen and so on. But we can also hop into the code section. And inside there, we have the code broken down into CSS and HTML and SVG. So, you can see all our code is available to us inside here. So, if you want to grab this, you can grab it. If you just want to use it to inspect it, make sure that everything is set up correctly when you're designing this and moving it over to the actual design tools, then you've got all those options here should you want to use them. So, there's all the kind of key things that you should need to be able to use PenPot effectively to be able to design and build out your sites. Now, if you're moving over to PenPot and you're kind of new to this, there's an awful lot of really useful resources available to you to help smooth the sort of learning process. You can see you've got the Learning Center, which is where we can take a look at things like Quickstarts, we can do wireframing, lots of tutorials and help inside here. You've also got the plugins, which we'll come back to in a moment, libraries and templates. So, if you want to deal with something like a design system, you've got design systems available to you here. As you see, this is completely free. You can download this, use this then inside PenPot and create your design system without having to build every single thing from scratch. So, the resources now are opening up what you can do with PenPot, whereas when I took a look at it before, there were nowhere near as many options available to help you not only learn, but also speed up your development process like we have now. The injection of, at the time, about 8 million, I think, into PenPot has definitely helped push this forward considerably over the last sort of 12 to 24 months. Now, if we jump back into PenPot, we've got a new option for plugins. We can use the keyboard shortcut or we can click on the plugin symbol. So, we're going to click the plugin symbol and this now shows us a dialogue that allows us to install plugins. For this, let's take a quick look at the more plugins option, which will open up the plugins section on the PenPot website. Now, at this point in time, there are not that many available. There are some useful ones, but I can see this is something that's going to grow. They're running a competition at this point where people can create their own plugins, upload them, get ranked and potentially win prizes. So, hopefully, this will incentivize more people to get involved in the project and create these plugins to expand what you can do with PenPot itself. Let's take a quick look. You've got things like type scales. So, this will tell you, "Creates a harmonious type system with one click. Choose from a selection of commonly used proportions to enter." Let's install it. Let's take a look. Simple option, install, job done. Now, we can say allow and we can try the plugin or we can say not now. Let's say not now and let's go to our project. So, now coming back into PenPot, we can now take a look at how we can use these various different plugins. We can use the option at the top to open our plugins backup and that will list all the plugins we have. If we want to, we can open them from here or we can delete them if we don't want to use them again. You'll also notice this little flyout at the bottom which we can then use some of the options inside there as well. So, a couple of different ways, including keyboard shortcuts to access these things. Let's come up to the option at the top and let's say we want to create a color palette from our library. Let's open this. There's our color palette. Simple as that. That's now been created. If we come back to our layers, there's our palette. Let's move this around. We now have a color palette created from the various different elements that we've got built up inside our design. So, you can see there's our accent color or notification is called here, which is being used in the little sort of dots where we've got an item in our shopping cart or the number of items in our shopping cart and so on. Then the various different colors that we're using inside the project. So, then it's very easy now to be able to grab these values, use those in your design system, use those when you're actually building the site, you kind of get the idea. You've also got the lorem ipsum. For example, let's say we want to add some text in. I don't want to type it. Let's just simply delete this content. We've got a text box available. Now, what we're going to do is come up to our plugins, open up the lorem ipsum. What we're going to do, generate paragraphs, sentences, words, characters. Well, let's say we want to generate one paragraph. Start with lorem ipsum. That's fine. Auto close once you're finished. Yep, sure, why not? Hit generate. There's our content generated. Unfortunately, it's a little bit too much for what we want there, but it saves us the time of having to go and actually, you know, write all this up, just delete that extra bit. Job done. Saved ourselves some time. So these plugins open up some additional possibilities. It's still pretty limited, like I say, at this point in time, but it is a good starting point. Now, let's say that you've finished doing your design inside the open source pen pot and you want to continue that open source ethos, but you don't necessarily want to use WordPress. What options do you have available? Well, one that I took a look at recently is called Web Studio. Now, Web Studio is very similar in certain respects to Webflow. So if you're moving over from that platform, this is going to, again, feel very familiar. However, one of the benefits of this, like I say, is totally open source. So you don't have to pay anything. If you want to use this online, then host it yourself. If you want to use their hosting facilities, there is a cost involved. But you can very easily create your design inside Web Studio. And as you can see, it does look very, very familiar if you're coming over from something like Webflow. Now, the left-hand side, again, you've got your navigator, which is your structure for your overall design. If we take a look, you've got your different elements. You can add all components, as they call it. So you've got your drag and drop options for things like boxes, links, and so on. You've then got pages, so you can structure all your page structure inside here for your overall website. You've got your various different navigator sections, like I say, which shows you all the various different components or elements that you're using to create your overall design. As you can see, it's a pretty simple design, but looks quite nice. All your different assets, so you can upload images here and so on, logos and things like that. And you've also got the marketplace, then, if you want to access things like animation, pages, integrations, and so on. The cool thing and the useful thing about working with something like WebStudio, if you want to have database connections, you don't have to have a really complex integrated into WebStudio itself. You can use external services, things that you may already be using or comfortable with. So things like Notion, Airtable, BaseRow, Ghost. You can connect this up to Webflow and pull your data in from those sources and have a dynamic website, so you get a kind of content management system setup without having the database installed as part of WebStudio itself, which is another nice option and gives you more flexibility. You can even use WordPress, so you can have a kind of headless WordPress design setup. Then on the right-hand side are all the options for designing and configuring everything. So you can work with classes, CSS classes have just been brought in, so you've got variables and things you can use. You can integrate this with something like Core Framework and pull in the variables that you use in there, bring those directly into WebStudio and you speed up that whole design process. I've got videos on that you can check out here and linked in the description as well. So when you're designing, most of the options you're used to are listed inside here. One of the downsides at this point in time is if you are a CSS grid user, you can use it in WebStudio, but it means you have to manually code it as opposed to a nice visual way of working. You may be used to if you're coming from something like Bricks Builder and so on. But it is available, you can use that technology, it just isn't integrated into the platform itself at this point in time. My understanding is that is coming in the future. So that's PenPort and also a quick look at WebStudio and why you may want to consider using these as your design and prototyping and then your building tools if you want to embrace that open source ethos and you don't want to use WordPress. But as always, I'm going to pass things over to you. What are your thoughts on these tools? Do you have alternatives you'd like me to check out? Let me know in the comment section down below. As always, all applicable links are in the description. My name is Paul C. This is WPTuts and until next time, take care., Penpot - FREE Open Source Figma Alternative, WPTuts, 01jdxd4t1kvgyensaqkjq442pr.