/figma-use-figjam

Plan Content for FigJam Boards

When NOT to use this skill: Do NOT read this skill for analysis, summarization, or investigation of existing board content (e.g. "summarize this board", "what themes are here?", "analyze the feedback"). This skill is exclusively for planning NEW content to be created on the board.

Do NOT use this skill for flowcharts, architecture diagrams, sequence diagrams, state diagrams, or entity relationship diagrams (ERDs). For those, use the figma-plugin:figma-generate-diagram skill and the generate_diagram tool.

Use this skill when determining what content to include for generated FigJam board content. Given a user's request (e.g. "make a brainstorm template", "retro board", "ice breaker", "scaffold"), produce a sequential outline that downstream skills can use to create sections, text, stickies, and layout.

Must be loaded alongside the figma-use-figjam skill, which provides the FigJam Plugin API references (create-section, create-sticky, create-text, position-figjam-nodes) needed to render the planned content.

Part 1: Design Principles

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.

Type scale

Use Inter exclusively. Subtitles should be 40-50% the size of their parent heading.

Color semantics

White cards inside colorful containers. Section backgrounds alternate warm/cool for rhythm: peach, lavender, soft blue, light gray.

Key rule: Gold = "look here." Red = "this is bad." Don't use red for attention.

Proportion and alignment

• Size sections to fit content, not the other way around
• 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

Every board needs an entry point

Board title (60-96px) at top-left, clearly visible at overview zoom. For templates, add a meta/instructions section. For meetings, a colored agenda sticky.

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(...)

Size from content outward. Choose card width based on the text inside it (body text reads well at 400-1000px depending on density). Derive section width from card count and card width. Derive board width from sections. Never divide a container's width to get card width. Never stretch a card to fill its parent. Sections and cards don't need to be the same width as each other unless they share a content pattern.

For participatory zones, size to the expected activity, not the current content. Workshop sections, feedback areas, brainstorm columns, and retro lanes exist for other people to fill. Size them to fit the expected number of contributors. Pre-seed with a few example stickies to signal the interaction pattern.

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

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

For the canonical FigJam palettes (sticky / section / connector / shape / label), see figjam-colors. The palette below is a derived set of accent colors and section tints used specifically for board-content layouts (templates, retros, brainstorms) — they're not exact FigJam palette swatches.

const black = { r: 0.07, g: 0.07, b: 0.07 }
const gray = { r: 0.35, g: 0.35, b: 0.35 }
const red = { r: 0.75, g: 0.18, b: 0.18 }
const orange = { r: 0.72, g: 0.38, b: 0.08 }
const green = { r: 0.12, g: 0.5, b: 0.3 }
const blue = { r: 0.22, g: 0.4, b: 0.75 }
const purple = { r: 0.45, g: 0.3, b: 0.65 }
const attention = { r: 0.85, g: 0.65, b: 0.1 } // gold
const attentionLight = { r: 1, g: 0.85, b: 0.2 } // bright gold (starburst fills)
const attentionBg = { r: 1, g: 0.96, b: 0.85 } // soft gold (card tint)

// Section backgrounds
const white = { r: 1, g: 1, b: 1 } // #FFFFFF
const lightGray = { r: 0.976, g: 0.976, b: 0.976 } // #F9F9F9
const lightGreen = { r: 0.922, g: 1, b: 0.933 } // #EBFFEE
const lightTeal = { r: 0.945, g: 0.996, b: 0.992 } // #F1FEFD
const lightBlue = { r: 0.961, g: 0.984, b: 1 } // #F5FBFF
const lightViolet = { r: 0.973, g: 0.961, b: 1 } // #F8F5FF
const lightPink = { r: 1, g: 0.941, b: 0.98 } // #FFF0FA
const lightRed = { r: 1, g: 0.961, b: 0.961 } // #FFF5F5
const lightOrange = { r: 1, g: 0.969, b: 0.941 } // #FFF7F0
const lightYellow = { r: 1, g: 0.984, b: 0.941 } // #FFFBF0

