spinagram

Figma and FigJam

Build native, editable Figma and FigJam nodes through the Figma MCP.

Figma

-f figma writes out/figma/<slug>-NN.js plus <slug>.assets.json. Through the Figma MCP:

  1. Run each -NN.js in order with use_figma against a Design or Slides file. The diagram becomes a frame (Design) or a slide (Slides) named spinagram:<id>. Re-running rebuilds its content in place and keeps the canvas position.
  2. Images: use_figma cannot add image bytes, so the script draws placeholders and returns imageTargets: [{nodeId, asset}]. Call upload_assets(fileKey, count=n, nodeIds=[...]), then POST each file listed in assets.json to its returned URL.

Edges are vectors with arrow caps. Figma's Connector node exists only in FigJam.

Dry-run a script on a mock Plugin API:

node tests/js/figma_mock.mjs out/figma/<slug>-01.js

FigJam

spinagram render specs/ -f figjam -o out/ writes, under out/figma/, library-mode scripts plus the icon bundle (icons/, icon-library.js, README.md). With the Figma MCP: upload_assets for every file in icons/ (multipart, so each layer is named after its file), run icon-library.js once, then each <slug>-NN.js. Details are in the generated README.md.

FigJam reads connector positions in pixels, so edges anchored on a side centre become magnet endpoints and everything else a pixel position.

On this page