Figma MCP + Augment: Parallel Agent Workflows

Always use frame-level links (copy from Figma address bar), not file-level URLs. Rate limits apply per tool call — plan parallelism accordingly (Pro: 200/day, Enterprise: 600/day).

Tools

Tool	Purpose
get_design_context	Frame structure as React + Tailwind
get_variable_defs	Design tokens (colors, spacing, typography)
get_code_connect_data	Maps Figma nodes → codebase components
generate_figma_design	Pushes live web UI → Figma layers (remote server only)
use_figma	Executes JS in Figma via Plugin API — write operations (alpha)

Patterns

Design → Code (Fan-Out)

Assign one agent per frame link. Each agent: get_design_context → get_variable_defs → get_code_connect_data → implement.

Figma as Living Spec

Store frame links in agents.md. Agents always fetch fresh context — no stale screenshots.

## Figma MCP
Always call get_design_context before writing any UI. Treat output as authoritative.
Tokens follow: [your convention]. Use frame-level links only.
Frame links:
- [feature]: [link]

Write-Back (Code → Figma)

After implementing: generate_figma_design pushes the running app to Figma for designer review. Optionally run a verifier agent in parallel using get_design_context to diff spec vs. implementation.

Write to Figma (use_figma — Alpha)

Runs JS against the Plugin API to create/modify variables, components, and variants.

• Load figma-use skill first (from alpha plugin zip) — contains required API rules
• Writes are sequential only — never parallelize use_figma calls
• After each step: validate with get_metadata, clean up orphans before retrying on error

Troubleshooting

Problem	Fix
Generic HTML output	Set up Code Connect in Figma Dev Mode
Wrong node returned	Use ?node-id= frame links, not file root
Duplicate nodes after retry	Run get_metadata, remove orphans, then retry
Write corruption	use_figma must be sequential — one call at a time