Claude Talk to Figma MCP

Instructions

Implementation Reference

• src/talk_to_figma_mcp/tools/modification-tools.ts:24-58 (handler)

  The async handler function that executes the 'set_fill_color' tool logic: validates RGB, applies color defaults, sends Figma command, returns text response.

  async ({ nodeId, r, g, b, a }) => {
    try {
      // Additional validation: Ensure RGB values are provided (they should not be undefined)
      if (r === undefined || g === undefined || b === undefined) {
        throw new Error("RGB components (r, g, b) are required and cannot be undefined");
      }
      
      // Apply default values safely - preserves opacity 0 for transparency
      const colorInput: Color = { r, g, b, a };
      const colorWithDefaults = applyColorDefaults(colorInput);
      
      const result = await sendCommandToFigma("set_fill_color", {
        nodeId,
        color: colorWithDefaults,
      });
      const typedResult = result as { name: string };
      return {
        content: [
          {
            type: "text",
            text: `Set fill color of node "${typedResult.name}" to RGBA(${r}, ${g}, ${b}, ${colorWithDefaults.a})`,
          },
        ],
      };
    } catch (error) {
      return {
        content: [
          {
            type: "text",
            text: `Error setting fill color: ${error instanceof Error ? error.message : String(error)}`,
          },
        ],
      };
    }
  }

• src/talk_to_figma_mcp/tools/modification-tools.ts:14-59 (registration)

  Registers the 'set_fill_color' MCP tool with server.tool, including description, Zod input schema, and handler.

  server.tool(
    "set_fill_color",
    "Set the fill color of a node in Figma. Alpha component defaults to 1 (fully opaque) if not specified. Use alpha 0 for fully transparent.",
    {
      nodeId: z.string().describe("The ID of the node to modify"),
      r: z.number().min(0).max(1).describe("Red component (0-1)"),
      g: z.number().min(0).max(1).describe("Green component (0-1)"),
      b: z.number().min(0).max(1).describe("Blue component (0-1)"),
      a: z.number().min(0).max(1).optional().describe("Alpha component (0-1, defaults to 1 if not specified)"),
    },
    async ({ nodeId, r, g, b, a }) => {
      try {
        // Additional validation: Ensure RGB values are provided (they should not be undefined)
        if (r === undefined || g === undefined || b === undefined) {
          throw new Error("RGB components (r, g, b) are required and cannot be undefined");
        }
        
        // Apply default values safely - preserves opacity 0 for transparency
        const colorInput: Color = { r, g, b, a };
        const colorWithDefaults = applyColorDefaults(colorInput);
        
        const result = await sendCommandToFigma("set_fill_color", {
          nodeId,
          color: colorWithDefaults,
        });
        const typedResult = result as { name: string };
        return {
          content: [
            {
              type: "text",
              text: `Set fill color of node "${typedResult.name}" to RGBA(${r}, ${g}, ${b}, ${colorWithDefaults.a})`,
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error setting fill color: ${error instanceof Error ? error.message : String(error)}`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/tools/modification-tools.ts:17-23 (schema)

  Zod schema defining input parameters for the set_fill_color tool.

  {
    nodeId: z.string().describe("The ID of the node to modify"),
    r: z.number().min(0).max(1).describe("Red component (0-1)"),
    g: z.number().min(0).max(1).describe("Green component (0-1)"),
    b: z.number().min(0).max(1).describe("Blue component (0-1)"),
    a: z.number().min(0).max(1).optional().describe("Alpha component (0-1, defaults to 1 if not specified)"),
  },

• src/talk_to_figma_mcp/types/color.ts:1-6 (schema)

  TypeScript interface for Color type used in the tool handler.

  export interface Color {
    r: number;
    g: number;
    b: number;
    a?: number;
  }

• src/talk_to_figma_mcp/utils/defaults.ts:16-23 (helper)

  Utility function to apply default alpha value (1) to Color, preserving explicit 0 for transparency; called in handler.

  export function applyColorDefaults(color: Color): ColorWithDefaults {
    return {
      r: color.r,
      g: color.g,
      b: color.b,
      a: applyDefault(color.a, FIGMA_DEFAULTS.color.opacity)
    };
  }