At the Penpot team, due to the recent increase of the interest by community members in being able to import Figma files to Penpot and also in assisting and/or creating the importer, we’ve been discussing the best approach to make it happen. We have already decided a course of action:
We are working on a code skeleton for the minimum version of a Figma plugin that can convert a Figma file in a Penpot annotated svg file.
We will document as much of the .penpot format as is strictly necessary for a developer to create a proper Figma to Penpot import plugin.
We will share this seed of the solution at the community to enable anyone who wants to develop a plugin to do so.
There are a couple of strong reasons behind the decision to adopt this approach:
Allows the community to solve the need without having to depend on the Penpot team current product priorities (we still all want autolayout, right?).
Opens the door for future contributions, not necessarily related to importers, that will require understanding of the Penpot file format.
I cannot emphasize enough how grateful we are to our community members for the feedback and the help offerings. We hope to share news very soon. In the meantime, you can enjoy a gif showing some initial progress.
Just to check if I understand it correctly: The suggested solution is a figma plug-in that exports to the Penpot format (whereas, when people talk about the problem usually say Penpot importer).
The path makes sense to me, as there are limited resources and the solution does not demand any hasty changes to Penpot.
I was a bit concerned that it binds the code to figma (as a plugin) but the unavoidable binding to figma’s file format when creating an im/exporter is far more impactful, so nevermind.
The binding to figma’s closed file format makes other options more fragile (they can change their format anytime) and much more costly in effort (reverse engineering would be needed).
We just published the v0.0.1 of the Penpot exporter!
You have the source code and all the info on the github repo.
It is a very early stage figma plugin to export figma files to Penpot format. We need your help to make it really useful! Please, look at it, check it out, comment, and improve it!
Things that are currently included in the plugin are:
Basic shapes (rectangles, ellipses).
Frames (Boards in Penpot).
Groups.
Fills (solid colors and linear gradients).
Fonts (only if they are available on Google fonts).
This is a great plugin. Thanks so much for that.
Something weird is happening to me.
I built it first time and all worked fine. It exported and imported quite well.
Then, as I was trying to do a demo for a friend, i deleted it, and repeated the process: git clone, npm install, npm run build, in figma, new plugin from manifest.json … and now it does not export, it gets stuck with the modal showing and I get no export.
OS is debian bullseye, npm is 7.5.2 and node is 12.22.12
But still this is an awsome project and very helpfull to start migrating to penpot.
Hi! Did you try with the same file both times? Was it a very big file? The plugin should go through all the layers, so it could be time-consuming. Anyway, can you send us the .figma file to support@penpot to check it?
Hello,
I just tested again. Now it works again.
Strange.
I think it might be my figma install that is buggy.
I use an unofficial electron version, as I dislike snap applications that figma provides for linux.
All in all it now works.
Thanks
Please have in mind that the plugin is in a very early stage, so it will probably have a ton of bugs. Do not hesitate in letting us know about any more problems!
yes yes, ofcourse. Also I understand that Figma features do not exactly match Penpot, so I assume it will never be as is after migrating. But this looks like a really nice base. And i beleive this to be important plugin to help people migrate from figma.
Please note that this exporter is in a very early stage! I may not be able to export your files completely, but at least may help you in the migration.
There have been some small improvements so far, but it is still far from useful.
At the Penpot team, we are currently working adding components and colors to the exports (here’s the issue at GitHub) and we are having great progress. We expect publish this changes very soon and hopefully this will unlock other community members to contribute to the plugin.
Another step forward: Following a request at Github we’ve added support to mannage library assets (colors, typographies, components and images) at the penpot.js file.
I’m going to have to log back in there and give this a try!