Talk to Figma MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/server.ts:179-208 (registration)

  Registration of the 'get_node_info' MCP tool, including input schema (nodeId: string) and handler function that forwards the command to Figma plugin and processes the result with filterFigmaNode.

  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 }: any) => {
      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:185-207 (handler)

  The core handler logic for the get_node_info tool: calls sendCommandToFigma with nodeId, filters result with filterFigmaNode, returns JSON stringified content or error.

  async ({ nodeId }: any) => {
    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:182-184 (schema)

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

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

• src/talk_to_figma_mcp/server.ts:224-311 (helper)

  Supporting helper function used by get_node_info handler to recursively filter Figma node data: skips VECTOR nodes, converts colors to hex using rgbaToHex, removes boundVariables/imageRef, extracts relevant properties.

  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:210-222 (helper)

  Utility helper to convert RGBA color objects to hexadecimal strings, used within filterFigmaNode for get_node_info processing.

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