@createlex/figgen 1.4.3 → 1.4.5

package/companion/local-llm-generator.cjs

@@ -36,18 +36,45 @@ RULES:
 10. Emit best-effort code for anything complex — never emit TODO comments or placeholder stubs.
 11. If reusableComponents are present, output each as a separate <file name="ComponentName.swift"> tag.
 12. FONTS: Always use .font(.system(size: X, weight: .bold)) — NEVER reference custom font names like "Inter-Bold", "Roboto", or any fontName from Figma. Custom fonts are not bundled in the Xcode project and will cause runtime errors. System font only.
-13. IMAGES: Every node listed in assetExportPlan MUST be referenced as Image("assetName").resizable().scaledToFill() — NEVER replace with Rectangle(), Color, or shapes. These PNGs are pre-exported to Assets.xcassets.
+13. IMAGES: Every node listed in assetExportPlan MUST be referenced as Image("assetName").resizable() — NEVER replace with Rectangle(), Color, or shapes. These PNGs are pre-exported to Assets.xcassets.
 14. BLEND MODES: If an assetExportPlan candidate has a non-null blendModeSwiftUI value, you MUST append that modifier to the Image() call, e.g.: Image("Mockup_GroupView2").resizable().scaledToFit().frame(...).blendMode(.multiply). Without this, the image background will not blend with the dark frame background and will show as an opaque rectangle. Map: MULTIPLY→.multiply, SCREEN→.screen, OVERLAY→.overlay, DARKEN→.darken, LIGHTEN→.lighten, COLOR_DODGE→.colorDodge, COLOR_BURN→.colorBurn, HARD_LIGHT→.hardLight, SOFT_LIGHT→.softLight, DIFFERENCE→.difference, EXCLUSION→.exclusion.
+15. IMAGE POSITIONING — always use renderBounds when present in the ASSET MANIFEST:
+    Each image asset may include renderBounds {x, y, width, height} — the actual visible clip region relative to the root frame. If renderBounds is present:
+      - Display at .resizable().frame(width: renderBounds.width * sx, height: renderBounds.height * sy)
+      - Position with .offset(x: renderBounds.x * sx, y: renderBounds.y * sy)
+    This is critical for overflow images (e.g. a 839×632 node at x=-197 clipped to 375×516 visible) — the plugin pre-exports the clipped region, not the full node. Using the node dimensions instead of renderBounds will show the wrong crop.
+16. FULL-SCREEN DEVICE SCALING: When the Figma canvas is a fixed iPhone size (e.g. CANVAS_WIDTH=375, CANVAS_HEIGHT=812) and the view should fill the device screen, wrap the entire body in GeometryReader and scale every pixel value:
+    struct MyView: View {
+      var body: some View {
+        GeometryReader { geo in
+          let sx = geo.size.width / CANVAS_WIDTH
+          let sy = geo.size.height / CANVAS_HEIGHT
+          ZStack(alignment: .topLeading) {
+            // children — multiply ALL px values by sx or sy:
+            // .frame(width: w * sx, height: h * sy)
+            // .offset(x: x * sx, y: y * sy)
+            // .font(.system(size: size * sx, weight: ...))
+            // .cornerRadius(r * sx)
+            // strokeWidth * sx, shadow radius * sx, shadow offset * sx/sy
+          }
+          .frame(width: geo.size.width, height: geo.size.height)
+          .cornerRadius(cornerRadius * sx)
+          .clipped()
+          .shadow(color: ..., radius: r * sx, x: ox * sx, y: oy * sy)
+        }
+        .ignoresSafeArea()
+      }
+    }
+    Apply this rule whenever CANVAS_WIDTH/CANVAS_HEIGHT are standard iPhone dimensions (375, 390, 393, 430 wide).
 
 RESPONSIVE LAYOUT RULES:
 - Root frame with FILL sizing → .frame(maxWidth: .infinity)
-- Font sizes → @ScaledMetric var: e.g. @ScaledMetric var titleSize: CGFloat = 34
 - Horizontal scrolling children → ScrollView(.horizontal, showsIndicators: false)
 - Vertical root scroll behavior → wrap body in ScrollView
 - ViewThatFits for HStack→VStack fallback on narrow devices when content may wrap
 - VStack(spacing:) / HStack(spacing:) from Figma itemSpacing — not fixed .padding() for inter-item spacing
 - .ignoresSafeArea() only for background color/image layers, never for foreground content
-- Hardcoded values are acceptable only for: cornerRadius, icon sizes ≤24pt, stroke widths
+- Hardcoded values are acceptable only for: icon sizes ≤24pt
 
 DESIGN TOKENS:
 If designTokens.colors or designTokens.fonts are non-empty, output a <file name="DesignTokens.swift"> containing:
