Skip to main content
Glama

set_effects

Apply visual effects like shadows, blurs, and glows to Figma design elements to enhance appearance and depth.

Instructions

Set the visual effects of a node in Figma

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
nodeIdYesThe ID of the node to modify
effectsYesArray of effects to apply

Implementation Reference

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

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.0.0

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden but offers minimal behavioral insight. It implies a mutation ('Set') but doesn't disclose whether this overwrites existing effects, requires specific permissions, or has side effects like affecting other nodes. For a tool that modifies visual properties, this lack of detail is a significant gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's front-loaded and wastes no space, making it easy for an agent to parse quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's complexity (modifying visual effects with nested parameters) and lack of annotations and output schema, the description is insufficient. It doesn't explain what happens on success/failure, the format of effects arrays, or how this interacts with other property setters, leaving critical gaps for an agent to use it correctly.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema fully documents the two parameters ('nodeId' and 'effects') and their nested properties. The description adds no additional meaning beyond implying the tool applies effects to a node, which is already clear from the schema. This meets the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Set') and target ('visual effects of a node in Figma'), making the purpose understandable. However, it doesn't differentiate from sibling tools like 'set_effect_style_id' or other visual property setters (e.g., 'set_fill_color'), which would require more specificity about what distinguishes this tool.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., needing a valid node ID), exclusions, or comparisons to similar tools like 'set_effect_style_id' for applying predefined styles, leaving the agent to infer usage from context alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.