Figma to Penpot Export Plugin  ## Metadata - Author: [[Penpot Community]] - Full Title: Figma to Penpot Export Plugin - Category: #articles - Document Note: --- tags: - #design-tools - #penpot - #figma Author: Sonisl (Penpot Community Member) Source: Penpot Community Forum Reference: https://community.penpot.app/t/figma-to-penpot-export-plugin/5554/11 date created: 2025-06-19 18:50 --- # Title: Figma to Penpot Export Plugin Discussion and Development ## Table of Contents:  - 📝 Summary - 📖 Main Content - 🗒️ Notes - 📖 References - 🗣️ Paraphrase - 📰 Newsletter - ✅ Action Items - 🧪 Hypotheses - 📊 Methodology - ❓ Questions - 🔮 Future Research - 💡 Implications - 🧠 Learning Styles Assessment - 📊 Accessibility Assessment - 🌍 DEIB Assessment - ✅ Logical Validity - 🔍 DARVO Analysis - 🔍 SEO Evaluation - 🎯 Conclusion ### References: - Penpot Community Forum Thread: https://community.penpot.app/t/figma-to-penpot-export-plugin/5554/11 ## 📝 Summary: This forum thread centers on the ongoing discussion and incremental development of a plugin to export Figma designs into Penpot, an open-source design and prototyping tool. Contributors collaborate on challenges related to file compatibility, SVG handling, and user experience in the export-import workflow. The conversation reflects community-driven innovation to bridge gaps between proprietary and open-source design ecosystems. ## 📖 Main Content: The thread captures multiple community voices troubleshooting and improving a Figma-to-Penpot export plugin. Key themes include technical hurdles converting Figma’s JSON and SVG data into Penpot-compatible formats, managing component structure, and retaining design fidelity. Participants share code snippets, test results, and suggest architectural approaches to optimize the plugin. Some propose incremental strategies to support critical design elements first, with plans to expand functionality later. Discussions also consider how to handle vector graphics, text layers, and styles to maintain consistency. The collaborative tone underscores the value of open source tooling that empowers designers to migrate from proprietary platforms like Figma to Penpot without losing productivity or design quality. The thread illustrates a grassroots development model with active peer feedback and iteration. ## 🗒️ Notes - Objective: Build an export plugin from Figma to Penpot for seamless design migration. - Aim to parse Figma’s file formats accurately. - Handle SVG and vector graphic conversions effectively. - Challenges discussed: - Complexity of Figma’s JSON structure. - Preserving component hierarchies and constraints. - Managing text styles and fonts during conversion. - Handling interactive components and prototyping data. - Development approaches: - Incremental support for core shapes and layers. - Testing with diverse design files for robustness. - Use of open-source libraries for SVG manipulation. - Community code reviews and shared debugging. - Community involvement: - Active sharing of progress updates and troubleshooting. - Suggestions for feature prioritization. - Calls for testers and feedback from designers. - Broader context: - Importance of open-source alternatives in design tooling. - Reducing dependency on proprietary tools like Figma. - Enabling design freedom and collaboration in open ecosystems. ## 📖 References: - Penpot official documentation: https://penpot.app/docs/ - Figma API reference: https://www.figma.com/developers/api - SVG specification: https://www.w3.org/Graphics/SVG/ ## 🗣️ Paraphrase:  1. Original: "We need to focus on properly translating Figma’s vector data and component structures to ensure the designs import correctly into Penpot." Paraphrase: "Our priority should be accurately converting Figma’s vector graphics and component hierarchies so that designs appear correctly once imported into Penpot." 2. Original: "Community feedback is crucial to identify edge cases and improve the export plugin’s reliability and usability." Paraphrase: "Input from users helps us find unusual issues and make the export tool more stable and user-friendly." ## 📰 Newsletter: Hey design and WordPress friends! Exciting news from the open-source design world — Penpot’s community is actively developing a Figma-to-Penpot export plugin, aiming to help designers move projects seamlessly from the popular proprietary tool into the fully open-source Penpot environment. This ongoing effort is packed with real-world testing, code collaboration, and problem-solving around SVG conversion, component fidelity, and more. Why does this matter? Designers seeking freedom from vendor lock-in or looking to embrace open-source tools now have a path forward. Plus, this effort highlights how community-powered development accelerates innovation and improves tool interoperability. Stay tuned as the plugin evolves and join the conversation or test the latest builds. Let’s support open ecosystems that fuel creativity and collaboration! 🎨✨ ## ✅ Action Items: - Monitor the plugin development progress to provide feedback from the WordPress/open-source design community. - Advocate for integration of Penpot in WordPress design workflows and developer tooling. - Facilitate workshops or tutorials on transitioning from Figma to Penpot using this plugin. - Encourage cross-community collaboration between WordPress developers and open-source designers. - Promote awareness of open design tools as part of sustainable, vendor-neutral web development. - Support inclusivity by translating plugin documentation and onboarding resources. - Highlight this project as a case study in open-source tool interoperability and community-driven innovation aligned with OSPO goals. ## 🧪 Hypotheses: - The availability of a Figma-to-Penpot export plugin will increase Penpot adoption among designers currently using Figma. - Incremental development with active community feedback accelerates the resolution of compatibility challenges. - Open-source design tooling fosters better integration opportunities with open-source CMS ecosystems like WordPress. - Handling SVG and component fidelity accurately reduces user migration friction and preserves design intent. ### 📊 Methodology: - User surveys assessing ease of migration before and after plugin availability. - Code quality and bug tracking metrics to evaluate incremental development effectiveness. - Usage analytics of Penpot adoption linked to plugin release milestones. - Comparative studies on design fidelity between original Figma files and Penpot imports. ### ❓ Questions: - What are the major technical bottlenecks in translating complex Figma designs to Penpot? - How can the plugin best manage evolving Figma API changes over time? - What features are most critical for designers to preserve during migration? - How might open-source communities better collaborate on tooling interoperability? ### 🔮 Future Research: - Automated testing frameworks for design file conversions between different tools. - Enhancing Penpot’s native import capabilities to reduce reliance on external plugins. - Investigating user experience impacts when switching design platforms mid-project. - Developing cross-platform design standards to ease interoperability. ### 💡 Implications: This plugin’s development and adoption could: - Empower more designers to adopt open-source tools, reducing dependency on proprietary platforms. - Stimulate ecosystem growth around Penpot and other open-source design applications. - Strengthen open-source design and development pipelines, enhancing WordPress and beyond. - Serve as a model for community-led open-source innovation bridging proprietary and free software worlds. ### 🧠 Learning Styles Assessment: **Readability:** Moderate technical; forum style with code and developer jargon. 1. **Visual Learners:** - Present: Some code snippets and informal diagrams via discussion. - Improve: Add structured flowcharts or visual mapping of data transformations. 2. **Aural Learners:** - Present: No audio content. - Improve: Recommend podcasts or video discussions summarizing progress. 3. **Verbal Learners:** - Present: Rich with technical language, explanations, and examples. - Improve: Supplement with glossaries or more narrative cont - Summary: 🎉 Improvements to the Figma to Penpot migration plug-in! Hello everyone 👋 We’re excited to share the latest updates to the Penpot Exporter plug-in. Migrating between tools shouldn’t mean losing design quality or waiting forever, and we’ve made solid progress in that direction! 🚀 Highlights ✅ Fully compatible with Penpot 2.7 The plug-in is now up-to-date with the latest Penpot release. 📦 Much lighter image handling File sizes have been signif... - URL: https://community.penpot.app/t/figma-to-penpot-export-plugin/5554/11?u=sonisl [Skip to main content](https://community.penpot.app/t/figma-to-penpot-export-plugin/5554/11?u=sonisl#main-container) * * You have selected **0** posts. Hello Penpot community, We’re thrilled to announce that the [Penpot Exporter Figma plug-in](https://www.figma.com/community/plugin/1219369440655168734/penpot-exporter) is currently under new development! The objective is to ensure a smooth transition from Figma to Penpot by optimizing the export process and maintaining the highest possible accuracy of the exported design files. Please note that the plug-in is still under construction. Currently, it supports the export of basic files. We are actively working on enhancing the plug-in to handle more complex design elements and layouts, as well as larger files, such as complete design systems. We invite you all to try out the plug-in and share your experiences with us. Your feedback and contribution is invaluable as we continue to improve and refine the plug-in. We look forward to hearing from you! * * * * This is wonderful [@Alejandro\_Sanchez](https://community.penpot.app/u/alejandro_sanchez) I’m following your progress very closely and it’s really amazing how fast you’re building such an important asset for people to try out Penpot but also to be able to migrate most of their work and start a new journey where design and code collaborate together. I think it’d be dishonest to act as if Figma didn’t exist and hadn’t a tight hold on a massive number of designers, hence the plugin. I’m aware there’ll be “lost in translation” issues with any migration (after all, we are building a design tool from a different, more code-based perspective) but making the whole process smoother will be fantastic. Keep up the good work! Hello again Penpot Community, We just released our newest version of the plugin and we want to share with you that thanks to the help of [@micahchoo](https://community.penpot.app/u/micahchoo) (the original plugin publisher) we were able to publish it to the [already existing penpot plugin url](https://www.figma.com/community/plugin/1219369440655168734/penpot-exporter). So we will be deprecating soon the version we had to create while we managed ownership issues with the original plugin. We’ve included a deprecation note in the plugin redirecting you to the new version where we will continue developing improvements. Thank you for your continued support and keep in touch! Hi [@Alejandro\_Sanchez](https://community.penpot.app/u/alejandro_sanchez) , Thank you for your work on improving the exporter plugin! Did you notice it being abnormally long to process layers? In my case I try to export the document `DSFR - Composants - ...` from <https://www.figma.com/@gouvfr> and it’s on the page 12 over 50 for more than 10 minutes. I already restarted the process but it seems the same. I know this is still experimental and the previous version was too light to export anything interesting but it was like instant. Now just for the first 11 pages it took ~10 minutes. I’m using Chrome and having a Macbook Pro 2020. I may have a deeper look next weeks depending on my load at work. Note that it is stuck between different layers but always switching to something called “Ratio fixe”. I’m wondering if the plugin should allow displaying a detailed logs. Maybe there is an circular loop somewhere? Because while looking at the pages none has too much content. (maybe specify the current page when saying “currently processing layer XXXXX”). Hi there. Thank you so much for doing work on this project. I am wondering if the actual code for this exporter is available on git ? or this a proprietary plugin ? Thanks ! p.s. the reason is because the github url (which i later found) is not on the plugin page. Would it make sense to add it ? Thank you for your feedback [@sneko](https://community.penpot.app/u/sneko). We’re still working in performance improvements which is quite challenging because of how figma API allows us to traverse the document. At the moment the plugin will take a lot of time exporting big documents with a huge amount of nodes because we’re still trying to figure out how to improve “duplicated” nodes detection and try to get a performance boost from there. On the other hand [@ymolists](https://community.penpot.app/u/ymolists) , the actual code is available on git and public here: [GitHub - penpot/penpot-exporter-figma-plugin: Penpot exporter Figma plugin](https://github.com/penpot/penpot-exporter-figma-plugin) We’ve added the git url to the plugin page (I thought I did add it, my mistake). Thank you for noticing! 1. From what I see in the code you browse the Figma nodes tree locally ([penpot-exporter-figma-plugin/plugin-src/handleExportMessage.ts at 14bcad1b4a310da655005b52a2b34aa9488b791a · penpot/penpot-exporter-figma-plugin · GitHub](https://github.com/penpot/penpot-exporter-figma-plugin/blob/14bcad1b4a310da655005b52a2b34aa9488b791a/plugin-src/handleExportMessage.ts#L11)). Usually my browser handles managing 10k-100k JS operations in a really short time, do you know what is the costly operation when browsing each node (just to understand better)? Or is it a limitation Figma put in place to prevent plugins from scraping everything? 2. On friday I succeeded in exporting “medium sized” document from Figma. But once I tried to import it in Penpot it crashed directly. Is it something you know how to handle? (or is it according to you still due to duplicated nodes underlying) Thank you, There are some issues we’re facing when talking about performance. * We sacrificed the concurrent translation because it would make the plugin freeze or even make figma crash due to memory usage. This is something we’re currently working on to find a balance that helps us improve translation performance without using a lot of resources. * When working with components, Figma forces us to use async calls to find the information related to the main component of an instance ([example here](https://github.com/penpot/penpot-exporter-figma-plugin/blob/14bcad1b4a310da655005b52a2b34aa9488b791a/plugin-src/transformers/transformInstanceNode.ts#L23)). Since Figma does not provide basic information from the main component in the InstanceNode, we need to check this way to verify if the component comes from an external design system in order to recreate it to be usable in Penpot. This requirement of making this async calls consumes time as well. * In case of vectors in Figma, the way they manage them in the API is not easy to translate. In order to mantain fidelity in translation as much as possible we have to deconstruct the vector and create artificial groups to be able to represent complex shapes in penpot which may affect performance. And even when we have managed to get it to work for most cases this is still a work in progress. * There is also the problem with “duplicated” nodes/instances. This means that for example there may be an instance of a component that reuses another instance of another component with no overrides. This is common for example in button components where you have several variants but they share an icon which is another instance. We’re trying to figure out how to improve performance in these cases since we have to maintain the IDs registration working correctly in order to be able to import to penpot. About the translation time per node I’d say is about 200-300ms in the most expensive cases, and about what you say of penpot crashing we’ve seen that in pages with too many components there may be some problem and we’re trying to improve that. We’re having conversations with penpot to make some improvements here. [image315×249 7.77 KB](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/c/ccf20d8375fda13992b7dd64b088743b999ce806.png) Hi there [@ieason](https://community.penpot.app/u/ieason) , The process can take some time depending of the file size. Anyway, we’re currently facing some issues when trying to export big figma files due to how the export process works at the moment in the Penpot js library. We currently have two examples of files in the [plugin’s page](https://www.figma.com/community/plugin/1219369440655168734/penpot-exporter) so you can have an idea about the time it takes to export them. Anyway, if you’re facing any issue with the plugin I encourage you to report it in our github repository. You can find all the information [here](https://github.com/penpot/penpot-exporter-figma-plugin/wiki/How-to-report-an-issue). Thank you! **Improvements to the Figma to Penpot migration plug-in!** Hello everyone We’re excited to share the latest updates to the Penpot Exporter plug-in. Migrating between tools shouldn’t mean losing design quality or waiting forever, and we’ve made solid progress in that direction! ##### Highlights * **Fully compatible with Penpot 2.7** The plug-in is now up-to-date with the latest Penpot release. * **Much lighter image handling** File sizes have been significantly reduced. Some documents that used to weigh over 500MB now go down to just 40MB, thanks to optimized image management (no more unnecessary duplication!). * **Faster and more accurate vector translation** Vectors are now slightly simplified and more precise when translated from Figma to Penpot. You should also notice faster processing during transformation. * **Exports in native .penpot format** We now generate files directly in Penpot’s new `.penpot` format—seamless integration! * **Faster final file generation** The plug-in now builds the final `.penpot` file more efficiently, saving time. * **Progress indicator during export** While we can’t say exactly how long is left, there’s now a visible indicator so you know the plug-in is working (no more wondering if it crashed! ). * **Progress indicator at the final step of the process** Before, the export process would just show as “generating file” with no idea of how long it would take. Now, we’ve added progress at this final stage so you can track the status! ##### What to expect? Smaller files, better speed, higher fidelity… It’s not magic (if it used to take 30 minutes, it won’t drop to 1), but the **improvement is real**. We’re thrilled about what this means for anyone considering migrating to Penpot—or working across both platforms. We’d love your feedback and ideas for what you’d like to see next! Thanks Karin! This is a great update and it will make a lot of people very happy (including myself! ) In the meantime, we’ve been working on a Figma to Penpot migration guide that covers specific use cases and some of them will actually benefit a lot from this plugin’s improvements! Others have to do more with how to “think Penpot” in terms of Flexbox/GridCSS but also Design Tokens, .penpot open format, a better plugins API, self-host options, etc. #####, Figma to Penpot Export Plugin, Penpot Community, 01jy40a9z4b9mfrjw6bvpk535e.