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
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | The ID of the node to modify | |
| effects | Yes | Array 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") },
- 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)}` } ] }; } } );
- 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";