API surface

Native primitives: createText, createFrame, createRectangle, createEllipse, createLine, createStar, createPolygon, createVector, figma.union() / figma.subtract()

FigJam-specific: createSticky, createShapeWithText, createConnector, createSection, createTable, createCodeBlock, createNodeFromSvg

Not available: createComponent, createComponentSet

Choosing the right node type

Sections as cards

Cards are nested sections. They give you native FigJam grouping (zoom-to behavior, movable as a unit) with a background fill, and they nest cleanly inside parent sections.

const card = figma.createSection();
card.name = '';
card.resizeWithoutConstraints(width, height);
card.fills = [{ type: 'SOLID', color: white }];
// Sections don't support auto-layout — position children with absolute x/y
// inside the card, accounting for your own padding.

Sections nest. A board is a section that contains zone sections, which contain card sections. Use frames only for badges, pills, or other small containers that need auto-layout to center text.

Text

Canonical recipe: load every (family, style) you'll mutate → await → mutate → return IDs. Inter is preloaded in most environments but every style still needs an explicit load — and any non-Inter family (e.g. Merriweather, Roboto Mono, Figma Hand) absolutely does. See figma-use → gotchas.md → Canonical text-edit recipe.

// Load every (family, style) you'll mutate before any createText / characters write
await figma.loadFontAsync({ family: 'Inter', style: 'Bold' });
await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
await figma.loadFontAsync({ family: 'Inter', style: 'Semi Bold' });
await figma.loadFontAsync({ family: 'Inter', style: 'Medium' });

const t = figma.createText();
t.fontName = { family: 'Inter', style: 'Bold' };
t.fontSize = 32;
t.fills = [{ type: 'SOLID', color: black }];
t.characters = 'Title';
// For body text, constrain width:
t.resize(440, 10);
t.textAutoResize = 'HEIGHT';

Body text max width: 440-520px. Rich text via setRangeFontName and setRangeHyperlink.

Emphasis markers

Use sparingly. One or two per section max. They work by breaking the visual pattern at overview zoom.

Card-level:

• Gold border + warm tint = "pay attention" (neutral)
• Red border + red tint = "off-track" (negative status only)
• Warning triangle (createPolygon({ pointCount: 3 })) pinned to top-right corner
• Notification dot (createEllipse) with count inside

Section-level:

• Starburst (createStar({ pointCount: 8, innerRadius: 0.65 })) with gold fill and text ("NEW", "UPDATED")
• Bullseye (concentric rings with decreasing opacity)

Centering text over shapes: Always use a frame container. Never position text with manual x/y math.

// Load font BEFORE the text.characters write — required for every font, not just Inter
await figma.loadFontAsync({ family: 'Inter', style: 'Bold' });
const container = figma.createFrame();
container.resize(56, 56); container.fills = []; container.clipsContent = false;
const shape = figma.createStar(); shape.resize(56, 56);
container.appendChild(shape); shape.x = 0; shape.y = 0;
const text = figma.createText();
text.fontName = { family: 'Inter', style: 'Bold' };
text.characters = 'NEW';
container.appendChild(text);
text.x = (56 - text.width) / 2; text.y = (56 - text.height) / 2;

Flowchart emphasis: Green Yes / Red No pills. Octagon for hard blockers. Diamond (rotated rect) for decisions.

Tables

Style header rows with Bold weight and tinted fill. Size table width to match section width minus padding. Don't leave tables floating in whitespace.

Stickies

For discussion, not editorial content. Color semantics: blue=discussion, yellow=question, green=positive, pink=concern, red=blocker, teal=decision, violet=ideation.

Always lay out stickies in a grid. Rows and columns, consistent 64px gap, aligned to the top-left of the usable inset. Stickies are 240x240 (square) or 416x240 (wide, for longer text). These sizes are fixed; stickies cannot be resized. Never stagger, overlap, or let stickies touch section edges.

Part 3: Workflow

0. Understand the ask

What's the purpose? Who's the audience? Once or recurring? Match to an archetype if possible.

