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:
parent
303cc833a0
commit
7a11ba992e
1 changed files with 59 additions and 55 deletions
114
README.md
114
README.md
|
@ -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 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
|
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
|
||||||
|
|
Loading…
Reference in a new issue