Show HN: Extracting React apps from Figma Make's undocumented binary format
1–10 of 26 posts
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#2Figma's API returns 400 for .make files, so I dug into the binary. Turns out it's a ZIP with a custom format: Deflate for the schema chunk, Zstandard for the data, then Kiwi binary decoding. Scripts on GitHub if useful: https://github.com/albertsikkema/figma-make-extractor
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#3I once reverse engineered the Figma .fig file they have utilised quite good compression and data storage techniques for a tech company that uses AWS
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#4I once reverse engineered the Figma .fig file they have utilised quite good compression and data storage techniques for a tech company that uses AWS
That is a funny observation! You are right, that is strange.
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#5> First thing I did was look at the raw bytes: xxd -l 4 "ClientApp.make"
I recommend using the linux "file" command, since it will generally be able to tell you these sorts of things straight away. I've been working on a long-term project to directly import figma design files into Unity, so I've ended up coming across a lot of these things myself
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#6Figma's API returns 400 for .make files, so I dug into the binary. Turns out it's a ZIP with a custom format: Deflate for the schema chunk, Zstandard for the data, then Kiwi binary decoding. Scripts on GitHub if useful: https://github.com/albertsikkema/figma-make-extractor
I'm curious if you tried binwalk? That's usually my goto for mysterious files.
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#7Figma's API returns 400 for .make files, so I dug into the binary. Turns out it's a ZIP with a custom format: Deflate for the schema chunk, Zstandard for the data, then Kiwi binary decoding. Scripts on GitHub if useful: https://github.com/albertsikkema/figma-make-extractor
I'm curious if you tried binwalk? That's usually my goto for mysterious files.
I agree. It would likely have identified the separate deflate and zstd chunks automatically.
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#8> First thing I did was look at the raw bytes: xxd -l 4 "ClientApp.make" I recommend using the linux "file" command, since it will generally be able to tell you these sorts of things straight away. I've been working on a long-term project to directly import figma design files into Unity, so I've ended up coming across a lot of these things myself
Tell it to Mr. Claude. Who do you think made all these decisions?
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#9This is fascinating, thanks for sharing! I also appreciated the "when would you need this" section at the end.
> "When Would You Need This? - Client hands you a Figma Make prototype but not the design file - You want to audit AI-generated code before deployment - You need to migrate away from Figma Make to a different stack - You want to extract design tokens for your design system - Pure curiosity about how Figma structures its data"
Re: Show HN: Extracting React apps from Figma Make's undocumented binary format
#10It's interesting that the AI tool just writes react rather than creating a figma drawing. All that training on writing code has made it easier for AI to just write the app than make an illustration of it.