1. Plan the narrative

Outline beats/sections in plain text before writing code.

2. Build incrementally

First call: Create the white wrapper section at a rough estimated size (you'll resize it in the reflow pass).

Then for each sub-section:

1. Create cards and content first — size cards to fit their text
2. Create the container section sized to wrap those cards (card count × card width + gaps + padding)
3. Validate with get_screenshot. Fix before moving on.

3. Reflow pass

• textAutoResize = 'HEIGHT' on all text
• Resize cards to fit content
• Equalize card heights within rows where cards share a content pattern
• Resize each section to hug its children (measure rightmost/bottommost content edge + padding)
• Resize the board wrapper to hug all sections

4. Audit pass

• No overflow (child exceeds parent bounds)
• No overlap (consecutive text nodes collide)
• Section names cleared
• Spacing grid compliance
• Type scale compliance
• Color consistency

Part 4: Archetypes

Use these when the prompt matches a known board type.

Vision Board

3-5 narrative sections left-to-right. Optional working canvas below. Feedback capture at bottom. Mix text with stickies and screenshots.

Exec Review / Decision Board

Linear left-to-right story. 5-8 sections alternating warm/cool tints. Pink/magenta for decisions. Appendix below.

Area Review (Template)

Grid of identical team panels. Each team gets the same sub-section structure (discussion, KRs, project updates, references).

Pillar Check-in / Monthly Cadence

Time x teams grid. Columns = months, rows = teams. Board grows rightward.

Competitive Research

Freeform spatial map. Screenshot-dominant. Column sub-sections. Data tables for evidence.

Workshop / Brainstorm

Two zones: pre-filled analysis + live brainstorm stickies. Meta section with instructions at top-left. Participatory zones should be sized for the expected activity (how many people, how many stickies per person), not the pre-filled content. Pre-seed each zone with a few example stickies to set the tone and show participants what's expected.

Status Card Grid

Uniform cards with consistent layout. Progress bars and RAG status badges. Category labels on left edge.

Context | Options | Decision

Three zones side-by-side: Context (lavender, constraints), Options (2-3 white cards with upside/downside, rectangle dividers), Decision (pink, recommendation).

Vertical Metric Cards

Portrait cards (400-500px wide) with centered content. Tinted backgrounds per card.

Top-to-Bottom Flow

Vertical flowchart. Green Yes / Red No pills on connector paths. Distinct fills per node type. createShapeWithText for all nodes.

Anti-patterns

• Don't use stickies for editorial content. Text for narrative, stickies for discussion.
• Don't use shapes as decoration. Every shape communicates: flowchart node, data viz, or emphasis.
• Don't over-emphasize. One or two markers per section max.
• Don't use red for attention. Gold draws the eye without implying failure.
• Don't use em dashes. Periods, commas, or restructure.
• Don't build the entire board in one use_figma call. Work incrementally.
• Don't guess text height. Always textAutoResize = 'HEIGHT' and reflow.
• Don't use body text below 20px or metadata below 16px.
• Don't skip the wrapper section. Every board is one movable unit.
• Don't skip the entry point. Every board needs a visible title.
• Don't leave section names on. Clear them unless there's no title text inside.
• Don't make text-only boards. Mix text with visual evidence (screenshots, diagrams, stickies).
• Don't left-align vertical cards. Center hero numbers and text.
• Don't use green for large backgrounds. Reserve for small status indicators.
• Don't let text overlap. Reflow after setting content. This is a critical bug.
• Don't manually position text over shapes. Use a frame container for centering.
• Don't stretch cards to fill their parent. Width should serve readability.
• Don't size participatory zones to their pre-filled content. Size for expected activity.
• Don't scatter or stagger stickies. Always a grid with consistent gap.
• Don't split a bulleted list across multiple text nodes — one node per bullet. Put the whole list in a single multi-line text node (\n-separated) so line spacing, alignment, and reflow are handled by the text engine. Separate nodes drift, mis-space, and force you to position each one manually.