Shape transfer¶
Shape transfer turns Figma vector shapes into editable Kanzi shapes. Primitive shapes (rectangles, ellipses, polygons, stars, frames with at least one visible fill or stroke) stay parametric: every value remains editable at runtime in Kanzi Studio. Vectors, boolean operations, lines, and arrows route through the SDF path. The SDF path uses the same material pipeline but is driven by a baked signed-distance-field texture instead of geometry.
Shapes stay sharp at every zoom level: edges are computed analytically in the shader at render time rather than rasterised from baked geometry. The per-shape project footprint stays small.
Note
The previous version of Kanzi Figma Importer relied on Kanzi Shapes and produced an actual mesh per shape with live tessellation. The current shader-only workflow removes the tessellation step entirely.
Selection contract¶
Primitive path (parametric):
RECTANGLE,ELLIPSE,POLYGON,STAR, plusFRAMEif it has at least one visible fill or stroke.SDF path (texture-baked):
VECTOR,BOOLEAN_OPERATION,LINE,ARROW. Line and arrow are not Figma primitives; they always take the SDF route.Each node sends a separate Shape transfer; multi-select is a batch.
Primitives and SDF: which to expect¶
Primitives are more flexible at runtime because the geometry is exposed as material uniforms. A corner-radius change in Kanzi Studio updates the shape instantly without re-rendering any baked content. SDF results are less flexible: the geometry lives in a baked texture, so corner sharpening is limited by the texture resolution.
If a shape can be expressed as a primitive, the Figma plugin uses the primitive path. Vectors, booleans, lines, and arrows always go through SDF because their geometry cannot be reduced to a few uniforms.
Kanzi Figma Importer creates one MaterialType per shape category. Multiple rectangles share Figma_Rectangle, multiple vectors share Figma_Vector. Per-instance uniform overrides (FillColor, StrokeColor, CornerRadiusTL/TR/BL/BR) differentiate them. Re-imports update uniforms in place.
What is an SDF texture¶
A signed distance field (SDF) is a bitmap where each texel stores the signed distance from that texel to the nearest path edge: negative inside the shape, zero on the contour, positive outside. The shader reconstructs anti-aliased edges from this distance field at any zoom level without needing the original geometry.
Kanzi Figma Importer generates the SDF texture at import time from the Figma vector path. The texture resolution is sized per shape (up to 512 px on the long axis), and the padding around the contour scales with the stroke weight.
Note
The SDF texture is RGB. The R channel holds the signed distance. The G channel holds the normalised perimeter distance, which the shader uses for dashed strokes and per-side stroke styling. The B channel is reserved.
Note
The SDF conversion is one pass per shape and scales with vector complexity. Highly detailed vectors (many anchor points, deep nesting) take noticeably longer than simple primitives. If conversion time becomes an issue for a specific shape, baking to image ([KZ_BAK]) is the faster alternative.
Fill types¶
Fill |
Status |
Notes |
|---|---|---|
Solid color |
Stable |
|
Linear gradient |
Stable |
Multi-stop |
Radial gradient |
Stable |
Multi-stop |
Angular gradient |
Stable |
Direction stable; 0% and 100% stops padded for smooth wrap. |
Diamond gradient |
Stable |
|
Pattern / image fill |
Not supported |
Use Image transfer for image fills. |
Gradient positioning has a known minor drift compared to Figma. Broader testing across gradient types is pending before a final fix.
Gradient stop colours¶
Gradient stops are first-class in the variable pipeline. The stops remain dynamic (not baked into a texture), so each stop colour can be a Figma variable bound to the FVC.
Warning
The texture fallback for gradients with more than 5 stops does not currently work. Use 5 stops or fewer until the fallback is fixed. Designs with more than 5 stops cannot be reliably transferred yet.
Stroke options¶
Option |
Status |
|---|---|
Solid color |
Stable |
Multi-stop gradient |
Stable |
Width |
Stable |
Opacity |
Stable (premultiplied alpha) |
Stroke alignment (Inside / Center / Outside) |
Stable. With Center or Outside alignment, the stroke renders outside the shape boundary exactly as in Figma. The shader expands the rendered area via vertex scaling so the stroke is not clipped at the boundary. |
Per-side widths (top/right/bottom/left) |
Stable for rectangles; other shape types not yet supported |
Dashed strokes |
Not supported. See Troubleshooting. |
Stroke width profile along path |
Supported but not yet stable. Edge cases and rendering glitches are still being addressed. |
Boolean operations¶
Figma’s boolean operations (Union, Subtract, Intersect, Exclude) are supported via the SDF path.
To transfer a boolean operation, select the BOOLEAN_OPERATION parent node itself (not the source layers). Figma exposes the pre-flattened compound path on the parent, so the source layers are not processed individually. The compound path is rasterised to an SDF texture; the geometry of the resulting Kanzi shape is baked and cannot be edited further.
Known edge case: at large stroke widths, the inner-shape contour can merge with the outer.
SDF limitations¶
Caveats of the SDF path:
Sharp corners get rounded by the SDF gradient.
Small shapes lose detail at the SDF texture resolution.
Stroke width has no fixed maximum, but the SDF resolution and padding are sized per asset based on the stroke weight and shape aspect. Very large strokes can outgrow the padded region and start to lose definition. The practical cap is asset-dependent.
Manual ``SDFScale`` adjustment is sometimes needed.
Boolean subtract holes appear slightly smaller than in Figma.
Inner / outer stroke boundaries can merge near gaps.
Options panel¶
Option |
Values |
|---|---|
Render Mode |
Native (default): the Kanzi primitive shader for rectangles and ellipses. Best performance, sharp corners stay sharp. SDF: transmit primitives as SDF textures even when a primitive shader would suffice. This produces consistent SDF rendering across the whole project, at the cost of flexibility. The use case (and the performance trade-off) is still under evaluation. |
Render Mode applies only to primitive shapes (RECTANGLE, ELLIPSE) transferred via the SHAPE button. Vectors, boolean operations, polygons, and stars always use the SDF pipeline and ignore this toggle.