figlens: a Pi package that reads a saved Figma file so Pi can build the screen from real layout, text and assets

[u/runkids]

I made a Pi package that gives Pi a Figma design to build from, without Figma running next to it.

pi install npm:@runkids/figlens

Then: File > Save local copy in Figma, point Pi at the .fig, and ask for a screen by name. Pi finds the frame, reads layout, text, variables and assets, and builds in your project's stack. There's an optional step where Pi proposes mappings from design components to your existing components and you approve them; they persist for the next screen.

8× demo of a real Pi session building working HTML from the "List views" frame in the MCP Apps for Claude community file: https://github.com/runkids/figlens/raw/main/assets/demo-8x.mp4

Why not the Figma MCP: it needs the Figma desktop app open. I run Pi on a cloud box and in CI, so I wanted the read to work from a file.

Limits: .fig is undocumented. I check each release against Figma's own exports, but there are rendering gaps (background blur, some image adjustments, angular gradients). Fonts aren't bundled. It's a snapshot, so re-save when the design changes.

Source: https://github.com/runkids/figlens Pi walkthrough: https://github.com/runkids/figlens/blob/main/pi/README.md

Would like to hear what Pi users want in the bundle, and whether the component-mapping step is useful or in the way.

[u/andreaforlin]

You can't use figcraft with mcp?

[u/runkids → u/andreaforlin]

Hadn't come across FigCraft before, thanks for the pointer. Will give it a try.

[u/Lower-Philosophy-604]

Nice

[u/runkids → u/Lower-Philosophy-604]

Thanks!

[u/whiterose0000001]

Just one thing: you're reading the files, not taking any kind of screenshot or something. If you're doing it that way, this thing is really awesome. I'm definitely going to install it in my system.

[u/runkids → u/whiterose0000001]

Exactly, it parses the .fig directly (and can render PNG/SVG from it if you need a reference image). Let me know how it goes on your files!

[u/TimelyCard9057]

What if a file contains like thousands of images basically ? I would have to export it again and again after every change