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-useskill first (from alpha plugin zip) — contains required API rules - Writes are sequential only — never parallelize
use_figmacalls - 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 |