Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:386-434 (handler)

  Core handler function in the Figma plugin that retrieves the specified node by ID and sets its fill color using a solid Paint style constructed from RGBA parameters.

  async function setFillColor(params) {
    console.log("setFillColor", params);
    const {
      nodeId,
      color: { r, g, b, a },
    } = params || {};
  
    if (!nodeId) {
      throw new Error("Missing nodeId parameter");
    }
  
    const node = await figma.getNodeByIdAsync(nodeId);
    if (!node) {
      throw new Error(`Node not found with ID: ${nodeId}`);
    }
  
    if (!("fills" in node)) {
      throw new Error(`Node does not support fills: ${nodeId}`);
    }
  
    // Create RGBA color
    const rgbColor = {
      r: parseFloat(r) || 0,
      g: parseFloat(g) || 0,
      b: parseFloat(b) || 0,
      a: parseFloat(a) || 1,
    };
  
    // Set fill
    const paintStyle = {
      type: "SOLID",
      color: {
        r: parseFloat(rgbColor.r),
        g: parseFloat(rgbColor.g),
        b: parseFloat(rgbColor.b),
      },
      opacity: parseFloat(rgbColor.a),
    };
  
    console.log("paintStyle", paintStyle);
  
    node.fills = [paintStyle];
  
    return {
      id: node.id,
      name: node.name,
      fills: [paintStyle],
    };
  }

• src/talk_to_figma_mcp/server.ts:265-301 (registration)

  MCP server tool registration for 'set_fill_color', including input schema validation with Zod and a handler that proxies the command to the Figma plugin via WebSocket, returning a formatted response.

  server.tool(
    "set_fill_color",
    "Set the fill color of a node in Figma can be TextNode or FrameNode",
    {
      nodeId: z.string().describe("The ID of the node to modify"),
      r: z.number().min(0).max(1).describe("Red component (0-1)"),
      g: z.number().min(0).max(1).describe("Green component (0-1)"),
      b: z.number().min(0).max(1).describe("Blue component (0-1)"),
      a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
    },
    async ({ nodeId, r, g, b, a }) => {
      try {
        const result = await sendCommandToFigma('set_fill_color', {
          nodeId,
          color: { r, g, b, a: a || 1 }
        });
        const typedResult = result as { name: string };
        return {
          content: [
            {
              type: "text",
              text: `Set fill color of node "${typedResult.name}" to RGBA(${r}, ${g}, ${b}, ${a || 1})`
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error setting fill color: ${error instanceof Error ? error.message : String(error)}`
            }
          ]
        };
      }
    }
  );

• src/cursor_mcp_plugin/code.js:79-80 (handler)

  Dispatch case in the Figma plugin's handleCommand function that routes 'set_fill_color' commands to the setFillColor handler.

  case "set_fill_color":
    return await setFillColor(params);

• src/talk_to_figma_mcp/server.ts:268-274 (schema)

  Zod schema definition for the input parameters of the set_fill_color MCP tool.

  {
    nodeId: z.string().describe("The ID of the node to modify"),
    r: z.number().min(0).max(1).describe("Red component (0-1)"),
    g: z.number().min(0).max(1).describe("Green component (0-1)"),
    b: z.number().min(0).max(1).describe("Blue component (0-1)"),
    a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
  },