Figma-AI-Bridge: Skill for Claude Code

Figma Documentation Page

Build a structured documentation page in Figma using a standard layout format. One command — generate content, call create_doc_page, done.

Prerequisites

• figma-ai-bridge plugin running in Figma and connected
• The create_doc_page command registered in code.js
• Helper: scripts/figma_cmd.mjs <channel> create_doc_page '<paramsJSON>'

Workflow

1. Generate Content

Read the user's topic, spec, or description. Organize content into sections:

{
  "title": "Document Title",
  "width": 1600,
  "x": 0,
  "y": 0,
  "sections": [
    { "heading": "Section Title", "body": "Paragraph text..." },
    { "heading": "Comparison", "columns": [{"text": "Left col"}, {"text": "Right col"}] },
    { "heading": "Feature Matrix", "table": {
        "headers": ["Requirement", "Option A", "Option B"],
        "rows": [
          ["Goal-oriented workflows", "✅ Native", "❌ Not core"],
          ["Multi-step execution", "✅ First-class", "⚠️ Limited"]
        ]
      }
    }
  ]
}

Each section has ONE of these content types:

• body — paragraph text with \n for line breaks
• columns — array of {text} objects (for side-by-side comparison)
• table — {headers: [...], rows: [[...], ...]} (for structured data, feature matrices)

Information Design Guidelines

Content type	Best format	Example
Narrative explanation	body	Executive summary, background, recommendations
Pros/cons, either/or	columns	"Follow this" vs "Don't follow that"
Feature comparison matrix	table	Requirements × options with ✅/❌
Structured criteria list	table	Dimensions with ratings or status
Side-by-side analysis	columns	Two approaches described in prose
Action items / bullet lists	body	Numbered steps, bullet points
Visual reference with description	columns + imageNodeId	Component screenshot + explanation text

Cloning Visuals from Source

Columns and body sections support imageNodeId to clone an existing Figma node into the new doc:

• columns[].imageNodeId — clone into that column (image above text)
• section.imageNodeId — clone into the body section (image above text)