Talk to Figma MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/server.ts:657-684 (handler)

  Handler function that executes the tool logic by sending the 'set_stroke_color' command to the Figma plugin via WebSocket, using the provided nodeId, color components (r,g,b,a), and optional stroke weight. Returns a formatted text response with the result or error.

  async ({ nodeId, r, g, b, a, weight }) => {
    try {
      const result = await sendCommandToFigma("set_stroke_color", {
        nodeId,
        color: { r, g, b, a: a || 1 },
        weight: weight || 1,
      });
      const typedResult = result as { name: string };
      return {
        content: [
          {
            type: "text",
            text: `Set stroke color of node "${typedResult.name
              }" to RGBA(${r}, ${g}, ${b}, ${a || 1}) with weight ${weight || 1}`,
          },
        ],
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text",
            text: `Error setting stroke color: ${error instanceof Error ? error.message : String(error)
              }`,
          },
        ],
      };
    }

• src/talk_to_figma_mcp/server.ts:649-656 (schema)

  Zod schema defining the input parameters for the set_stroke_color tool: required nodeId (string), r/g/b (numbers 0-1), optional a (0-1), optional positive weight.

  {
    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)"),
    weight: z.number().positive().optional().describe("Stroke weight"),
  },

• src/talk_to_figma_mcp/server.ts:646-686 (registration)

  Registration of the 'set_stroke_color' MCP tool on the McpServer instance, including name, description, input schema, and handler function.

  server.tool(
    "set_stroke_color",
    "Set the stroke color of a node in Figma",
    {
      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)"),
      weight: z.number().positive().optional().describe("Stroke weight"),
    },
    async ({ nodeId, r, g, b, a, weight }) => {
      try {
        const result = await sendCommandToFigma("set_stroke_color", {
          nodeId,
          color: { r, g, b, a: a || 1 },
          weight: weight || 1,
        });
        const typedResult = result as { name: string };
        return {
          content: [
            {
              type: "text",
              text: `Set stroke color of node "${typedResult.name
                }" to RGBA(${r}, ${g}, ${b}, ${a || 1}) with weight ${weight || 1}`,
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error setting stroke color: ${error instanceof Error ? error.message : String(error)
                }`,
            },
          ],
        };
      }
    }
  );