Figjam Builder

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.

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.

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.

// 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.