From 7a11ba992e14eca45b45737b0f09961f60dbd24a Mon Sep 17 00:00:00 2001 From: KarinDahlstedt <165997885+KarinDahlstedt@users.noreply.github.com> Date: Fri, 28 Jun 2024 12:22:45 +0200 Subject: [PATCH] Update README.md (#199) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update README.md Changes have been made to align the content of the ReadMe to the recent updates of the plug-in. * lint --------- Co-authored-by: Alex Sánchez --- README.md | 114 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 59 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 17f94f9..17e6d73 100644 --- a/README.md +++ b/README.md @@ -9,23 +9,21 @@

License: MPL-2.0 -Managed with Taiga.io +Managed with GitHub Projects Gitpod ready-to-code

Penpot Website • - Export Figma to Penpot (penpot community) • + Export Figma to Penpot (Penpot community) • Penpot Community • + Plugin in Figma community

Help us

-![](penpotexporter.gif) - -This is a **very early-stage** Figma plugin to export Figma files to Penpot format. For now is -little more than a proof of concept, or a first scaffolding, not a fully functional exporter. +https://github.com/penpot/penpot-exporter-figma-plugin/assets/165997885/44208d17-1ca0-4fe8-a541-4e68a24ee554 ## Table of contents @@ -44,11 +42,11 @@ little more than a proof of concept, or a first scaffolding, not a fully functio ## Why a Penpot exporter -The aim of this plugin is to help people migrate their files from Figma to -[Penpot](https://penpot.app/). Migrating work from one design tool to another was never an easy task -due to the abundance of closed and non-standard formats, and this is not a different case. Our -approach to better solve this situation is to release a code skeleton for the minimum version of a -Figma plugin that can convert a Figma file into a Penpot annotated SVG file. +The aim of this plugin is to help people migrate their files from Figma +to [Penpot](https://penpot.app/). Migrating work from one design tool to another was never an easy +task due to the abundance of closed and non-standard formats, and this is not a different case. Our +approach to better solve this situation is to build a Figma plugin that can convert a Figma file +into a .zip file that can be imported to Penpot. There is a sense of urgency for this capability because there is a feeling that Adobe might force Figma to limit exports and interoperability via plugins very soon. @@ -111,68 +109,74 @@ for the plugin. ### To use the plugin -1. Select what you want to export -2. `Figma menu` > `Plugins` > `Development` > `Penpot Exporter` go to the `Plugins` menu in Figma - and select `Development` followed by `Penpot Exporter`. -3. This will generate a .zip file that you can import into Penpot. +1. `Open a Figma file` > `Figma top toolbar` > `Resources` > `Plugins` > search for + `Penpot Exporter` > `Select the plugin` > `Export your file`. + Screenshot 2024-06-26 at 08 51 49 + +2. A `.zip file` will be generated that you can `import into Penpot`. +3. `Open Penpot` > `Select the projects or drafts menu` (three dots on the right side) > + `Select Import Penpot files` > `Select the exported .zip file` > `Open the file` and continue + your work in Penpot 🥳 + ![Untitled](https://github.com/penpot/penpot-exporter-figma-plugin/assets/165997885/3dc1bd1e-1f59-4069-b3a5-90e024ffc806) + +Visit the Penpot Exporter +Wik to learn more about how to use the plug-in. ## Call to the community -Answering to the interest expressed by community members to build the plugin by themselves, at the -Penpot team we decided to help solve the need without having to depend on our current product -priorities. That is why we have published this bare minimum version of the plugin, unsatisfactory in -itself, but it unlocks the possibility for others to continue the task. +Answering to the interest expressed by community members to build the plugin by themselves, we're +opening the door for anyone interested to jump in and contribute. -Yes, we are asking for help. 🤗 +We'd love your help! 🤗 -We have explained this approach in a -[community post](https://community.penpot.app/t/figma-file-importer/1684). Feel free to join the -conversation there. +For more details on this initiative, we've shared our approach in a +[community post](https://community.penpot.app/t/figma-file-importer/1684) and provided updates in +another [community post](https://community.penpot.app/t/figma-to-penpot-export-plugin/5554). Feel +free to join the conversation! ## What can this plugin currently import? -As mentioned above, this plugin gets you to a starting point. Things that are currently included in -the import are: +Things that are currently included in the import are: -- **Basic shapes** (rectangles, ellipses). -- **Frames** (Boards in Penpot). -- **Groups**. -- **Fills** (solid colors and linear gradients). -- **Texts** (basic support. Only fonts available on Google fonts). -- **Images** (basic support) +- **Basic shapes** (Rectangles, Ellipses, Stars and Polygons) +- **Vectors, Lines and Arrows** +- **Frames and Sections** (Boards in Penpot) +- **Groups and Boolean groups** +- **Masks groups** +- **Texts** (you can upload your own fonts too) +- **All basic shapes properties** (fills, visibility, strokes, corner radius, shadows, rotations, + effects, etc...) +- **Components and Components Sets** +- **Component instances** +- **Variants and properties** +- **Variables** +- **Libraries and local styles** +- **Files connected to a Library** (exported as a page in exported file) +- **Remote design systems** +- **Auto Layouts** ## Limitations -The obvious limitations are the features that are in Figma but not in Penpot or work differently in -both tools so they can not be easily converted. We leave some comments below about the ones that are -commonly considered more important: +Since the objective of the plug-in is to enable seamless file exports from Figma to Penpot. A key +part of this goal is to support exporting large files, making **performance a primary challenge**. +The exportation process requires comprehensive navigation through all nodes in a Figma file, and +currently we’re facing some limitation with the Figma API to solve this. -- **Autolayout**: Not in Penpot yet but in a very advanced state of development. There will be news - soon. -- **Components**: Currently very different from their counterparts at Figma. However, Penpot - components are under a rework that we expect will make the conversion easier. -- **Variants**: Not expected in the short term. Also, we are thinking of different solutions to - solve component states, things that eventually could make it difficult to import. +Another obvious limitations are the features that are in Figma but not in Penpot or work differently +in both tools so they can not be easily converted, consequently, some features may not look exactly +the same. Additionally, **prototyping settings are currently not supported** in the export/import +process of files. ## Contributing -If you want to make many people very happy and help us build this code skeleton for the minimum -version of the Figma plugin, a further effort will be needed to have a satisfactory import -experience. +If you want to make many people very happy and help us continue to build this Figma plugin, for +instance, it would be interesting to add: -For instance, it will be interesting to add: +- Performance optimization +- Prototyping interactions and flows -- Strokes -- Fills with radial gradients -- Paths -- Images (full support) -- Texts (full support) -- Rotations -- Constraints -- ... - -Motivated to contribute? Take a look at our -[Contributing Guide](https://help.penpot.app/contributing-guide/) that explains our guidelines +Motivated to contribute? Take a look at +our [Contributing Guide](https://help.penpot.app/contributing-guide/) that explains our guidelines (they're for the Penpot Core, but are mostly of application here too). ## License