Figma To Penpot Export Plugin

Hello Penpot community,

We’re thrilled to announce that the Penpot Exporter Figma plug-in 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! :slight_smile:

16 Likes

This is wonderful @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 (the original plugin publisher) we were able to publish it to the already existing penpot plugin url. 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!

1 Like

Hi @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. 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 , the actual code is available on git and public here: GitHub - penpot/penpot-exporter-figma-plugin: 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!

@Alejandro_Sanchez

  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). 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). 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.