Cursor Talk to Figma MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/server.ts:2075-2127 (registration)

  MCP tool registration for 'set_layout_sizing', including schema validation and forwarding handler to Figma plugin command.

  server.tool(
    "set_layout_sizing",
    "Set horizontal and vertical sizing modes for an auto-layout frame in Figma",
    {
      nodeId: z.string().describe("The ID of the frame to modify"),
      layoutSizingHorizontal: z
        .enum(["FIXED", "HUG", "FILL"])
        .optional()
        .describe("Horizontal sizing mode (HUG for frames/text only, FILL for auto-layout children only)"),
      layoutSizingVertical: z
        .enum(["FIXED", "HUG", "FILL"])
        .optional()
        .describe("Vertical sizing mode (HUG for frames/text only, FILL for auto-layout children only)")
    },
    async ({ nodeId, layoutSizingHorizontal, layoutSizingVertical }) => {
      try {
        const result = await sendCommandToFigma("set_layout_sizing", {
          nodeId,
          layoutSizingHorizontal,
          layoutSizingVertical
        });
        const typedResult = result as { name: string };
  
        // Create a message about which sizing modes were set
        const sizingMessages = [];
        if (layoutSizingHorizontal !== undefined) sizingMessages.push(`horizontal: ${layoutSizingHorizontal}`);
        if (layoutSizingVertical !== undefined) sizingMessages.push(`vertical: ${layoutSizingVertical}`);
  
        const sizingText = sizingMessages.length > 0
          ? `layout sizing (${sizingMessages.join(', ')})`
          : "layout sizing";
  
        return {
          content: [
            {
              type: "text",
              text: `Set ${sizingText} for frame "${typedResult.name}"`,
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error setting layout sizing: ${error instanceof Error ? error.message : String(error)}`,
            },
          ],
        };
      }
    }
  );

• src/cursor_mcp_plugin/code.js:2837-2922 (handler)

  Core implementation of set_layout_sizing Figma plugin command. Validates node type and auto-layout mode, then sets layoutSizingHorizontal and/or layoutSizingVertical properties with appropriate constraints and error handling.

  async function setLayoutSizing(params) {
    const { nodeId, layoutSizingHorizontal, layoutSizingVertical } = 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 layout sizing
    if (
      node.type !== "FRAME" &&
      node.type !== "COMPONENT" &&
      node.type !== "COMPONENT_SET" &&
      node.type !== "INSTANCE"
    ) {
      throw new Error(`Node type ${node.type} does not support layout sizing`);
    }
  
    // Check if the node has auto-layout enabled
    if (node.layoutMode === "NONE") {
      throw new Error(
        "Layout sizing can only be set on auto-layout frames (layoutMode must not be NONE)"
      );
    }
  
    // Validate and set layoutSizingHorizontal if provided
    if (layoutSizingHorizontal !== undefined) {
      if (!["FIXED", "HUG", "FILL"].includes(layoutSizingHorizontal)) {
        throw new Error(
          "Invalid layoutSizingHorizontal value. Must be one of: FIXED, HUG, FILL"
        );
      }
      // HUG is only valid on auto-layout frames and text nodes
      if (
        layoutSizingHorizontal === "HUG" &&
        !["FRAME", "TEXT"].includes(node.type)
      ) {
        throw new Error(
          "HUG sizing is only valid on auto-layout frames and text nodes"
        );
      }
      // FILL is only valid on auto-layout children
      if (
        layoutSizingHorizontal === "FILL" &&
        (!node.parent || node.parent.layoutMode === "NONE")
      ) {
        throw new Error("FILL sizing is only valid on auto-layout children");
      }
      node.layoutSizingHorizontal = layoutSizingHorizontal;
    }
  
    // Validate and set layoutSizingVertical if provided
    if (layoutSizingVertical !== undefined) {
      if (!["FIXED", "HUG", "FILL"].includes(layoutSizingVertical)) {
        throw new Error(
          "Invalid layoutSizingVertical value. Must be one of: FIXED, HUG, FILL"
        );
      }
      // HUG is only valid on auto-layout frames and text nodes
      if (
        layoutSizingVertical === "HUG" &&
        !["FRAME", "TEXT"].includes(node.type)
      ) {
        throw new Error(
          "HUG sizing is only valid on auto-layout frames and text nodes"
        );
      }
      // FILL is only valid on auto-layout children
      if (
        layoutSizingVertical === "FILL" &&
        (!node.parent || node.parent.layoutMode === "NONE")
      ) {
        throw new Error("FILL sizing is only valid on auto-layout children");
      }
      node.layoutSizingVertical = layoutSizingVertical;
    }
  
    return {
      id: node.id,
      name: node.name,
      layoutSizingHorizontal: node.layoutSizingHorizontal,
      layoutSizingVertical: node.layoutSizingVertical,
      layoutMode: node.layoutMode,
    };
  }

• src/cursor_mcp_plugin/code.js:175-176 (handler)

  Dispatches Figma command 'set_layout_sizing' to the setLayoutSizing handler function.

  case "set_layout_sizing":
    return await setLayoutSizing(params);