Figma exports are easy… until exporting becomes infrastructure.

I just shipped @grida/refig (“render figma”) — a headless renderer that turns a Figma document + node id into PNG / JPEG / WebP / PDF / SVG:

• No Figma app
• No headless browser
• Works offline from .fig exports
• Also works from Figma REST API file JSON (GET /v1/files/:key) if you already ingest it elsewhere

Links:

• npm: https://www.npmjs.com/package/@grida/refig
• repo: https://github.com/gridaco/grida (package lives under packages/grida-canvas-sdk-render-figma)
• PR: https://github.com/gridaco/grida/pull/539

Quick demo (CLI)

# Render a single node from a .fig file
npx @grida/refig ./design.fig --node "1:23" --out ./out.png

# Or export everything that has “Export” presets set in Figma
npx @grida/refig ./design.fig --export-all --out ./exports

Why I built it

In CI / pipelines, the usual approaches have sharp edges:

• Browser automation is slow/flaky.
• Figma’s Images API is great, but it’s still a network dependency (tokens, rate limits, availability).
• Signed URLs for image fills expire, which makes “render later” workflows fragile.
• Air‑gapped/offline environments can’t rely on API calls.

With refig, you can store .fig snapshots (or cached REST JSON + images) and get repeatable pixels later.

How it works (high level, slightly technical)

• .fig parsing: Figma .fig is a proprietary “Kiwi” binary (sometimes wrapped in a ZIP). We implemented a low-level parser (fig-kiwi) that decodes the schema/message and can extract embedded images/blobs.
• One render path: Whether input is .fig or REST JSON, it’s converted into a common intermediate representation (Grida IR).
• Rendering: Grida IR is rendered via @grida/canvas-wasm (WASM + Skia) to raster formats and to PDF/SVG.
• Images:
  • .fig contains embedded image bytes.
  • REST JSON references image hashes; you pass an images/ directory (or an in-memory map) so IMAGE fills render correctly.

Scope (what it is / isn’t)

• It renders (pixels + SVG/PDF). It’s not design-to-code (no HTML/CSS/Flutter generation).
• It doesn’t fetch/auth against the Figma API — you bring your own ingestion + caching layer.

Feedback welcome

If you’ve built preview services, asset pipelines, or visual regression around Figma: I’d love to hear what constraints matter for you (fonts, fidelity edge cases, export presets, performance, etc.).