mcpField
C
create-figjam-content

create-figjam-content

github.com/southleftProductivity2069 installsUpdated 21w ago
Repository

About create-figjam-content

A skill for creating and reading FigJam boards through Figma's Plugin API. It supports fine-grained control over board elements and is intended for work that needs more detail than a one-call diagram generation.

Key features

  1. 01Create sticky notes and batches
  2. 02Add shapes, sections, tables, and code blocks
  3. 03Connect elements using node IDs
  4. 04Auto-arrange board content
  5. 05Read board contents and connections

Use cases

  1. 01Building a board with specified colors and positions
  2. 02Adding elements to an existing FigJam board
  3. 03Checking created elements and their connections

MCP support

The skill uses the `use_figma` tool to run Figma Plugin API snippets. It requires the Figma Desktop app and is limited to FigJam files.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/southleft/skills-for-figma --skill create-figjam-content

After installing, type/create-figjam-contentin Claude Code to confirm it loaded.

Bundled filesreferences/figjam-snippets.md

Details

From the project README

create-figjam-content — author & read FigJam boards

Build FigJam boards one element at a time and read them back. Covers stickies (single + batch), connectors, shapes-with-text, sections, tables, code blocks, auto-arrange, plus get board contents and get connections. This gives you fine-grained control when the native one-shot generate_diagram is too coarse (e.g. you want specific colors, positions, magnets, or to extend an existing board).

Skill boundaries

  • use_figma rules — load the official figma-use skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level await + return (no IIFE, no figma.closePlugin(); console.log is not returned), inputs inlined as const at the top of each script, colors in 0–1 range, load fonts before any text op, await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry).
  • One complete snippet per operation → references/figjam-snippets.md.
  • Whole-diagram generation in one call → use the native generate_diagram tool instead.

Workflow

  1. Confirm it's a FigJam file. Every op throws outside FigJam. Check first: return { editorType: figma.editorType }; — it must be 'figjam'.
  2. Pick the operation from references/figjam-snippets.md: create sticky / stickies / connector / shape-with-text / section / table / code block, auto-arrange, or read board contents / connections.
  3. Run the snippet via use_figma (skillNames: "create-figjam-content"), editing the inlined constants (text, position, color, node IDs).
  4. Connectors need real node IDs. Create the nodes first, capture their returned IDs, then create connectors referencing those IDs (start/end + magnets).
  5. Return created IDs and, after a batch, read the board back (get board contents) to confirm.

Notes

  • Fonts must be loaded before text. Stickies, shapes-with-text, table cells, and connector labels all write text — each snippet await figma.loadFontAsync(...) before setting .characters, with an Inter fallback where the default font may be unavailable.
  • Sticky colors use a named palette (YELLOW, BLUE, GREEN, PINK, ORANGE, PURPLE, RED, LIGHT_GRAY, GRAY); other colors fall back to the default sticky fill.
  • Shape shapeType values: SQUARE, ROUNDED_RECTANGLE, ELLIPSE, DIAMOND, TRIANGLE_UP, TRIANGLE_DOWN, PARALLELOGRAM_RIGHT, PARALLELOGRAM_LEFT, etc.
  • Connector magnets: AUTO, TOP, BOTTOM, LEFT, RIGHT.
  • These tools require the Figma Desktop app (the Plugin API isn't available in the browser).

Comments

Markdown supported