0
Fork 0
mirror of https://github.com/penpot/penpot-exporter-figma-plugin.git synced 2024-12-22 13:43:03 -05:00

Update README.md (#199)

* 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 <alejandro@runroom.com>
This commit is contained in:
KarinDahlstedt 2024-06-28 12:22:45 +02:00 committed by GitHub
parent 303cc833a0
commit 7a11ba992e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

114
README.md
View file

@ -9,23 +9,21 @@
</h1> </h1>
<p align="center"><a href="https://www.mozilla.org/en-US/MPL/2.0" rel="nofollow"><img src="https://camo.githubusercontent.com/3fcf3d6b678ea15fde3cf7d6af0e242160366282d62a7c182d83a50bfee3f45e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d504c2d322e302d626c75652e737667" alt="License: MPL-2.0" data-canonical-src="https://img.shields.io/badge/MPL-2.0-blue.svg" style="max-width:100%;"></a> <p align="center"><a href="https://www.mozilla.org/en-US/MPL/2.0" rel="nofollow"><img src="https://camo.githubusercontent.com/3fcf3d6b678ea15fde3cf7d6af0e242160366282d62a7c182d83a50bfee3f45e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4d504c2d322e302d626c75652e737667" alt="License: MPL-2.0" data-canonical-src="https://img.shields.io/badge/MPL-2.0-blue.svg" style="max-width:100%;"></a>
<a href="https://tree.taiga.io/project/penpot/" title="Managed with Taiga.io" rel="nofollow"><img src="https://camo.githubusercontent.com/4a1d1112f0272e3393b1e8da312ff4435418e9e2eb4c0964881e3680f90a653c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d616e61676564253230776974682d54414947412e696f2d3730396631342e737667" alt="Managed with Taiga.io" data-canonical-src="https://img.shields.io/badge/managed%20with-TAIGA.io-709f14.svg" style="max-width:100%;"></a> <a href="https://github.com/orgs/penpot/projects/1" title="Managed with GitHub Projects" rel="nofollow"><img src="https://camo.githubusercontent.com/4a1d1112f0272e3393b1e8da312ff4435418e9e2eb4c0964881e3680f90a653c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d616e61676564253230776974682d54414947412e696f2d3730396631342e737667" alt="Managed with GitHub Projects" data-canonical-src="https://img.shields.io/badge/managed%20with-TAIGA.io-709f14.svg" style="max-width:100%;"></a>
<a href="https://gitpod.io/#https://github.com/penpot/penpot" rel="nofollow"><img src="https://camo.githubusercontent.com/daadb4894128d1e19b72d80236f5959f1f2b47f9fe081373f3246131f0189f6c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f476974706f642d72656164792d2d746f2d2d636f64652d626c75653f6c6f676f3d676974706f64" alt="Gitpod ready-to-code" data-canonical-src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" style="max-width:100%;"></a></p> <a href="https://gitpod.io/#https://github.com/penpot/penpot" rel="nofollow"><img src="https://camo.githubusercontent.com/daadb4894128d1e19b72d80236f5959f1f2b47f9fe081373f3246131f0189f6c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f476974706f642d72656164792d2d746f2d2d636f64652d626c75653f6c6f676f3d676974706f64" alt="Gitpod ready-to-code" data-canonical-src="https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod" style="max-width:100%;"></a></p>
<p align="center"> <p align="center">
<a href="https://penpot.app/"><b>Penpot Website</b></a> <a href="https://penpot.app/"><b>Penpot Website</b></a>
<a href="https://community.penpot.app/t/figma-file-importer/1684"><b>Export Figma to Penpot (penpot community)</b></a> <a href="https://community.penpot.app/t/figma-to-penpot-export-plugin/5554"><b>Export Figma to Penpot (Penpot community)</b></a>
<a href="https://community.penpot.app/"><b>Penpot Community</b></a> <a href="https://community.penpot.app/"><b>Penpot Community</b></a>
<a href="https://www.figma.com/community/plugin/1219369440655168734/penpot-exporter"><b>Plugin in Figma community</b></a>
</p> </p>
<p align="center"> <p align="center">
<img src="https://user-images.githubusercontent.com/1045247/198583387-5c243c18-8ca9-4b66-9c91-6a30c8787bcc.jpg" alt="Help us"> <img src="https://user-images.githubusercontent.com/1045247/198583387-5c243c18-8ca9-4b66-9c91-6a30c8787bcc.jpg" alt="Help us">
</p> </p>
![](penpotexporter.gif) https://github.com/penpot/penpot-exporter-figma-plugin/assets/165997885/44208d17-1ca0-4fe8-a541-4e68a24ee554
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.
## Table of contents ## 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 ## Why a Penpot exporter
The aim of this plugin is to help people migrate their files from Figma to The aim of this plugin is to help people migrate their files from Figma
[Penpot](https://penpot.app/). Migrating work from one design tool to another was never an easy task to [Penpot](https://penpot.app/). Migrating work from one design tool to another was never an easy
due to the abundance of closed and non-standard formats, and this is not a different case. Our 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 approach to better solve this situation is to build a Figma plugin that can convert a Figma file
Figma plugin that can convert a Figma file into a Penpot annotated SVG 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 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. Figma to limit exports and interoperability via plugins very soon.
@ -111,68 +109,74 @@ for the plugin.
### To use the plugin ### To use the plugin
1. Select what you want to export 1. `Open a Figma file` > `Figma top toolbar` > `Resources` > `Plugins` > search for
2. `Figma menu` > `Plugins` > `Development` > `Penpot Exporter` go to the `Plugins` menu in Figma `Penpot Exporter` > `Select the plugin` > `Export your file`.
and select `Development` followed by `Penpot Exporter`. <img width="421" alt="Screenshot 2024-06-26 at 08 51 49" src="https://github.com/penpot/penpot-exporter-figma-plugin/assets/165997885/c50ad95d-2ebc-41dc-a62d-3f901612bdd3">
3. This will generate a .zip file that you can import into Penpot.
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 <a href="https://github.com/penpot/penpot-exporter-figma-plugin/wiki"><b>Penpot Exporter
Wik</b></a> to learn more about how to use the plug-in.
## Call to the community ## Call to the community
Answering to the interest expressed by community members to build the plugin by themselves, at the Answering to the interest expressed by community members to build the plugin by themselves, we're
Penpot team we decided to help solve the need without having to depend on our current product opening the door for anyone interested to jump in and contribute.
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.
Yes, we are asking for help. 🤗 We'd love your help! 🤗
We have explained this approach in a For more details on this initiative, we've shared our approach in a
[community post](https://community.penpot.app/t/figma-file-importer/1684). Feel free to join the [community post](https://community.penpot.app/t/figma-file-importer/1684) and provided updates in
conversation there. 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? ## What can this plugin currently import?
As mentioned above, this plugin gets you to a starting point. Things that are currently included in Things that are currently included in the import are:
the import are:
- **Basic shapes** (rectangles, ellipses). - **Basic shapes** (Rectangles, Ellipses, Stars and Polygons)
- **Frames** (Boards in Penpot). - **Vectors, Lines and Arrows**
- **Groups**. - **Frames and Sections** (Boards in Penpot)
- **Fills** (solid colors and linear gradients). - **Groups and Boolean groups**
- **Texts** (basic support. Only fonts available on Google fonts). - **Masks groups**
- **Images** (basic support) - **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 ## Limitations
The obvious limitations are the features that are in Figma but not in Penpot or work differently in Since the objective of the plug-in is to enable seamless file exports from Figma to Penpot. A key
both tools so they can not be easily converted. We leave some comments below about the ones that are part of this goal is to support exporting large files, making **performance a primary challenge**.
commonly considered more important: The exportation process requires comprehensive navigation through all nodes in a Figma file, and
currently were 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 Another obvious limitations are the features that are in Figma but not in Penpot or work differently
soon. in both tools so they can not be easily converted, consequently, some features may not look exactly
- **Components**: Currently very different from their counterparts at Figma. However, Penpot the same. Additionally, **prototyping settings are currently not supported** in the export/import
components are under a rework that we expect will make the conversion easier. process of files.
- **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.
## Contributing ## Contributing
If you want to make many people very happy and help us build this code skeleton for the minimum If you want to make many people very happy and help us continue to build this Figma plugin, for
version of the Figma plugin, a further effort will be needed to have a satisfactory import instance, it would be interesting to add:
experience.
For instance, it will be interesting to add: - Performance optimization
- Prototyping interactions and flows
- Strokes Motivated to contribute? Take a look at
- Fills with radial gradients our [Contributing Guide](https://help.penpot.app/contributing-guide/) that explains our guidelines
- 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
(they're for the Penpot Core, but are mostly of application here too). (they're for the Penpot Core, but are mostly of application here too).
## License ## License