Cracking Figma Make: From .make File to Runnable React App

Figma Make’s .make files are ZIPs whose canvas.fig encodes project data via a Kiwi schema with mixed deflate and Zstandard compression. By decoding the schema and data, the author extracts CODE_FILE nodes into real source files and scripts the necessary fixes (imports, assets, Tailwind v4, StrictMode) to generate a working React/Vite app. The open-source tool also exports design tokens and is useful for migration, auditing, or curiosity.

Key Points

• A .make file is a ZIP archive; its canvas.fig uses a Kiwi-based binary format with two chunks: deflate-compressed schema and Zstandard-compressed data.
• Decoding with pako, fzstd, and kiwi-schema reveals CODE_FILE nodes containing full React/TypeScript/CSS source code.
• Automated fixes are needed: remove versioned package imports, convert figma:asset paths, add proper image extensions, adjust Tailwind v4/PostCSS, and disable React StrictMode for animations.
• The extraction yields a runnable React/Vite project that faithfully reproduces the prototype’s UI and behavior.
• Design tokens (colors, CSS variables, fonts) can be mined and exported for design system use.

Sentiment

Mixed. The technical content and practical utility are appreciated by commenters, but a significant portion of the discussion is consumed by a debate about whether the blog post was AI-generated and whether AI-assisted work requires disclaimers. The author's pragmatic stance that any tool that gets the job done is fine clashes with critics who argue for transparency about AI involvement in published work.

In Agreement

• The reverse engineering approach is fascinating and the practical use cases (client handoffs, code auditing, migration, design token extraction) are genuinely useful
• Figma Make generating React code rather than design mockups is an interesting architectural choice that makes sense from an AI perspective since using a real layout engine is simpler than simulating one
• The extracted code quality is reasonable, with tools like lovable.dev producing similarly structured output that provides a decent platform for continued development
• Figma's compression and data storage techniques (Kiwi schema, Deflate, Zstandard) are surprisingly sophisticated

Opposed

• The blog post and author's replies appear to be LLM-generated or heavily AI-assisted, and this should be explicitly disclaimed since presenting AI-produced work under your own name violates an implicit social contract about human judgment
• Better established tools like `file` and `binwalk` would have made the binary analysis process significantly simpler and more straightforward than the manual approach described
• When presenting investigative or exploratory work, readers expect the author to have exercised judgment over the space of possible choices and be able to explain why specific decisions were made — AI-generated content undermines this expectation