CC Fig MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/tools/modification-tools.ts:341-368 (handler)

  Handler function that executes the set_effects tool logic by sending the command to Figma via websocket and formatting the response.

  async ({ nodeId, effects }) => {
    try {
      const result = await sendCommandToFigma("set_effects", {
        nodeId,
        effects
      });
      
      const typedResult = result as { name: string, effects: any[] };
      
      return {
        content: [
          {
            type: "text",
            text: `Successfully applied ${effects.length} effect(s) to node "${typedResult.name}"`
          }
        ]
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text",
            text: `Error setting effects: ${error instanceof Error ? error.message : String(error)}`
          }
        ]
      };
    }
  }

• src/talk_to_figma_mcp/tools/modification-tools.ts:319-340 (schema)

  Input schema using Zod for validating parameters: nodeId and effects array with detailed effect properties.

  {
    nodeId: z.string().describe("The ID of the node to modify"),
    effects: z.array(
      z.object({
        type: z.enum(["DROP_SHADOW", "INNER_SHADOW", "LAYER_BLUR", "BACKGROUND_BLUR"]).describe("Effect type"),
        color: z.object({
          r: z.number().min(0).max(1).describe("Red (0-1)"),
          g: z.number().min(0).max(1).describe("Green (0-1)"),
          b: z.number().min(0).max(1).describe("Blue (0-1)"),
          a: z.number().min(0).max(1).describe("Alpha (0-1)")
        }).optional().describe("Effect color (for shadows)"),
        offset: z.object({
          x: z.number().describe("X offset"),
          y: z.number().describe("Y offset")
        }).optional().describe("Offset (for shadows)"),
        radius: z.number().optional().describe("Effect radius"),
        spread: z.number().optional().describe("Shadow spread (for shadows)"),
        visible: z.boolean().optional().describe("Whether the effect is visible"),
        blendMode: z.string().optional().describe("Blend mode")
      })
    ).describe("Array of effects to apply")
  },

• src/talk_to_figma_mcp/tools/modification-tools.ts:317-369 (registration)

  Registration of the 'set_effects' tool using server.tool(), specifying name, description, input schema, and handler.

    "set_effects",
    "Set the visual effects of a node in Figma",
    {
      nodeId: z.string().describe("The ID of the node to modify"),
      effects: z.array(
        z.object({
          type: z.enum(["DROP_SHADOW", "INNER_SHADOW", "LAYER_BLUR", "BACKGROUND_BLUR"]).describe("Effect type"),
          color: z.object({
            r: z.number().min(0).max(1).describe("Red (0-1)"),
            g: z.number().min(0).max(1).describe("Green (0-1)"),
            b: z.number().min(0).max(1).describe("Blue (0-1)"),
            a: z.number().min(0).max(1).describe("Alpha (0-1)")
          }).optional().describe("Effect color (for shadows)"),
          offset: z.object({
            x: z.number().describe("X offset"),
            y: z.number().describe("Y offset")
          }).optional().describe("Offset (for shadows)"),
          radius: z.number().optional().describe("Effect radius"),
          spread: z.number().optional().describe("Shadow spread (for shadows)"),
          visible: z.boolean().optional().describe("Whether the effect is visible"),
          blendMode: z.string().optional().describe("Blend mode")
        })
      ).describe("Array of effects to apply")
    },
    async ({ nodeId, effects }) => {
      try {
        const result = await sendCommandToFigma("set_effects", {
          nodeId,
          effects
        });
        
        const typedResult = result as { name: string, effects: any[] };
        
        return {
          content: [
            {
              type: "text",
              text: `Successfully applied ${effects.length} effect(s) to node "${typedResult.name}"`
            }
          ]
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error setting effects: ${error instanceof Error ? error.message : String(error)}`
            }
          ]
        };
      }
    }
  );

• src/talk_to_figma_mcp/types/index.ts:42-87 (helper)

  TypeScript type definition for FigmaCommand union that includes 'set_effects' for type safety in command sending.

  export type FigmaCommand =
    | "get_document_info"
    | "get_selection"
    | "get_node_info"
    | "create_rectangle"
    | "create_frame"
    | "create_text"
    | "create_ellipse"
    | "create_polygon"
    | "create_star"
    | "create_vector"
    | "create_line"
    | "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"
    | "join"
    | "set_corner_radius"
    | "clone_node"
    | "set_text_content"
    | "scan_text_nodes"
    | "set_multiple_text_contents"
    | "set_auto_layout"
    | "set_font_name"
    | "set_font_size"
    | "set_font_weight"
    | "set_letter_spacing"
    | "set_line_height"
    | "set_paragraph_spacing"
    | "set_text_case"
    | "set_text_decoration"
    | "get_styled_text_segments"
    | "load_font_async"
    | "get_remote_components"
    | "set_effects"
    | "set_effect_style_id"
    | "group_nodes"
    | "ungroup_nodes"
    | "flatten_node"
    | "insert_child";