> ## Documentation Index > Fetch the complete documentation index at: https://docs.formal.ai/llms.txt > Use this file to discover all available pages before exploring further. # Figma > Bring design files, components, and implementation context into AI workflows. Developer Tools Publisher: Figma Route Figma MCP traffic through Formal to control and log what AI agents do in Figma: * **Block** tools you don't want agents to call, such as `create_design_system_rules`. * **Mask** sensitive data in tool results, such as emails in `whoami` responses. * **Keep credentials at the Connector**, so users and agents never see Figma tokens. * **Log** every tool call with the user, the MCP client and its parameters. Cloud agents Laptop / VM Endpoint [https://mcp.figma.com/mcp](https://mcp.figma.com/mcp) Connector ![](https://docs.formal.ai/static/brands/figma.svg) ## 0. Prepare your Connector The Connector needs an MCP listener and a hostname with wildcard DNS and TLS. Set them up once by following [Deploy the Connector](https://docs.formal.ai/docs/guides/core-concepts/connectors/mcp-gateway.md#deploy-the-connector). Every MCP server reuses them. ## 1. Add Figma MCP server to your Resources > [tab] UI > > 1. Open the [Admin Catalog](https://app.formal.ai/catalog) and click **Add MCP**. > 2. Select the **Figma** template. > 3. Enter a DNS-label **Name**, such as `figma`. > 4. Choose the **Space** containing your Connector, such as `default`. > 5. Configure upstream authentication as described below, then save. > > If no Connector is in the selected Space, the **Configuration** tab shows **MCP clients can't connect directly yet**. > The reason reads: `No Connector is in this server's Space.` > > Adding Figma to the Admin Catalog > [tab] Terraform > > Set `space_id` to the ID of the Space containing your Connector. > > ```hcl theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > resource "formal_resource" "figma" { > name = "figma" > technology = "mcp" > hostname = "mcp.figma.com" > space_id = "" > native_users_v3_enabled = true > port = 443 > tags = { > "mcp-endpoint" = "/mcp" > } > } > > resource "formal_resource_oauth_settings" "figma" { > resource_id = formal_resource.figma.id > } > ``` > [tab] Pulumi > > Set `spaceId` to the ID of the Space containing your Connector. > > ```ts theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > import * as formal from "@formalco/pulumi"; > > const resource = new formal.Resource("mcp", { > name: "figma", > technology: "mcp", > hostname: "mcp.figma.com", > port: 443, > spaceId: "", > tags: { "mcp-endpoint": "/mcp" }, > nativeUsersV3Enabled: true, > }); > > new formal.ResourceOauthSettings("mcpOAuth", { > resourceId: resource.id, > }); > ``` > [tab] API > > Create a Resource with the MCP endpoint and its Space ID. > > ```bash theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > export FORMAL_API_KEY="" > RESOURCE_RESPONSE=$(curl --fail --silent --show-error \ > --request POST \ > https://api.formal.ai/core.v1.ResourceService/CreateResource \ > --header "x-api-key: ${FORMAL_API_KEY}" \ > --header "Content-Type: application/json" \ > --data-binary @- < { > "name": "figma", > "hostname": "mcp.figma.com", > "port": 443, > "technology": "mcp", > "spaceId": "", > "tags": [ > { > "key": "mcp-endpoint", > "value": "/mcp" > } > ] > } > JSON > ) > RESOURCE_ID=$(printf '%s' "${RESOURCE_RESPONSE}" | jq -r '.resource.id') > curl --fail --silent --show-error \ > --request POST \ > https://api.formal.ai/core.v1.ResourceService/CreateResourceOAuthSettings \ > --header "x-api-key: ${FORMAL_API_KEY}" \ > --header "Content-Type: application/json" \ > --data-binary @- < { > "resourceId": "${RESOURCE_ID}" > } > JSON > ``` ## 2. Setup Authentication > [tab] Linked Accounts > > Each user links their own Figma account once in the Employee Catalog, and the Connector sends that user's token to Figma. > > ![Linked Accounts selected under How does Formal authenticate to this resource?](https://mintcdn.com/formal/vzPMpIcsF4BYmdx8/assets/images/mcp-servers/auth-linked-accounts.png?fit=max\&auto=format\&n=vzPMpIcsF4BYmdx8\&q=85\&s=dc448db2a373faa6e1bf49fd5ffaf7c4) > > Only MCP clients in [Figma's MCP catalog](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/) can connect to Figma's MCP server. > > Linked Accounts isn't available for Figma. Use **Pass Through** instead. > [tab] Shared Credentials > > An administrator stores one Figma token in Formal, and the Connector sends it on every user's requests without showing it to them. > > ![Shared Credentials selected under How does Formal authenticate to this resource?](https://mintcdn.com/formal/R-3CwVgs8IU6liji/assets/images/mcp-servers/auth-shared-credentials.png?fit=max\&auto=format\&n=R-3CwVgs8IU6liji\&q=85\&s=91032e202518088292ee1cf39451b9ef) > > Figma's MCP endpoint doesn't accept API tokens, so use Pass Through. > [tab] Pass Through (Recommended) > > Each user sends their own Figma sign-in or token from their MCP client, and Formal forwards it unchanged without storing it. > > ![Pass Through selected under How does Formal authenticate to this resource?](https://mintcdn.com/formal/R-3CwVgs8IU6liji/assets/images/mcp-servers/auth-pass-through.png?fit=max\&auto=format\&n=R-3CwVgs8IU6liji\&q=85\&s=c14ae61de2dba8b567626cba03aae2cf) > > Nothing in the request identifies the Formal user. Formal attributes these requests only when they come through the [Formal Endpoint](https://docs.formal.ai/docs/guides/core-concepts/connectors/mcp-gateway.md#identity-headers). Pass-through servers have no Connector address, so cloud agents can't use them. > > For OAuth, each MCP client signs in to Figma itself. ## 3. Route Endpoint traffic Auth is managed at the Connector level when you use Linked Accounts or Shared Credentials, so the Endpoint needs to forward the MCP traffic to it. Laptops and VMs with the Formal Endpoint keep using `https://mcp.figma.com/mcp`, and a network rule sends that traffic to the Connector. > [tab] UI > > 1. Go to [Network Rules](https://app.formal.ai/network-rules) and create a rule named `figma-mcp`. > 2. Paste this expression, set the rule to **Active**, then save: > > ```javascript theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > { > "condition": { > "pre_tcp": process.is_agent, > // Every MCP server added to Formal: process.is_agent && resource.technology == "mcp" > "pre_tls": process.is_agent && hostname == "mcp.figma.com", > "post_tls": true > }, > "outputs": { > "forward_to_connector": true > } > } > ``` > [tab] Terraform > > ```hcl theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > resource "formal_network_rule" "figma_mcp" { > name = "figma-mcp" > description = "Forward Figma MCP traffic from agents to the Connector" > status = "active" > > # Every MCP server added to Formal: set pre_tls to process.is_agent && resource.technology == "mcp" > cel_expression = <<-EOT > { > "condition": { > "pre_tcp": process.is_agent, > "pre_tls": process.is_agent && hostname == "mcp.figma.com", > "post_tls": true > }, > "outputs": { > "forward_to_connector": true > } > } > EOT > } > ``` > [tab] Pulumi > > ```ts theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > import * as formal from "@formalco/pulumi"; > > new formal.NetworkRule("figmaMcp", { > name: "figma-mcp", > description: "Forward Figma MCP traffic from agents to the Connector", > status: "active", > // Every MCP server added to Formal: set pre_tls to process.is_agent && resource.technology == "mcp" > celExpression: ` > { > "condition": { > "pre_tcp": process.is_agent, > "pre_tls": process.is_agent && hostname == "mcp.figma.com", > "post_tls": true > }, > "outputs": { > "forward_to_connector": true > } > } > `, > }); > ``` > [tab] API > > ```bash theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > export FORMAL_API_KEY="" > # Every MCP server added to Formal: set pre_tls to process.is_agent && resource.technology == "mcp" > CEL_EXPRESSION=$(cat <<'CEL' > { > "condition": { > "pre_tcp": process.is_agent, > "pre_tls": process.is_agent && hostname == "mcp.figma.com", > "post_tls": true > }, > "outputs": { > "forward_to_connector": true > } > } > CEL > ) > jq -n --arg cel "${CEL_EXPRESSION}" '{ > name: "figma-mcp", > description: "Forward Figma MCP traffic from agents to the Connector", > status: "active", > celExpression: $cel > }' | curl --fail --silent --show-error \ > --request POST \ > https://api.formal.ai/core.v1.DesktopService/CreateDesktopRoutingRule \ > --header "x-api-key: ${FORMAL_API_KEY}" \ > --header "Content-Type: application/json" \ > --data-binary @- > ``` The rule matches [known agents](https://docs.formal.ai/docs/guides/network-rules.md#known-agent-identities) only. See [Identity headers](https://docs.formal.ai/docs/guides/core-concepts/connectors/mcp-gateway.md#identity-headers). Cloud agents such as Claude, ChatGPT and Cursor Cloud Agents don't run the Endpoint. Point them at this server's Connector address, `https://figma./mcp`. Find it in the [Admin Catalog](https://app.formal.ai/catalog): open Figma, then copy **Connector address** on the **Configuration** tab. ## 4. Create policies ### Tools The Admin Catalog lists these tools for Figma: | Tool | Description | | - | - | | `generate_diagram` | Generate a diagram in FigJam. | | `get_design_context` | Retrieve implementation context for selected design nodes. | | `get_screenshot` | Render a screenshot of a design node. | | `get_metadata` | Retrieve lightweight metadata for a Figma file or node. | | `create_design_system_rules` | Create design system implementation rules. | | `get_variable_defs` | Retrieve variables used by a design selection. | | `get_code_connect_map` | Retrieve Code Connect mappings. | | `get_figjam` | Retrieve FigJam board content. | | `whoami` | Show the authenticated Figma user. | ### Policies examples > [tab] Block a tool > > This policy blocks the tools that change data, so agents can only read Figma. > > ```rego theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > package formal.v2 > > import future.keywords.if > import future.keywords.in > > write_tools := { > "generate_diagram", > } > > request := { > "action": "block", > "type": "block_with_custom_message", > "message": "Writing to Figma is not allowed.", > } if { > input.resource.name == "figma" > input.mcp.method == "tools/call" > input.mcp.tool_name in write_tools > } > ``` > [tab] Mask a tool's output > > This policy replaces email addresses in results returned by `whoami`. > > ```rego theme={"languages":{"custom":["/languages/cel.json","/languages/rego.json"]}} > package formal.v2 > > import future.keywords.if > import future.keywords.in > > email_pattern := `[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}` > > response := { > "action": "rewrite", > "body": regex.replace(input.http.body, email_pattern, "[REDACTED-EMAIL]"), > "reason": "Mask emails in Figma results", > } if { > input.resource.name == "figma" > input.mcp.tool_name in {"whoami"} > regex.match(email_pattern, input.http.body) > } > ``` See [MCP resources](https://docs.formal.ai/docs/guides/policies/evaluation.md#mcp-resources) for the `input.mcp` fields and [Rewrite Action](https://docs.formal.ai/docs/guides/policies/enforcement.md#rewrite-action) for body rewrites. ## 5. Check the logs Open [Logs](https://app.formal.ai/logs) and search for `resource.name:figma`. Each Figma tool call is one `request` log with the user, the MCP client and the tool. Open a log to see its tool parameters and the policies it triggered. A blocked write shows the block policy and its message. A masked search shows the rewrite policy. Figma tool calls in Logs, including a masked response and a blocked write See [Logs](https://docs.formal.ai/docs/guides/observability/logs.md) for search syntax and filters. ## Troubleshooting > [accordion] The agent says Formal has no current sign-in > > The agent relays: `Formal has no current figma sign-in for you. Link or re-link your figma account in Formal…` > > **Cause:** The user never linked Figma, or the token expired and couldn't be refreshed. > > **Fix:** Open the server in the [Employee Catalog](https://catalog.formal.ai) and link Figma again. > [accordion] The agent says Figma rejected your credentials > > The agent relays: `figma rejected your credentials. Link or re-link your figma account in Formal…` > > **Cause:** Figma no longer accepts the linked token, for example after the user revoked access in Figma. > > **Fix:** Link Figma again from the [Employee Catalog](https://catalog.formal.ai). > [accordion] Laptop traffic doesn't appear in Logs > > **Cause:** The Endpoint isn't running, or the network rule doesn't match the client. > > **Fix:** Check the Endpoint is connected. The rule above only matches [known agents](https://docs.formal.ai/docs/guides/network-rules.md#known-agent-identities). Other clients, such as a browser, reach Figma directly unless the rule also matches them. See [Network rules](https://docs.formal.ai/docs/guides/network-rules.md). > [accordion] MCP clients can't connect directly yet > > **Cause:** The **Configuration** tab lists the reason, most often `No Connector is in this server's Space.` > > **Fix:** Edit the server and choose the Space containing its Connector. ## Next Steps > [card] [MCP Gateway](https://docs.formal.ai/docs/guides/core-concepts/connectors/mcp-gateway.md) > > Configure Connector routing and downstream access > [card] [All MCP servers](https://docs.formal.ai/docs/guides/core-concepts/connectors/mcp-servers/index.md) > > Browse every MCP server template This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.