Asset handling

• The Figma MCP Server provides an assets endpoint which can serve image and SVG assets.
• IMPORTANT: If the Figma MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly.
• IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload.
• IMPORTANT: do NOT use or create placeholders if a localhost source is provided.

Link-based prompting

• The server is link-based: copy the Figma frame/layer link and give that URL to the MCP client when asking for implementation help.
• The client cannot browse the URL but extracts the node ID from the link; always ensure the link points to the exact node/variant you want.

References

• references/figma-mcp-config.md — setup, verification, troubleshooting, and link-based usage reminders.
• references/figma-tools-and-prompts.md — tool catalog and prompt patterns for selecting frameworks/components and fetching metadata.
• Baton landing docs — https://getbaton.dev/ (Baton documents a built-in MCP server, worktree isolation, workspace badges, and agent presets; used for agent-driven implementation flows). Source fetched: https://getbaton.dev/ (accessed 2026-04-11).
• Model Context Protocol servers — https://github.com/modelcontextprotocol/servers (primary repo for MCP server implementations and releases). Latest activity: commit on 2026-03-17 indicates the repo is active.
• OpenAI Codex: Figma designs → code guidance — https://developers.openai.com/codex/use-cases/figma-designs-to-code (confirms the get_design_context → get_metadata → get_screenshot flow and localhost-asset handling). Source fetched: https://developers.openai.com/codex/use-cases/figma-designs-to-code (accessed 2026-04-11).

Research-backed changes

Updated to fold in a concrete tactic for running agent-driven implementation using Baton's built-in MCP server and isolated workspaces. The change is strictly tactical: how to run agents that call Figma MCP endpoints, capture screenshots/context, and produce git-isolated branches for review. Sources: Baton landing page and the Model Context Protocol servers repo, plus OpenAI Codex Figma-to-code guidance (see References).

Baton-driven agent workspaces

When you want an agent to implement a Figma-driven task end-to-end, prefer running it inside a Baton workspace configured with a Figma MCP client preset. Concrete steps:

1. Create a Baton workspace (new worktree/branch) for the task. Baton creates a separate git worktree per workspace so agents do not conflict with each other.
2. Configure a custom agent preset that launches the project's MCP client CLI with required env vars (FIGMA_TOKEN, MCP_SERVER_URL, PROJECT_TOKEN), and an initial command to run get_design_context for the exact node ID (extracted from the Figma link).
3. Let the agent follow the required flow: get_design_context → (if needed) get_metadata + re-fetch nodes → get_screenshot → download assets → implement changes.
4. Agent should open a draft branch, produce a diff and leave a PR-ready branch. Use Baton's diff viewer to review changes before merging.
5. Use Baton's status badges and "Accept Edits" toggle to pause agents when human review is required (e.g., component reuse decisions, ambiguous interactions).

Rationale: Baton documents a built-in MCP server and worktree isolation that lets agents spawn workspaces and update workspace metadata programmatically — use that to keep agent work isolated and reviewable. (Source: https://getbaton.dev/)

Reusable agent prompt (template)

Use this prompt as the agent's first instruction when launched in a Baton workspace. It is intentionally prescriptive and maps to the required flow above.

Prompt: "You are a development agent working in a git-isolated workspace. Task: implement the Figma node at <FIGMA_LINK> to match design and behavior.

Step 1: Run get_design_context for the node ID extracted from <FIGMA_LINK>. Save the structured node JSON as 'design.json'. Step 2: If design.json is truncated or missing children, run get_metadata for the parent frame and re-run get_design_context for the minimal set of nodes. Step 3: Run get_screenshot for the exact variant and save as 'screenshot.png'. Step 4: Download assets referenced by the node; prefer the MCP-provided assets endpoint. If an asset URL is localhost, use it directly (do not substitute placeholders). Step 5: Implement UI using the project's component library and tokens. Replace Tailwind utilities with the project's design tokens. Reuse components; do not add new icon packages. Step 6: Run tests, lint, and build. Produce a clear diff and push to a branch named by the task. Leave a PR with a short description linking to the Figma node and the screenshots.

If you need design decisions or non-trivial component changes, stop and produce a concise question for the reviewer."

Fresh signals

• Baton landing: built-in MCP server, workspace badges, worktree isolation — https://getbaton.dev/ (fetched 2026-04-11).
• Model Context Protocol servers repo active; recent commits as of 2026-03-17 — https://github.com/modelcontextprotocol/servers (fetched 2026-04-11).
• OpenAI Codex Figma-to-code guidance confirms required flow and localhost-asset rule — https://developers.openai.com/codex/use-cases/figma-designs-to-code (fetched 2026-04-11).

Next edits

• Keep the Figma MCP flow and asset rules unchanged unless MCP server behavior changes.
• Monitor Model Context Protocol servers repo for API or spec changes and Baton's docs for integration updates (sources listed).
• Add a short usage snippet to references/figma-tools-and-prompts.md showing how to set up the Baton agent preset and environment variables (FIGMA_TOKEN, MCP_SERVER_URL, PROJECT_TOKEN).

Version

version:7 versionLabel: v7