Skip to main content
Glama

set_fill_color

Change the fill color of a Figma design element by specifying RGB values and optional transparency. Use this tool to modify visual appearance in real-time through the CC Fig MCP server.

Instructions

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.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
nodeIdYesThe ID of the node to modify
rYesRed component (0-1)
gYesGreen component (0-1)
bYesBlue component (0-1)
aNoAlpha component (0-1, defaults to 1 if not specified)

Implementation Reference

  • Executes the set_fill_color tool: validates inputs, applies color defaults, sends command to Figma WebSocket, returns success/error 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)}`, }, ], }; } }
  • Input schema using Zod for tool parameters: nodeId (string), r,g,b (0-1 numbers), optional a (0-1).
    { 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)"), },
  • Registers the set_fill_color tool on the MCP server with name, description, input schema, and handler function.
    "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)}`, }, ], }; } } );
  • Utility function called by the handler to apply default alpha=1 to the color object if a is undefined.
    export function applyColorDefaults(color: Color): ColorWithDefaults { return { r: color.r, g: color.g, b: color.b, a: applyDefault(color.a, FIGMA_DEFAULTS.color.opacity) }; }
  • TypeScript interface for Color used in the handler for colorInput.
    export interface Color { r: number; g: number; b: number; a?: number; }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/agenisea/cc-fig-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server