feat: enhance Figma integration with full API property coverage

[rubenmarcus]

Summary

• Add ~20 missing Figma REST API properties to types, parsers, and agent guidelines for significantly improved design-to-code fidelity
• Layout: layoutSizingHorizontal/Vertical (FIXED/HUG/FILL), layoutWrap, layoutPositioning (absolute children), counterAxisSpacing, layoutAlign, min/maxWidth/Height, clipsContent, scrollBehavior, overflowDirection
• Visual: individualStrokeWeights (per-side borders), strokeDashes, rotation, isMask, imageTransform→object-position, image filters→CSS filter(), hero section detection, icon SVG export
• Typography: fontStyle, textTruncation + maxLines with CSS line-clamp hints, hyperlink detection
• Effects: progressive blur detection, backdrop-filter hints
• New parsers: font-checker (Google Fonts validation), image-collector, icon-collector (VECTOR/INSTANCE node detection + SVG export)
• Agent guidelines: Updated with sizing, wrap, absolute positioning, overflow, sticky/fixed, borders, rotation, and image filter rules

Test plan

• pnpm build passes
• pnpm test:run — all 213 tests pass
• pnpm lint — no new errors (only pre-existing warnings)
• End-to-end: run ralph --from figma against a Figma file with auto-layout, per-side borders, images, icons, and text truncation — verify spec output includes new properties

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[github-actions]

Issue Linking Reminder

This PR doesn't appear to have a linked issue. Consider linking to:

• This repo: Closes #123
• ralph-ideas: Closes multivmlabs/ralph-ideas#123

Using Closes, Fixes, or Resolves will auto-close the issue when this PR is merged.

---

If this PR doesn't need an issue, you can ignore this message.

[github-actions]

⚠️ Bundle Size Analysis

Metric	Value
Base	1962.84 KB
PR	2234.84 KB
Diff	271.99 KB (13.00%)

Bundle breakdown

156K	dist/auth
32K	dist/automation
4.0K	dist/cli.d.ts
4.0K	dist/cli.d.ts.map
16K	dist/cli.js
12K	dist/cli.js.map
528K	dist/commands
28K	dist/config
4.0K	dist/index.d.ts
4.0K	dist/index.d.ts.map
4.0K	dist/index.js
4.0K	dist/index.js.map
808K	dist/integrations
84K	dist/llm
804K	dist/loop
188K	dist/mcp
32K	dist/presets
92K	dist/setup
40K	dist/skills
392K	dist/sources
76K	dist/ui
124K	dist/utils
336K	dist/wizard

[greptile-apps]

Greptile Summary

This PR significantly enhances Figma integration by adding ~20 missing REST API properties for improved design-to-code fidelity. The changes span layout properties (sizing modes, wrap, absolute positioning, overflow), visual properties (per-side borders, rotation, masks, image transforms), typography enhancements (font style, text truncation), and new utility parsers for font validation, image collection, and icon extraction.

Key additions:

• Layout: layoutSizingHorizontal/Vertical, layoutWrap, layoutPositioning, counterAxisSpacing, layoutAlign, size constraints, clipsContent, scrollBehavior, overflowDirection
• Visual: individualStrokeWeights, strokeDashes, rotation, isMask, imageTransform, filters
• Typography: fontStyle, textTruncation, maxLines, hyperlink detection
• New parsers: font-checker (Google Fonts validation), image-collector, icon-collector with SVG export
• Agent guidelines: Comprehensive Figma-to-code instructions for layout, colors, typography, images, and CSS implementation
• CLI: Added --max-cost budget control option
• Tests: 235 new test cases for context-builder and task-executor

Issues found:

• Division by zero risk in imageTransformToObjectPosition when transform scale values equal exactly 1.0

Confidence Score: 4/5

• Safe to merge after fixing the division by zero issue in imageTransformToObjectPosition
• Comprehensive feature addition with extensive test coverage (213 tests passing). One critical division by zero bug found in image transform calculation. All other code is well-structured with proper error handling.
• Pay close attention to src/integrations/figma/parsers/design-spec.ts - fix the division by zero bug before merging

Important Files Changed

Filename	Overview
src/integrations/figma/types.ts	Added ~20 new Figma API properties for layout, visual effects, typography, and image handling - comprehensive type coverage
src/integrations/figma/parsers/design-spec.ts	Major parser enhancements with layout sizing, borders, rotation, image transforms - includes division by zero risk in imageTransformToObjectPosition
src/integrations/figma/source.ts	Integrated new parsers (font-checker, icon-collector, image-collector) with API calls and error handling
src/commands/run.ts	Enhanced with Figma asset downloads (images, icons, screenshots), font warnings, and spec size capping - robust error handling
src/loop/context-builder.ts	Added comprehensive Figma-specific agent guidelines covering layout, typography, images, and CSS implementation

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Figma Source Integration] --> B[Fetch Figma File API]
    B --> C[Parse Document Nodes]
    C --> D[Font Checker]
    C --> E[Image Collector]
    C --> F[Icon Collector]
    D --> G[Check Google Fonts]
    G --> H[Build Font Substitutions]
    E --> I[Fetch Image Fill URLs]
    I --> J[Download Images]
    F --> K[Export Icons as SVG]
    K --> L[Download SVG Files]
    C --> M[Design Spec Parser]
    H --> M
    I --> M
    K --> M
    M --> N[Generate Markdown Spec]
    N --> O[Context Builder]
    O --> P[Add Figma-Specific Guidelines]
    P --> Q[AI Coding Loop]
    J --> R[public/images/]
    L --> S[public/images/icons/]

Loading

_{Last reviewed commit: ed8854e}

[greptile-apps]

_{15 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🔗 Docs Preview

Preview URL: https://feat-figma-api-enhancements.ralph-starter-docs.pages.dev

This preview was deployed from the latest commit on this PR.