Skip to content

Enhance Figma-to-HTML conversion with auto-layout and SVG support#25

Merged
trmquang93 merged 2 commits intomainfrom
fix/figma-to-html-paste
Apr 6, 2026
Merged

Enhance Figma-to-HTML conversion with auto-layout and SVG support#25
trmquang93 merged 2 commits intomainfrom
fix/figma-to-html-paste

Conversation

@trmquang93
Copy link
Copy Markdown
Collaborator

Improve the Figma-to-HTML paste functionality by restoring support for auto-layout properties, gradients, and adding SVG rendering for vector nodes. This update enhances the fidelity of pasted frames and improves user feedback during the paste process.

…t support

The @grida/refig factory drops all auto-layout properties when converting
kiwi binary to REST API format. This caused pasted Figma frames to render
with no flex layout, children stacked at (0,0), and gradients silently
dropped.

Changes:
- parseFigmaClipboard.js: Extend factory.node monkey-patch to copy 13
  auto-layout properties (stackMode, stackSpacing, padding, alignment,
  etc.) from raw kiwi nodeChanges onto factory output
- figmaToHtml.js: New converter — Figma node tree to HTML/CSS with
  support for auto-layout/flex, relativeTransform positions, linear
  gradients (both kiwi and REST formats), text styling, fills, strokes,
  corner radii, opacity, and nested frames
- useFigmaPaste.js: Use HTML conversion pipeline instead of WASM
  renderer for higher-fidelity output; support multi-frame paste
- ModalsLayer.jsx: Improve paste feedback toast styling
- figmaToHtml.test.js: 11 tests covering auto-layout, position,
  gradients, text, fills, and corner radius
@trmquang93 trmquang93 merged commit 4c655e9 into main Apr 6, 2026
1 check passed
@github-actions github-actions bot deleted the fix/figma-to-html-paste branch April 6, 2026 02:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant