Skip to main content
Question

JSON Export Missing Flip Vertical Information When Combined with Rotation

  • December 4, 2025
  • 0 replies
  • 7 views

melonwwwww

**Bug Description:**
When a node has both "Flip Vertical" and "Rotation" applied, the exported JSON 
(via exportAsync with format: "JSON_REST_V1") does not include any field to 
indicate the flip transformation.

**Steps to Reproduce:**
1. Create a rectangle with an image fill
2. Apply "Flip Vertical" transformation
3. Apply "Rotation 180°" transformation
4. Export the node using exportAsync({ format: "JSON_REST_V1" })

**Expected Behavior:**
The JSON should include a field (e.g., in imageTransform or a separate property) 
to indicate that the image has been flipped vertically.

**Actual Behavior:**
- The JSON only contains "rotation": -180
- The imageTransform matrix does not reflect the flip
- When only "Flip Vertical" is applied (without rotation), the exported image 
  is already flipped
- When both "Flip Vertical" and "Rotation" are applied, the exported image is 
  NOT flipped, but there's no indication in the JSON that CSS transform should 
  include scaleY(-1)

**Impact:**
This makes it impossible for code generation tools to correctly reproduce the 
visual appearance when converting Figma designs to HTML/CSS.

**Test Cases:**
Case 1: Only Flip Vertical (rotation ≈ 0)
- Exported image: Already flipped ✅
- JSON: No flip indicator
- Result: Correct visual appearance

Case 2: Flip Vertical + Rotation 180°
- Exported image: NOT flipped ❌
- JSON: No flip indicator
- Result: Incorrect visual appearance (missing scaleY(-1) in CSS)

**Suggested Fix:**
Add a field to indicate flip transformations, such as:
- "flipVertical": true/false
- "flipHorizontal": true/false
Or include flip information in the imageTransform matrix.