# Figjam Builder

> Build OR modify FigJam boards via the Figma Plugin API. Use when asked to create, edit, extend, restructure, add content to, or fix layout in a FigJam board — initial creation OR follow-up changes. Triggers on "make a FigJam", "build a board", "add to this FigJam", "update this FigJam", "fix the layout", "/figjam-builder", or any time the user shares a FigJam URL (figma.com/board/...) and wants v…

- **Type:** Skill
- **Install:** `agentstack add skill-prasantloki-figjam-builder-figjam-builder`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [prasantloki](https://agentstack.voostack.com/s/prasantloki)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [prasantloki](https://github.com/prasantloki)
- **Source:** https://github.com/prasantloki/figjam-builder

## Install

```sh
agentstack add skill-prasantloki-figjam-builder-figjam-builder
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# FigJam Builder

Build or modify FigJam boards via the Figma Plugin API. Use whenever the work involves visual or content changes to a FigJam — initial creation, edits, extensions, layout fixes, or restructuring.

**Prerequisites:** Load `figma-plugin:figma-use` AND `figma-plugin:figma-use-figjam` before calling `use_figma`. `figma-use` covers Plugin API rules, `figma-use-figjam` covers FigJam-native node types (sticky, shape-with-text, connector, section, table, label).

**When to load this skill.** Build, edit, extend, restructure, or add content to a FigJam board — not just initial creation. If the user shares a FigJam URL (`figma.com/board/...`) and asks for any visual or content change, load this. Skip only for one-off tweaks to a single existing node (recolor one rectangle, edit one text node) that don't need composition guidance.

---

## When to Use FigJam

FigJam earns its keep when spatial layout matters: comparing things side-by-side, showing multi-team status at a glance, or building a board that accumulates content over time. If you're driving a single decision through a linear argument, use Slides or Docs.

---

## Part 1: Design Principles

Nine things to hold in your head. The rest of this skill is how they show up in code.

**Direction of fit follows ownership.** Greenfield mode — the wrapper is yours — content drives container size. Build at ideal sizes; hug containers to content in the reflow pass. Modification mode — fixed container, eval slot, parent section you don't own — container shape is an input. Read width × height *both* (not just one axis), then pick a layout that suits the shape. Wide+short → fewer wider cards or horizontal strips, with cards grown tall enough to fill the vertical. Tall+narrow → vertical stacks. Most failures here come from reading only width and leaving the container half-empty vertically — if reformatting leaves obvious whitespace on either axis, grow card heights, reflow content, or pick a denser layout. Don't force a default layout into a frame that doesn't fit; check ownership before you commit.

**Decoration doesn't carry weight.** When something matters — a decision, a callout, a primary section — signal it directly through scale, weight, color, or position. Eyebrows are category tags, not emphasis. A small label above an important thing makes the thing feel smaller.

**The first frame teaches the eye, but volume descends — it doesn't crash.** Whatever opens a board or section sets the volume; the rest of the board sits a tier quieter, not silenced. The opening is the loudest moment, supporting sections carry their own claims at reduced weight, appendix content quieter still. A giant hero with bland everything-else reads as a single firework, not a piece.

**Hierarchy reads through ratio, weight, and color together.** Size is one of three levers, not the whole game. A subtitle at 75% of its heading still feels weak if it's also Regular and gray. Push two levers when you want hierarchy to register, all three when you don't want it missed.

**Enumeration form should match meaning.** Numbers say "sequence" or "of N" — use them when order or count is the point. Bullets say "set" — use them when items are peers and the list could be reordered without losing meaning. Number a decision flow; bullet a feature list.

**Form serves function — uniformity kills curatorial signal.** Equal grids work when items are peers and the comparison is the job. Varied sizes work when judgment is the artifact — a moodboard's exact 3×3 grid flattens the curator's voice. Pick the structure that carries the meaning.

**Geometry is a communication primitive.** Circles read identity. Squares read evidence. Skinny portrait cards read as content blocks; near-square cards read as image-dominant. Pick shape to differentiate role, not as default.

**Visual mass should match argument weight.** A small chart under a big headline reads as "not the point." If the chart is the point, size it like it. Every visual element claims a level of importance through its size — be honest about what's primary.

**Spatial relationships are part of the argument.** Overlap, crossings, and tight routing degrade the read. Generative diagram tools optimize for compactness, not breathing room — when the flow matters, hand-build it or accept the limitation.

---

### Type scale

Use **Inter** exclusively. Three levers control hierarchy: ratio, weight, color. Subtitles work best at 70-75% of their parent heading size, with weight (Bold vs Regular) and color (black vs gray) doing the role differentiation. When a subtitle looks weak, it's usually under-sized AND under-weighted — push ratio toward 80% and consider Medium instead of Regular before reaching for spacing changes.

**Default to the upper end of each range.** The floor of a range is the smallest the role can be without breaking. The middle is conservative; the upper end is the right default for FigJam boards, which get viewed at fit-zoom AND zoomed-in during meetings. Drop below the upper end only when a body block would outweigh its headline or a long subtitle needs to come down a tier to avoid wrapping.

**Wrap on phrase boundaries, not mid-clause.** A subtitle that breaks "the three architectural / options under review" reads worse than the same subtitle at one tier smaller that fits on a line, or sized to a wider container. If the wrap point lands awkwardly: shorten the text, drop a tier, widen the container, or break manually with `\n` at a natural phrase boundary — never ship the awkward wrap.

| Role | Size (default upper end) | Weight |
|------|--------------------------|--------|
| Board title | 96-144px | Bold |
| Board subtitle | 56-88px | Regular |
| Section heading | 64-96px | Bold |
| Section subtitle | 48-64px | Regular |
| Card title | 48-64px | Semi Bold |
| Body text | 32-48px | Regular |
| Metadata | 24-32px | Regular/Medium |

Eyebrows (small all-caps category labels) aren't in the scale. They contradict the "decoration doesn't carry weight" principle — if you reach for one, you're probably looking for emphasis and should use scale + weight instead.

### Color semantics

Every hue exists in three tiers (full palette block below in Part 2). The hue carries the meaning; the tier carries the role.

| Hue | Meaning | Most common tier |
|-----|---------|------------------|
| Yellow / gold | Attention — "look here." Neutral urgency, not negative. | Accent for marks; vibrant rarely (only for explicit attention callouts) |
| Orange | Problem / trending wrong | Accent + muted; vibrant for warning sections when scoped |
| Red | Critical / broken | Accent + muted; vibrant for one critical zone per board |
| Green | Healthy / shipped | Accent for status dots; muted for positive-state zones; vibrant only for an explicit success callout |
| Blue | Informational / in-progress | Most common zoning hue — muted blue is the default neutral section bg |
| Pink | Decision needed | Muted for aligned-outcome decisions (the common case); vibrant only for action-blocking moments |
| Purple | Exploration / ideation | Muted for zoning; vibrant for an active brainstorm column |
| Teal | Decision captured | Mostly vibrant (sticky); muted for "we agreed" zones |

**White cards inside muted containers.** That's the dominant pattern — most sections are muted-tier, cards inside are white, and the visual rhythm comes from alternating warm/cool muted tints.

**Vibrant tier is signal, used sparingly.** When a section's job is "pay attention here" (decision zone, critical callout, active brainstorm), it gets a vibrant background and the white-card-inside pattern stops applying — the section itself is the claim. Cap at one vibrant section per board.

**Key rules:**
- Gold = "look here." Red = "this is bad." Don't use red for attention.
- Vibrant tier ≠ wash. Sections washed in vibrant compete with each other; pick one to carry the signal.
- **Color difference alone isn't signal.** A hue change with no scale or weight change reads as noise, not emphasis. When you switch a section's tier or hue to signal something, also push type weight or size — color carried by undersized type doesn't register.
- **Coral/salmon (pinkVibrant, redVibrant) is the loudest move you can make. Don't default to it — even for decisions.** Reserve it strictly for *action-blocking* moments: the team is BLOCKED, the decision is alarm-bell urgent, the room has to do something before they leave. Most "decisions" on a PM board are aligned outcomes — the room already knows where it's heading, the board confirms. Those get a **muted decision treatment**: `pinkMuted` background, accent-pink left stripe or border, recommendation text at section-heading scale with strong weight, supporting rationale below. Color is the category tag; scale + weight do the emphasis. For "this is important but not urgent," reach for the softer vibrants first: `yellowVibrant` (sunshine, neutral attention), `blueVibrant` (active/discussion), `purpleVibrant` (lavender, exploration), `tealVibrant` (mint, decision-captured), `orangeVibrant` (peach, trending-wrong). Coral is for the alarm bell, not the conclusion.

### Proportion and alignment

- Size sections to fit content (greenfield); fit content to the section (modification) — see Direction of Fit principle
- Center elements in rows on the same y-axis
- Center content in portrait/vertical cards
- Position badges relative to text, not section edges
- At least 12-16px breathing room between title and body

### Entry point and claims

Board title at top-left, clearly visible at overview zoom — see the type scale above for size. For templates, add a meta/instructions section. For meetings, a colored agenda sticky. Three rough volumes per board (entry / supporting / appendix); see the "first frame teaches the eye" principle.

**Headlines work best as claims, not topics.** "Day 0 expectations double session length" lands harder than "Day 0 expectations." The headline should tell the reader what to believe; the column or section below is the proof. This applies at the board level and within sections.

### Match the move to the job

Use the dedicated tool when the shape fits. `generate_diagram` for Mermaid-grammar diagrams (flowchart, sequence, ERD, state, gantt). Tables for cross-cutting comparison — when you have N items × M dimensions, the table is almost always clearer than a card grid. Pull-quote cards for captured voice. The hand-built version loses when the shape matches the tool.

Tinted section backgrounds work when 3+ zones need distinct visual energy; a single-zone board doesn't need a tint. When a section reads as muted, reach for type weight and color before padding — muted boards are usually under-typed, not under-spaced.

---

## Part 2: Construction Rules

### Board structure

**Always wrap the entire board in one top-level white section.** This makes the board a single movable unit.

```js
const board = figma.createSection();
board.name = '';
board.resizeWithoutConstraints(estimatedW, estimatedH);
board.fills = [{ type: 'SOLID', color: {r:1, g:1, b:1} }];
// All content goes inside: board.appendChild(...)
```

Sizing rules follow the **Direction of fit** principle. Greenfield: choose card width from the text inside (body 400-1000px depending on density), derive section width from cards, derive board width from sections. Modification: divide the container — that's the input you were handed. Whichever mode, the greenfield instinct "3 columns inside the container" plus a wide container produces narrow columns with wasted space; let the actual shape pick the layout.

**Participatory zones size to expected activity, not current content.** Workshop sections, feedback areas, brainstorm columns exist for other people to fill. Pre-seed with a few example stickies to signal the pattern.

**Clear all section names** unless the section has no title text inside it.

### Reading direction and grouping

Left-to-right, top-to-bottom. Context on the left, evidence in the middle, proposal/asks on the right. Supporting detail and appendix below.

**Tight clustering** (60-92px) = same thought. **Loose spacing** (200-400px) = different topics. **Zone breaks** (1000px+) = different part of the board.

### Spacing grid

All spacing in multiples of 4px.

```js
const spacing = {
  sectionPadding: { top: 68, right: 60, bottom: 100, left: 80 },
  elementGapH: 60,    // between cards/columns
  elementGapV: 64,    // between stacked elements
  siblingGapH: 92,    // between sibling sections
  siblingGapV: 120,   // between section rows
  contentPadding: 24, // inside cards
};
```

**Lay out inside the inset, not from one edge.** Compute usable area first (container size minus padding on all sides), then fit items within it.

### Color palette

Every FigJam hue has three tiers. They're not interchangeable — each tier does a specific job, and picking the wrong tier is what makes boards feel either washed-out or like a circus.

| Tier | Luminance | Job |
|------|-----------|-----|
| **Accent** | ~30% | Type, strokes, indicator dots, small fills. The "name" of the color. |
| **Vibrant** | ~75% | FigJam's native sticky palette. Signal sections, primary callouts, decision zones — places where the section IS the signal. |
| **Muted** | ~95% | Zone backgrounds that hold white cards. Organizational rhythm without competing with the content. |

**Rule of tier:** Pick by job. Vibrant for signal, muted for zones, accent for marks. White cards live inside muted sections; vibrant sections carry their own claim and don't need card-on-zone contrast. Cap one vibrant section per board — more than one and you're back to the circus.

```js
// Neutrals
const black     = {r:0.07,  g:0.07,  b:0.07};   // #121212  accent text
const gray      = {r:0.35,  g:0.35,  b:0.35};   // #595959  secondary text
const grayMid   = {r:0.847, g:0.847, b:0.847};  // #D8D8D8  vibrant gray (signal divider, sticky)
const lightGray = {r:0.976, g:0.976, b:0.976};  // #F9F9F9  muted bg
const white     = {r:1,     g:1,     b:1};      // #FFFFFF  cards

// Yellow / gold — neutral attention ("look here")
const yellow       = {r:0.85, g:0.65, b:0.10};  // #D9A61A  accent (marks, eyebrows when warranted)
const yellowVibrant= {r:1,    g:0.886,b:0.388};  // #FFE163  vibrant (sticky, signal section)
const yellowMuted  = {r:1,    g:0.984,b:0.941};  // #FFFBF0  muted (zone bg)

// Pink — decision needed
const pink         = {r:0.70, g:0.20, b:0.45};  // #B3336E  accent
const pinkVibrant  = {r:1,    g:0.643,b:0.643};  // #FFA4A4  vibrant (decision zone, "act here")
const pinkMuted    = {r:1,    g:0.941,b:0.980};  // #FFF0FA  muted

// Green — healthy / shipped
const green        = {r:0.12, g:0.50, b:0.30};  // #1F804D  accent (status indicator)
const greenVibrant = {r:0.557,g:0.886,b:0.671};  // #8EE2AB  vibrant (positive sticky, success zone)
const greenMuted   = {r:0.922,g:1,    b:0.933};  // #EBFFEE  muted

// Blue — info / in-progress
const blue         = {r:0.22, g:0.40, b:0.75};  // #3866BF  accent
const blueVibrant  = {r:0.580,g:0.745,b:1};      // #94BEFF  vibrant (discussion sticky, neutral signal)
const blueMuted    = {r:0.961,g:0.984,b:1};      // #F5FBFF  muted

// Violet — exploration / ideation
const purple       = {r:0.45, g:0.30, b:0.65};  // #734DA6  accent
const purpleVibrant= {r:0.780,g:0.710,b:1};      // #C7B5FF  vibrant (ideation sticky, exploration zone)
const purpleMuted  = {r:0.973,g:0.961,b:1};      // #F8F5FF  muted

// Teal — decision captured
const tealVibrant  = {r:0.557,g:0.918,b:0.886};  // #8EEAE2  vibrant (decision-captured sticky)
const tealMuted    = {r:0.945,g:0.996,b:0.992};  // #F1FEFD  muted

// Orange — regression / trending wrong
const orange       = {r:0.72, g:0.38, b:0.08};  // #B86114  accent
const orangeVibrant= {r:1,    g:0.722,b:0.475};  // #FFB879  vibrant (warning sticky, "trending wrong" callout)
const orangeMuted  = {r:1,    g:0.969,b:0.941};  // #FFF7F0  muted

// Red — critical / block

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [prasantloki](https://github.com/prasantloki)
- **Source:** [prasantloki/figjam-builder](https://github.com/prasantloki/figjam-builder)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-prasantloki-figjam-builder-figjam-builder
- Seller: https://agentstack.voostack.com/s/prasantloki
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.