Cursor Talk to Figma MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/server.ts:157-186 (registration)

  Registration of the 'get_node_info' MCP tool, including input schema (nodeId: string), description, and inline handler function that sends the command to the Figma plugin via sendCommandToFigma and processes the result using filterFigmaNode before returning as text content.

  server.tool(
    "get_node_info",
    "Get detailed information about a specific node in Figma",
    {
      nodeId: z.string().describe("The ID of the node to get information about"),
    },
    async ({ nodeId }) => {
      try {
        const result = await sendCommandToFigma("get_node_info", { nodeId });
        return {
          content: [
            {
              type: "text",
              text: JSON.stringify(filterFigmaNode(result))
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error getting node info: ${error instanceof Error ? error.message : String(error)
                }`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/server.ts:157-186 (handler)

  The handler function (inline in registration) executes the tool logic: forwards nodeId to Figma plugin's get_node_info command, filters the node data, and returns JSON stringified text response or error.

  server.tool(
    "get_node_info",
    "Get detailed information about a specific node in Figma",
    {
      nodeId: z.string().describe("The ID of the node to get information about"),
    },
    async ({ nodeId }) => {
      try {
        const result = await sendCommandToFigma("get_node_info", { nodeId });
        return {
          content: [
            {
              type: "text",
              text: JSON.stringify(filterFigmaNode(result))
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error getting node info: ${error instanceof Error ? error.message : String(error)
                }`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/server.ts:160-162 (schema)

  Input schema for get_node_info tool using Zod: requires 'nodeId' as string with description.

  {
    nodeId: z.string().describe("The ID of the node to get information about"),
  },

• src/talk_to_figma_mcp/server.ts:202-289 (helper)

  Helper function filterFigmaNode recursively processes Figma node data: skips VECTOR nodes, extracts relevant properties (id, name, type, fills, strokes, etc.), converts RGBA colors to hex using rgbaToHex, removes boundVariables/imageRef, handles children recursively.

  function filterFigmaNode(node: any) {
    // Skip VECTOR type nodes
    if (node.type === "VECTOR") {
      return null;
    }
  
    const filtered: any = {
      id: node.id,
      name: node.name,
      type: node.type,
    };
  
    if (node.fills && node.fills.length > 0) {
      filtered.fills = node.fills.map((fill: any) => {
        const processedFill = { ...fill };
  
        // Remove boundVariables and imageRef
        delete processedFill.boundVariables;
        delete processedFill.imageRef;
  
        // Process gradientStops if present
        if (processedFill.gradientStops) {
          processedFill.gradientStops = processedFill.gradientStops.map((stop: any) => {
            const processedStop = { ...stop };
            // Convert color to hex if present
            if (processedStop.color) {
              processedStop.color = rgbaToHex(processedStop.color);
            }
            // Remove boundVariables
            delete processedStop.boundVariables;
            return processedStop;
          });
        }
  
        // Convert solid fill colors to hex
        if (processedFill.color) {
          processedFill.color = rgbaToHex(processedFill.color);
        }
  
        return processedFill;
      });
    }
  
    if (node.strokes && node.strokes.length > 0) {
      filtered.strokes = node.strokes.map((stroke: any) => {
        const processedStroke = { ...stroke };
        // Remove boundVariables
        delete processedStroke.boundVariables;
        // Convert color to hex if present
        if (processedStroke.color) {
          processedStroke.color = rgbaToHex(processedStroke.color);
        }
        return processedStroke;
      });
    }
  
    if (node.cornerRadius !== undefined) {
      filtered.cornerRadius = node.cornerRadius;
    }
  
    if (node.absoluteBoundingBox) {
      filtered.absoluteBoundingBox = node.absoluteBoundingBox;
    }
  
    if (node.characters) {
      filtered.characters = node.characters;
    }
  
    if (node.style) {
      filtered.style = {
        fontFamily: node.style.fontFamily,
        fontStyle: node.style.fontStyle,
        fontWeight: node.style.fontWeight,
        fontSize: node.style.fontSize,
        textAlignHorizontal: node.style.textAlignHorizontal,
        letterSpacing: node.style.letterSpacing,
        lineHeightPx: node.style.lineHeightPx
      };
    }
  
    if (node.children) {
      filtered.children = node.children
        .map((child: any) => filterFigmaNode(child))
        .filter((child: any) => child !== null); // Remove null children (VECTOR nodes)
    }
  
    return filtered;
  }

• src/talk_to_figma_mcp/server.ts:188-200 (helper)

  Helper function rgbaToHex converts Figma RGBA color objects (r,g,b,a 0-1) to hex string format, omitting alpha if fully opaque.

  function rgbaToHex(color: any): string {
    // skip if color is already hex
    if (color.startsWith('#')) {
      return color;
    }
  
    const r = Math.round(color.r * 255);
    const g = Math.round(color.g * 255);
    const b = Math.round(color.b * 255);
    const a = Math.round(color.a * 255);
  
    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}${a === 255 ? '' : a.toString(16).padStart(2, '0')}`;
  }