generating-figma-design

{{ACTIVE_RULES}}

Generating Figma Design

Overview

Unified make flow: CSpec → scene graph → compiler → Figma execute → screenshot → verify. Replaces the legacy spec → design → review cycle with a single compiler-driven action. All tokens resolve against the knowledge base; all Figma API rules are enforced by the compiler.

When to Use

Invoke when the user:

• says make, design, create, build, generate, or asks for a "new component" / "new screen"
• has already run setup (knowledge base exists)
• has an MCP transport available (console or official)

Do NOT use if:

• the user is adjusting an existing design that is already in Figma — use learning-from-corrections instead
• the user is archiving or shipping — use shipping-and-archiving
• the knowledge base is missing — run extracting-design-system first

Procedure

Before starting, load:

• references/compiler-reference.md (repo-root) — scene graph JSON format and rules
• references/transport-adapter.md (repo-root) — transport detection and tool mapping

Prerequisites

• Knowledge base exists (registries populated) — if not: "Run setup first"
• MCP transport available (see references/transport-adapter.md (repo-root) Section A)

---

Phase A — Context (target: 30s)

A1. Detect transport

Read references/transport-adapter.md (repo-root) Section A. Determine console vs official transport.

Console: figma_get_status() -> setup.valid: true
Official: whoami() + test use_figma call

Report:

Transport: {console | official}

A2. Load registry index

Load the summary of available DS components — names and types only, not full registry data:

• registries/components.json — extract component names, variant property names, and keys
• registries/variables.json — extract variable name paths (for token reference validation)
• registries/text-styles.json — extract style names (for $text/ reference validation)
• registries/icons.json — extract icon names (if file exists)
• registries/logos.json — extract logo names (if file exists)