Profi · Tool

Figma MCP practice path

How we use Figma’s MCP surface as a prescribed tool — cite the docs, run against a real file.

Purpose

Figma’s MCP and agent docs are Design resources. This entry is the **practice path**: when we allow an agent to touch a Figma file, which sources we trust, and which technology rails (MCP) we assume. Profi only — beginners stay on narrow canvas assist.

Steps

1. Confirm the file uses components/variables you care about — agent fidelity depends on them (`tokens-for-agents`). 2. Attach MCP via the documented Figma path; prefer read/inspect before write. 3. Scope the agent to one frame or flow; refuse whole-file rewrites without a decide gate. 4. Export or Code Connect only after the decide step in `brief-decide-handoff`.

When to use / Skip

Use when the design system already lives in Figma and you need agent help against that file. Skip when the work is OSS canvas-first (Penpot) or pure image gen — use those Design resources instead of forcing Figma MCP.

Connections

Sources

Figma developer docs — MCP server (read + write canvas) · End-to-end workflows
figma/mcp-server-guide — agent setup and skills · End-to-end workflows
Figma design agent — native to canvas · Paid tools
Figma Help — Code Connect · 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

Brief → decide → handoff · A Design × AI loop that ends in a decision and a shippable handoff, not a pile of generations.
MCP design → code · Structured Figma context via MCP into code — components and tokens, not PNG archaeology.
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/tools/figma-mcp-practice.md