@@ -203,11 +230,17 @@ function buildUserMessage(context, generationMode) {
     throw new Error('Could not extract root node from design context');
   }
 
+  const isPhoneCanvas = [375, 390, 393, 430].includes(promptCtx.canvasWidth);
+  const deviceHint = isPhoneCanvas
+    ? `\nDEVICE_SCALING: Canvas is a fixed iPhone size. Apply Rule 16 — wrap body in GeometryReader, compute sx/sy, and scale ALL pixel values so the view fills any device screen.`
+    : '';
+
   return `Generate SwiftUI code for this Figma design.
 
 OUTPUT_STRUCT_NAME: ${promptCtx.structName}
 CANVAS_WIDTH: ${promptCtx.canvasWidth}
-GENERATION_MODE: ${generationMode}
+CANVAS_HEIGHT: ${promptCtx.canvasHeight}
+GENERATION_MODE: ${generationMode}${deviceHint}
 
 DESIGN CONTEXT:
 ${JSON.stringify(promptCtx, null, 2)}

package/companion/mcp-server.mjs

@@ -1069,12 +1069,53 @@ server.registerTool('figma_to_swiftui', {
     selectionNames: generated.selection?.names ?? [],
   });
 
-  // Build asset manifest for the prompt so the AI knows exactly which Image() names are valid
-  const assetManifest = (context?.assetExportPlan?.candidates ?? []).map((c) => ({
-    name: c.assetName || c.name,
-    blendMode: c.blendModeSwiftUI || null,
-    type: c.suggestedType || c.type || 'image',
-  }));
+  // Build node lookup map for render bounds resolution
+  function buildNodeMap(node, map = new Map()) {
+    if (!node) return map;
+    if (node.id) map.set(node.id, node);
+    if (Array.isArray(node.children)) node.children.forEach((c) => buildNodeMap(c, map));
+    return map;
+  }
+  const nodeMap = buildNodeMap(context?.metadata);
+  const rootAbs = context?.metadata?.geometry?.absoluteBoundingBox;
+
+  // Build asset manifest: use actual written image names + render bounds so the AI
+  // positions clipped images correctly (not using the oversized node dimensions).
+  // Match each written image name back to its assetExportPlan candidate by suggestedAssetName suffix.
+  const candidateBySuffix = new Map(
+    (context?.assetExportPlan?.candidates ?? []).map((c) => [
+      (c.suggestedAssetName || c.nodeName || '').toLowerCase(),
+      c,
+    ])
+  );
+
+  const assetManifest = imageNames.map((imageName) => {
+    // Find matching candidate — image names are "{StructName}_{suggestedAssetName}"
+    const suffix = imageName.replace(/^[^_]+_/, '').toLowerCase();
+    const candidate = candidateBySuffix.get(suffix) ?? candidateBySuffix.get(imageName.toLowerCase());
+
+    // Look up render bounds from node tree (the actual visible clip region)
+    let renderBounds = null;
+    if (candidate?.nodeId && rootAbs) {
+      const node = nodeMap.get(candidate.nodeId);
+      const absRender = node?.geometry?.absoluteRenderBounds;
+      if (absRender) {
+        renderBounds = {
+          x: Math.round(absRender.x - rootAbs.x),
+          y: Math.round(absRender.y - rootAbs.y),
+          width: Math.round(absRender.width),
+          height: Math.round(absRender.height),
+        };
+      }
+    }
+
+    return {
+      name: imageName,
+      blendMode: candidate?.blendModeSwiftUI ?? null,
+      type: candidate?.kind ?? 'image',
+      ...(renderBounds ? { renderBounds } : {}),
+    };
+  });
 
   return jsonResult({
     tier: 'ai-native',
@@ -1105,6 +1146,8 @@ server.registerTool('figma_to_swiftui', {
       'Then call write_generated_swiftui_to_xcode with the generated code and images:[] (assets are already on disk).',
       '⚠️  Use .font(.system(size:weight:)) ONLY — never custom font names.',
       '⚠️  Reference every asset as Image("name") — never Rectangle() or Color() placeholders.',
+      '⚠️  ASSET POSITIONING: use renderBounds {x,y,width,height} from the manifest (not node dimensions) to frame and offset each image — the plugin exports the clipped visible region, not the full oversized node.',
+      '⚠️  DEVICE SCALING: if CANVAS_WIDTH is a standard iPhone width (375/390/393/430), wrap the body in GeometryReader and multiply every px value by sx=geo.size.width/CANVAS_WIDTH and sy=geo.size.height/CANVAS_HEIGHT so the design fills the target device screen.',
     ].filter(Boolean),
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createlex/figgen",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "CreateLex MCP runtime for Figma-to-SwiftUI generation and Xcode export",
   "bin": {
     "figgen": "bin/figgen.js"