ComfyUI for FigJam

A FigJam plugin to browse your ComfyUI Cloud workflows, run one with custom settings, and drop the generated image (or video) straight onto the FigJam canvas.

Settings (paste API key) → Workflow list → Generation form → Generate
   → live progress → result placed on the canvas

---

How it works

FigJam plugin  (create-figma-plugin: TypeScript + Preact, Figma sandbox)
   src/main.ts  ── clientStorage (your key), canvas insertion
   src/ui.tsx   ── settings / list / form / progress (all fetch runs here)
        │  fetch() with your X-API-Key on every request
        ▼
Vercel proxy   (proxy/, Node serverless) — holds NO key of its own
   • relays your X-API-Key to Comfy Cloud; never stores it
   • adds CORS (the plugin iframe is an opaque origin)
   • streams output bytes back so the plugin only needs one allowed domain
        │  MCP over StreamableHTTP,  X-API-Key
        ▼
Comfy Cloud MCP  https://cloud.comfy.org/mcp
   list_saved_workflows · get_saved_workflow · run_saved_workflow
   · get_job_status · get_output

Why a proxy? The documented Comfy Cloud REST API has no "list workflows" endpoint — listing, the per-workflow parameter schema, and editor→executable conversion are only available through the Comfy Cloud MCP. The proxy speaks MCP with your key and exposes a small REST surface to the plugin. It's multi-user: each request carries the caller's own key, which the proxy relays and never persists.

---

Repository layout

/
  package.json          → create-figma-plugin config (manifest is generated)
  src/
    main.ts             → main thread: clientStorage + canvas insertion
    ui.tsx              → UI: settings / list / form / progress screens
    api.ts              → typed client for the proxy
    fields.ts           → customizable_inputs → form fields
    run.ts, output.ts   → run orchestration + output resolution
    screens/            → Settings, WorkflowList, GenerationForm, RunProgress
  proxy/                → Vercel serverless proxy (its own package.json)
    api/                → workflows, workflow, run, status, output, asset, upload-image
    dev.ts              → local dev server (mirrors Vercel routing)

---

Prerequisites

• Node 20+ and npm.
• Figma desktop app (dev plugins can only be imported there).
• A ComfyUI Cloud API key (comfyui-…) from platform.comfy.org/profile/api-keys.

---

Local development

You need two terminals: one for the proxy, one for the plugin build.

1. Run the proxy

cd proxy
npm install
npm run dev          # → http://localhost:3000

The proxy holds no key — it relays whatever X-API-Key the plugin sends.

Note: npm run dev (tsx) does not hot-reload. Restart it after changing anything under proxy/.

2. Build the plugin and import it

npm install
npm run build        # or: npm run watch  (rebuilds on change)

In the Figma desktop app, open a FigJam file, then Plugins → Development → Import plugin from manifest… and select this repo's generated manifest.json. Run it via Plugins → Development → ComfyUI for FigJam.

After a rebuild, re-run the plugin in FigJam to pick up the new UI. If the UI seems stale, a leftover npm run watch process may be overwriting the build — kill stray build-figma-plugin processes and rebuild.

3. Use it

Paste your comfyui-… key → Connect → pick a workflow → adjust inputs → Generate. Workflows with paid API nodes prompt for confirmation before spending credits.

---

Deploying the proxy to Vercel

1. Create a Vercel project with Root Directory = proxy/ (framework preset: Other). The api/*.ts files deploy as serverless functions automatically.
2. No environment variables are required — the proxy is keyless (keys are relayed per request). Optionally set COMFY_MCP_URL to override the MCP endpoint.
3. After it deploys (e.g. https://your-proxy.vercel.app), point the plugin at it:
   • src/config.ts → set PROXY_BASE to your Vercel URL.
   • package.json → set figma-plugin.networkAccess.allowedDomains to ["https://your-proxy.vercel.app"] (keep devAllowedDomains with http://localhost:3000 for local dev).
   • Rebuild (npm run build) and re-import the manifest.

---

Configuration reference

Where	Setting	Purpose
src/config.ts	PROXY_BASE	Proxy URL the plugin calls (localhost for dev).
package.json → figma-plugin.networkAccess.allowedDomains	proxy domain	Domains Figma lets the plugin reach in production.
package.json → …devAllowedDomains	http://localhost:3000	Domains allowed while running in development.
package.json → figma-plugin.id	plugin id	Placeholder is fine for dev; set a real id only to publish.
proxy env (optional)	COMFY_MCP_URL	Override the Comfy Cloud MCP endpoint.

---

Security

• No key is ever hardcoded. You paste it at runtime; it lives only in figma.clientStorage on your machine and is sent to the proxy per request.
• The proxy does not store keys — it relays them to Comfy Cloud and forgets them.
• The built plugin bundle contains no secrets (verify with grep -ri "comfyui-" build/ → only the placeholder text).

---

Supported outputs

• Images (PNG/JPG/GIF/WebP) are placed as image fills, sized (capped to 1024px), selected, and zoomed into view.
• Video is embedded when FigJam/your plan supports it; otherwise the plugin falls back to a clickable link node on the canvas.
• Other media (e.g. audio) is inserted as a link node.

---

Troubleshooting

• Manifest error "must be a valid URL" — allowedDomains entries must be valid lowercase URLs (or the special value "none").
• UI not updating after a code change — re-run the plugin; kill any stray npm run watch process that may be clobbering the build.
• Stuck on "Generating…" — make sure the proxy is running and was restarted after any change under proxy/.
• "Could not reach the proxy" — the proxy isn't running, or PROXY_BASE / allowedDomains don't match its URL.