Profi · Workflow

MCP design → code

Structured Figma context via MCP into code — components and tokens, not PNG archaeology.

Purpose

Profi handoff in 2026 is MCP-shaped: Tabor, Mantlr, Reenbit, and agency playbooks all move structured design context into agents and repos. This workflow assumes a decided frame, a living DS, and Code Connect where it exists — AI interprets intent; it does not invent the product.

Steps

1. **Preconditions** — decided frame (`brief-decide-handoff`), tokens published (`tokens-for-agents`), MCP attached (`figma-mcp-practice`). 2. **Select nodes** — pass selection URLs / node ids, not whole-file dumps. 3. **get_design_context (or equiv)** — agent reads hierarchy, components, variables; refuse screenshot-only paths when MCP is available. 4. **Generate against the repo** — match existing package patterns; run the project’s lint/typecheck. 5. **Review as design+eng** — visual diff + code review; open PR only after both say yes.

When to use / Skip

Use for production-bound UI with a real component library. Skip for throwaway prototypes (`spec-ai-prototype`) or when the Figma file is unstructured — fix structure first. Falsifier: if the PR hard-codes colors that exist as variables, the MCP path failed — re-run with tokens.

Connections

Sources

Figma developer docs — MCP server (read + write canvas) · End-to-end workflows
Francesca Tabor — Figma-driven MCP production pipeline · End-to-end workflows
Mantlr — design handoff 2026 (Dev Mode, MCP, Claude Design) · End-to-end workflows
Reenbit — agentic design-to-code (brief → Claude Design → /design-sync) · End-to-end workflows
Figma Help — Code Connect · End-to-end workflows
Velox Studio — Figma to code operational playbook for agencies · End-to-end workflows

Technologies

FastMCP · Agentic Gateways
MCP Servers (reference) · Agentic Gateways

Taxonomy

Agentic · Technology layer
Tool Integration · Technology subcategory
Coding Agents · Technology subcategory

Figma MCP practice path · How we use Figma’s MCP surface as a prescribed tool — cite the docs, run against a real file.
Brief → decide → handoff · A Design × AI loop that ends in a decision and a shippable handoff, not a pile of generations.
Code ↔ canvas roundtrip · Pull running UI onto the canvas, refine with designers, push intent back to code.

All Design resources · Design × AI hub

design/practice/workflows/mcp-design-to-code.md