Cursor Talk to Figma MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/server.ts:127-154 (registration)

  MCP tool registration for 'read_my_design'. Defines the tool with no input parameters and handler that forwards the command to Figma plugin via sendCommandToFigma and returns the JSON result.

  server.tool(
    "read_my_design",
    "Get detailed information about the current selection in Figma, including all node details",
    {},
    async () => {
      try {
        const result = await sendCommandToFigma("read_my_design", {});
        return {
          content: [
            {
              type: "text",
              text: JSON.stringify(result)
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error getting node info: ${error instanceof Error ? error.message : String(error)
                }`,
            },
          ],
        };
      }
    }
  );

• src/cursor_mcp_plugin/code.js:381-408 (handler)

  Core handler function 'readMyDesign' that processes the current Figma selection: loads nodes, exports them as JSON using Figma's JSON_REST_V1 format, filters with filterFigmaNode, and returns array of processed node documents.

  async function readMyDesign() {
    try {
      // Load all selected nodes in parallel
      const nodes = await Promise.all(
        figma.currentPage.selection.map((node) => figma.getNodeByIdAsync(node.id))
      );
  
      // Filter out any null values (nodes that weren't found)
      const validNodes = nodes.filter((node) => node !== null);
  
      // Export all valid nodes in parallel
      const responses = await Promise.all(
        validNodes.map(async (node) => {
          const response = await node.exportAsync({
            format: "JSON_REST_V1",
          });
          return {
            nodeId: node.id,
            document: filterFigmaNode(response.document),
          };
        })
      );
  
      return responses;
    } catch (error) {
      throw new Error(`Error getting nodes info: ${error.message}`);
    }
  }

• src/cursor_mcp_plugin/code.js:252-336 (helper)

  Helper function filterFigmaNode recursively processes Figma node data: skips VECTOR nodes, converts RGBA colors to HEX using rgbaToHex, removes boundVariables/imageRef, extracts relevant properties like fills/strokes/children/style/bbox for serialization.

  function filterFigmaNode(node) {
    if (node.type === "VECTOR") {
      return null;
    }
  
    var filtered = {
      id: node.id,
      name: node.name,
      type: node.type,
    };
  
    if (node.fills && node.fills.length > 0) {
      filtered.fills = node.fills.map((fill) => {
        var processedFill = Object.assign({}, fill);
        delete processedFill.boundVariables;
        delete processedFill.imageRef;
  
        if (processedFill.gradientStops) {
          processedFill.gradientStops = processedFill.gradientStops.map(
            (stop) => {
              var processedStop = Object.assign({}, stop);
              if (processedStop.color) {
                processedStop.color = rgbaToHex(processedStop.color);
              }
              delete processedStop.boundVariables;
              return processedStop;
            }
          );
        }
  
        if (processedFill.color) {
          processedFill.color = rgbaToHex(processedFill.color);
        }
  
        return processedFill;
      });
    }
  
    if (node.strokes && node.strokes.length > 0) {
      filtered.strokes = node.strokes.map((stroke) => {
        var processedStroke = Object.assign({}, stroke);
        delete processedStroke.boundVariables;
        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) => {
          return filterFigmaNode(child);
        })
        .filter((child) => {
          return child !== null;
        });
    }
  
    return filtered;
  }

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

  Helper function rgbaToHex converts Figma RGBA color objects to hexadecimal strings, 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')}`;
  }
  
  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

• src/cursor_mcp_plugin/code.js:122-182 (handler)

  Dispatch handler in handleCommand switch statement that routes 'read_my_design' commands to the readMyDesign function.

        return await readMyDesign();
      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 "delete_multiple_nodes":
        return await deleteMultipleNodes(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 "set_corner_radius":
        return await setCornerRadius(params);
      case "set_text_content":
        return await setTextContent(params);
      case "clone_node":
        return await cloneNode(params);
      case "scan_text_nodes":
        return await scanTextNodes(params);
      case "set_multiple_text_contents":
        return await setMultipleTextContents(params);
      case "get_annotations":
        return await getAnnotations(params);
      case "set_annotation":
        return await setAnnotation(params);
      case "scan_nodes_by_types":
        return await scanNodesByTypes(params);
      case "set_multiple_annotations":
        return await setMultipleAnnotations(params);
      case "set_layout_mode":
        return await setLayoutMode(params);
      case "set_padding":
        return await setPadding(params);
      case "set_axis_align":
        return await setAxisAlign(params);
      case "set_layout_sizing":
        return await setLayoutSizing(params);
      case "set_item_spacing":
        return await setItemSpacing(params);
      default:
        throw new Error(`Unknown command: ${command}`);
    }
  }