Create figjam content
Skill southleft/skills-for-figma/skills/create-figjam-content
Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes', 'make a section/table/code block in FigJam', 'auto-arrange the board', 'read what's on the FigJam board', 'map the connections'. More granular than the native generate_diagram (which produces a whole diagram in one shot). FigJam files only (figma.editorType === 'figjam'). Requires the Figma Desktop app (Plugin API).From its SKILL.md
npx -y skills add southleft/skills-for-figma --skill create-figjam-contentAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
3.5 KB, 711 tokens by cl100k_base, as published. Nobody here has run it
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_figmarules — load the officialfigma-useskill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-levelawait+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat 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_diagramtool instead.
Workflow
- Confirm it's a FigJam file. Every op throws outside FigJam. Check first:
return { editorType: figma.editorType };— it must be'figjam'. - 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.
- Run the snippet via
use_figma(skillNames: "create-figjam-content"), editing the inlined constants (text, position, color, node IDs). - Connectors need real node IDs. Create the nodes first, capture their returned IDs, then create connectors referencing those IDs (start/end + magnets).
- 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
shapeTypevalues: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).
What ships with it: 1 file
10.3 KB alongside SKILL.md
references/
- figjam-snippets.md10.3 KB
Gives 0 of the 12 instructions most diagrams charts skills give in 711 tokens
Counted across 397 of the 418 authors here whose files we hold, read 2026-09-06
- Quote labels containing special charactersin 18 of 397, across 17 files
- Choose the right diagram type for the datain 15 of 397, across 13 files
- Create a detailed Mermaid diagramin 12 of 397, across 11 files
- Validate Mermaid syntax before outputin 11 of 397, across 9 files
- Wrap diagrams in fenced Mermaid code blocksin 11 of 397
- Read the reference file for the chosen diagram typein 10 of 397, across 6 files
- Label every connection descriptivelyin 8 of 397, across 7 files
- Use stateDiagram-v2 for state diagramsin 7 of 397
- Declare the diagram type on the first linein 7 of 397
- Keep one concept per diagramin 7 of 397
- Cap diagrams at 15 nodes and split over 20in 7 of 397
- Describe the diagram before generating itin 7 of 397
Said here and by no other author read
- Load the figma-use skill first
- Pick the operation from the snippets reference
- Run snippets via use_figma
- Create nodes first, then connect using captured IDs
- Return created IDs after operations
- Read the board back after batches to confirm
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.