Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:436-488 (handler)

  Core handler function that executes the set_stroke_color logic: fetches the Figma node, sets its stroke paint to SOLID with given RGBA color and optional weight using Figma Plugin API.

  async function setStrokeColor(params) {
    const {
      nodeId,
      color: { r, g, b, a },
      weight = 1,
    } = 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 (!("strokes" in node)) {
      throw new Error(`Node does not support strokes: ${nodeId}`);
    }
  
    // Create RGBA color
    const rgbColor = {
      r: r !== undefined ? r : 0,
      g: g !== undefined ? g : 0,
      b: b !== undefined ? b : 0,
      a: a !== undefined ? a : 1,
    };
  
    // Set stroke
    const paintStyle = {
      type: "SOLID",
      color: {
        r: rgbColor.r,
        g: rgbColor.g,
        b: rgbColor.b,
      },
      opacity: rgbColor.a,
    };
  
    node.strokes = [paintStyle];
  
    // Set stroke weight if available
    if ("strokeWeight" in node) {
      node.strokeWeight = weight;
    }
  
    return {
      id: node.id,
      name: node.name,
      strokes: node.strokes,
      strokeWeight: "strokeWeight" in node ? node.strokeWeight : undefined,
    };
  }

• src/talk_to_figma_mcp/server.ts:304-342 (registration)

  MCP server tool registration for 'set_stroke_color', including Zod input schema and handler that proxies the command to the Figma plugin via WebSocket.

  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)}`
            }
          ]
        };
      }
    }
  );

• src/cursor_mcp_plugin/code.js:62-106 (handler)

  Figma plugin's command dispatcher that handles incoming 'set_stroke_color' command by calling the setStrokeColor handler.

  async function handleCommand(command, params) {
    switch (command) {
      case "get_document_info":
        return await getDocumentInfo();
      case "get_selection":
        return await getSelection();
      case "get_node_info":
        if (!params || !params.nodeId) {
          throw new Error("Missing nodeId parameter");
        }
        return await getNodeInfo(params.nodeId);
      case "create_rectangle":
        return await createRectangle(params);
      case "create_frame":
        return await createFrame(params);
      case "create_text":
        return await createText(params);
      case "set_fill_color":
        return await setFillColor(params);
      case "set_stroke_color":
        return await setStrokeColor(params);
      case "move_node":
        return await moveNode(params);
      case "resize_node":
        return await resizeNode(params);
      case "delete_node":
        return await deleteNode(params);
      case "get_styles":
        return await getStyles();
      case "get_local_components":
        return await getLocalComponents();
      case "get_team_components":
        return await getTeamComponents();
      case "create_component_instance":
        return await createComponentInstance(params);
      case "export_node_as_image":
        return await exportNodeAsImage(params);
      case "execute_code":
        return await executeCode(params);
      case "set_corner_radius":
        return await setCornerRadius(params);
      default:
        throw new Error(`Unknown command: ${command}`);
    }
  }

• src/talk_to_figma_mcp/server.ts:759-778 (schema)

  TypeScript union type including 'set_stroke_color' for Figma command validation.

  type FigmaCommand =
    | 'get_document_info'
    | 'get_selection'
    | 'get_node_info'
    | 'create_rectangle'
    | 'create_frame'
    | 'create_text'
    | 'set_fill_color'
    | 'set_stroke_color'
    | 'move_node'
    | 'resize_node'
    | 'delete_node'
    | 'get_styles'
    | 'get_local_components'
    | 'get_team_components'
    | 'create_component_instance'
    | 'export_node_as_image'
    | 'execute_code'
    | 'join'
    | 'set_corner_radius';