feat: render Figma library components with correct z-ordering#30
Merged
trmquang93 merged 6 commits intomainfrom Apr 11, 2026
Merged
feat: render Figma library components with correct z-ordering#30trmquang93 merged 6 commits intomainfrom
trmquang93 merged 6 commits intomainfrom
Conversation
Library components (e.g. iOS status bars from Apple's UI Kit) were invisible after pasting from Figma because their derivedSymbolData contains rendering hints (fill geometry paths, glyph outlines, color overrides) instead of full node trees. - Add binary vector command blob decoder (MoveTo, LineTo, CubicBezier) - Detect rendering-hint format derivedSymbolData (guidPath vs guid) - Build approximate SVG from decoded geometry as generic fallback - Add clean HTML/CSS renderer for iOS status bars with system icons - Extract container background fills from unused symbolOverrides - Embed derived content in figmaToHtml.js for INSTANCE nodes
The kiwi parser produces vectorNetwork data in a different format than
the REST API: vertices as {x, y} objects and segments as {start, end}
with nested vertex/tangent properties. The vectorNetworkToSvgPath
converter now detects and handles both formats, fixing icons that
previously rendered as blank colored squares.
Also preserves stroke properties (strokePaints, strokeWeight, strokeCap,
strokeJoin, fillPaints) from raw kiwi nodeChanges that the @grida/refig
factory drops, and renders proper SVG stroke attributes including
linecap, linejoin, fill-rule from winding rules, and overflow:visible
to prevent stroke clipping at viewBox edges.
Preserve textAutoResize from kiwi nodeChanges (dropped by @grida/refig factory) and use it in figmaToHtml to control text sizing: - WIDTH_AND_HEIGHT (auto-width): white-space nowrap, no fixed width - HEIGHT (fixed-width): add 1px buffer for CSS font metric differences
The @grida/refig library sorts Figma node children using String.localeCompare(), but Figma's fractional index strings (parentIndex.position) use mixed-case ASCII characters designed for byte-level comparison. localeCompare is case-insensitive and alphabetical, producing wrong order (e.g. "i" < "P" alphabetically, but "P" < "i" in ASCII byte order). This scrambles both z-index for absolutely-positioned children and visual flow for auto-layout children. Fix by: - Preserving kiwi parentIndex.position on each factory node - Re-sorting the entire _figFile tree after parsing with byte-level comparison (< / >) instead of localeCompare - Using the same corrected comparator in buildDerivedTree for shared library component children
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
derivedSymbolDatainto full child treestextAutoResize,maxWidth)localeComparewith byte-level ASCII comparison for Figma's fractional position indices, which use mixed-case characters (!iRTY9vs!P) thatlocaleComparesorts incorrectlyTest plan