figma-design-fetchlisted

# /figma-design-fetch The full Figma → code pipeline via the **official Figma MCP**: connect, fetch the design (code / vector / bitmap / screenshot) to disk, rebuild the screen with the project's **existing token-mapped components + real data**, and **visually self-verify** against the Figma screenshot until it converges. Agent-assisted with a **mandatory verification gate** — never paste raw generated code as production UI. > The reliability of design-to-code comes less from the MCP than from three things you control: **(a)** a > token-driven, mappable component library, **(b)** this fixed workflow with a **mandatory visual gate**, and > **(c)** deterministic non-LLM hooks (typecheck, prettier). None depend on your Figma plan. ## Master TOC - [When to use](#when-to-use) - [Prerequisites](#prerequisites) - [Setup A — Connect the Figma MCP (OAuth)](#setup-a--connect-the-figma-mcp-oauth) - [Setup B — Get a node-specific link](#setup-b--get-a-node-specific-link) - [Pre-fetch design pre-check lint (gate)](#pre-fetch-design-pre-check-lint-gate) - [The 5-step pipeline (each step is mandatory)](#the-5-step-pipeline-each-step-is-mandatory) - [Deterministic hooks (the quality spine)](#deterministic-hooks-the-quality-spine) - [Gotchas (tested — read before fetching)](#gotchas-tested--read-before-fetching) - [Figma export options ↔ MCP](#figma-export-options--mcp) - [References](#references) - [Companion](#companion) - [Provenance](#provenance) ## When to use - The user pastes a `