Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: Exported Figma stroke components flip vertically and shifted down #233

Closed
EnriqueTMT opened this issue Oct 24, 2024 · 1 comment · Fixed by #236
Closed

Bug: Exported Figma stroke components flip vertically and shifted down #233

EnriqueTMT opened this issue Oct 24, 2024 · 1 comment · Fixed by #236
Labels
bug Something isn't working

Comments

@EnriqueTMT
Copy link

EnriqueTMT commented Oct 24, 2024

Problem

Some components in Figma get transformed in PenPot after using the penpot-exporter-figma-plugin. The transformation seems to be a vertical mirror or flip and a shift or translation down. It could also be a vertical mirror along the components x-axis.
It's hard to tell what the root of the bug, but in one of the samples (attached to this issue ticket), undoing the horizontal mirror or flip with a second horizontal flip fixes it. Also, applying a second flip or mirror (doesn't matter if it's horizontal or vertical) seems to fix the issue. My guess undoing the transformation, or overriding it fixes it.

Here is what it looks like in PenPot (after export from Figma) on the left and what it's supposed to look like (as an image).
image

Current Solutions

  • Apply a horizontal flip. Works if you don't need to flip the component.
  • Apply two mirrors or flips. Only works if the component in question has symmetry. Text or unique objects will likely be upside down.
  • Rotate your component or object by anything less than 360 degrees (worked with 90 and 180 degrees). Works if your component has that flexibility.
  • After using the plugin, export the selected areas that get bugged into SVGs in Figma, delete the bugged components in PenPot, and paste the SVG file. Acceptable if you don't have too many bugs components.
  • Fix it in PenPot.

Developer Solutions

I don't know. I'm still unsure about the root of the problem.

Samples & Attached Files

Attached is the .fig file from Figma so that you can use it for testing.
It seems I cannot attach a .fig file. So I'll put it in a zip folder.
Test file of Mirror Export Bug.zip

I tested this bug for a bit to see if I could figure it out for the PenPot team, but didn't find out much.
Inside you'll find the following:

  • My notes on some observations.
  • Two sets of original files and bugged files along with their attempted solutions.
  • Extra bugged samples to try out solutions on.
@Cenadros Cenadros linked a pull request Nov 14, 2024 that will close this issue
@Cenadros
Copy link
Collaborator

Hi there @EnriqueTMT ,

First of all thank you for the tremendous effort you have put into assembling such a test document. It's been a huge help.

We've been tracking this issue and opened a PR #236 to fix this issue. Apparently the issue happened because we were not taking into account some transformations. Flipping a shape horizontally or vertically makes some weird changes in the shape properties when retrieving them from the Figma API.

We were assuming that if a shape is not rotated, there is no transformation, which is not the case.

This is fixed in the PR and will be implemented in the next release.

Again, thank you for all your efforts.

@jordisala1991 jordisala1991 added the bug Something isn't working label Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants