Cursor Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:2693-2726 (handler)

  Core handler function in Figma plugin that sets the layoutMode and layoutWrap properties on the target frame/component node using Figma API.

  async function setLayoutMode(params) {
    const { nodeId, layoutMode = "NONE", layoutWrap = "NO_WRAP" } = params || {};
  
    // Get the target node
    const node = await figma.getNodeByIdAsync(nodeId);
    if (!node) {
      throw new Error(`Node with ID ${nodeId} not found`);
    }
  
    // Check if node is a frame or component that supports layoutMode
    if (
      node.type !== "FRAME" &&
      node.type !== "COMPONENT" &&
      node.type !== "COMPONENT_SET" &&
      node.type !== "INSTANCE"
    ) {
      throw new Error(`Node type ${node.type} does not support layoutMode`);
    }
  
    // Set layout mode
    node.layoutMode = layoutMode;
  
    // Set layoutWrap if applicable
    if (layoutMode !== "NONE") {
      node.layoutWrap = layoutWrap;
    }
  
    return {
      id: node.id,
      name: node.name,
      layoutMode: node.layoutMode,
      layoutWrap: node.layoutWrap,
    };
  }

• src/talk_to_figma_mcp/server.ts:1928-1964 (registration)

  MCP server tool registration including schema validation with Zod and proxy handler that forwards the command to Figma plugin via WebSocket.

  // Set Layout Mode Tool
  server.tool(
    "set_layout_mode",
    "Set the layout mode and wrap behavior of a frame in Figma",
    {
      nodeId: z.string().describe("The ID of the frame to modify"),
      layoutMode: z.enum(["NONE", "HORIZONTAL", "VERTICAL"]).describe("Layout mode for the frame"),
      layoutWrap: z.enum(["NO_WRAP", "WRAP"]).optional().describe("Whether the auto-layout frame wraps its children")
    },
    async ({ nodeId, layoutMode, layoutWrap }) => {
      try {
        const result = await sendCommandToFigma("set_layout_mode", {
          nodeId,
          layoutMode,
          layoutWrap: layoutWrap || "NO_WRAP"
        });
        const typedResult = result as { name: string };
        return {
          content: [
            {
              type: "text",
              text: `Set layout mode of frame "${typedResult.name}" to ${layoutMode}${layoutWrap ? ` with ${layoutWrap}` : ''}`,
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error setting layout mode: ${error instanceof Error ? error.message : String(error)}`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/server.ts:1932-1936 (schema)

  Input schema definition using Zod for validating nodeId (required), layoutMode (NONE/HORIZONTAL/VERTICAL), and optional layoutWrap (NO_WRAP/WRAP).

  {
    nodeId: z.string().describe("The ID of the frame to modify"),
    layoutMode: z.enum(["NONE", "HORIZONTAL", "VERTICAL"]).describe("Layout mode for the frame"),
    layoutWrap: z.enum(["NO_WRAP", "WRAP"]).optional().describe("Whether the auto-layout frame wraps its children")
  },

• src/cursor_mcp_plugin/code.js:169-170 (handler)

  Dispatch case in Figma plugin's main handleCommand switch statement that routes to the setLayoutMode handler.

  case "set_layout_mode":
    return await setLayoutMode(params);