Package

@grida/refig

Headless Figma renderer — render Figma documents to PNG, JPEG, WebP, PDF, or SVG in Node.js (no browser required) or directly in the browser. Deterministic exports, offline .fig support, CLI and library API.

The interactive Grida Canvas preview needs a large screen. Open this page on a tablet or desktop to drop files into the live demo.

Read docs npm

Demo video

Key features

Node.js and browser entrypoints
CLI and library API
Offline rendering from .fig files
REST API JSON input
Deterministic, CI-friendly exports
Rich text (attributed text) support

Quick start (Node.js)

import { writeFileSync } from "node:fs";
import { FigmaDocument, FigmaRenderer } from "@grida/refig";

const doc = FigmaDocument.fromFile("./design.fig");
const renderer = new FigmaRenderer(doc);

const { data } = await renderer.render("1:23", { format: "png", scale: 2 });
writeFileSync("out.png", data);
renderer.dispose();

Quick start (CLI)

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

# Export everything with Figma export presets
npx @grida/refig ./design.fig --export-all --out ./exports

Need a real-time viewer instead?

If you need an interactive, embeddable Figma viewer rather than headless rendering, check out the Embed Viewer (/embed/v1/figma). It renders .fig and REST JSON in the browser as a read-only viewer via iframe, with events using original Figma node IDs — great for live previews, design handoff, and embedding designs in your app.

Embed SDK docs

For full documentation and API reference, see the refig docs.

Live preview

On the right, drop a .fig export, Figma GET /v1/files/:key JSON, or REST archive .zip into the Grida Canvas WASM surface (read-only).