design_to_code · Figma to React MCP: Risk & Policy

WHAT IT DOES

What design_to_code does on Figma to React MCP

AI agents use design_to_code to create or update resources in Figma to React MCP — usually the action step of a workflow, after the agent has gathered context. Every call changes real data in your Figma to React MCP environment.

WHY IT NEEDS A POLICY

Why design_to_code needs a policy

This tool creates new files (React components) and pull requests in GitHub, modifying the repository state. These are Write operations because they create new content reversibly without executing arbitrary code on production systems or deleting data. While it automates code generation, the output is created as a PR (requiring review/approval) rather than directly executing application logic.

From the tool's definition Tool description states it 'create[s] GitHub PR' and 'Convert[s] Figma design to React component', which involves creating new code files and pull requests—reversible write operations on a codebase.

Attacks that exploit this kind of access

Recommended rule Ready

Verdict

design_to_code Rate-limited

design_to_code stays usable, but capped — an agent stuck in a loop can't make hundreds of changes a minute. Everything else on the server is denied unless you say otherwise.

View as policy code

policy.json

{
  "version": "1",
  "default": "deny",
  "tools": {
    "design_to_code": {
      "limits": [
        {
          "counter": "design_to_code_rate",
          "window": "minute",
          "max": 30,
          "scope": "grant"
        }
      ]
    }
  }
}

LIMIT THIS TOOL →

Instant setup, no code required.

PolicyLayer is an MCP gateway: every tool call is checked against your rule before it reaches Figma to React MCP, so you can run agents against it safely.

FAQ

Questions about design_to_code

What does the design_to_code tool do? +

Convert Figma design to React component and create GitHub PR. Accepts Figma URLs or file IDs. It is categorised as a Write tool in the Figma to React MCP MCP Server, which means it can create or modify data. Consider rate limits to prevent runaway writes.

How do I enforce a policy on design_to_code? +

Register the Figma to React MCP server in PolicyLayer and add a rule for design_to_code: allow, deny, rate-limit, or require approval. Point your MCP client at the PolicyLayer proxy URL and the rule is enforced on every call, before it reaches Figma to React MCP. Nothing to install.

What risk level is design_to_code? +

design_to_code is a Write tool with medium risk. Write tools should be rate-limited to prevent accidental bulk modifications.

Can I rate-limit design_to_code? +

Yes. Add a rate_limit block to the design_to_code rule in your PolicyLayer policy. For example, setting max: 10 and window: 60 limits the tool to 10 calls per minute. Rate limits are tracked per agent session and reset automatically.

How do I block design_to_code completely? +

Set action: deny in the PolicyLayer policy for design_to_code. The AI agent will receive a policy violation error and cannot call the tool. You can also include a reason field to explain why the tool is blocked.

What MCP server provides design_to_code? +

design_to_code is provided by the Figma to React MCP server (surisagar900/figma-to-react-mcp). PolicyLayer sits as a proxy in front of this server to enforce policies before tool calls reach the server.