set_fill_color
Change the fill color of Figma design elements like text or frames by specifying RGB(A) values to customize visual appearance.
Instructions
Set the fill color of a node in Figma can be TextNode or FrameNode
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | The ID of the node to modify | |
| r | Yes | Red component (0-1) | |
| g | Yes | Green component (0-1) | |
| b | Yes | Blue component (0-1) | |
| a | No | Alpha component (0-1) |
Implementation Reference
- src/cursor_mcp_plugin/code.js:386-434 (handler)Core handler function in the Figma plugin that retrieves the specified node by ID and sets its fill color using a solid Paint style constructed from RGBA parameters.async function setFillColor(params) { console.log("setFillColor", params); const { nodeId, color: { r, g, b, a }, } = params || {}; if (!nodeId) { throw new Error("Missing nodeId parameter"); } const node = await figma.getNodeByIdAsync(nodeId); if (!node) { throw new Error(`Node not found with ID: ${nodeId}`); } if (!("fills" in node)) { throw new Error(`Node does not support fills: ${nodeId}`); } // Create RGBA color const rgbColor = { r: parseFloat(r) || 0, g: parseFloat(g) || 0, b: parseFloat(b) || 0, a: parseFloat(a) || 1, }; // Set fill const paintStyle = { type: "SOLID", color: { r: parseFloat(rgbColor.r), g: parseFloat(rgbColor.g), b: parseFloat(rgbColor.b), }, opacity: parseFloat(rgbColor.a), }; console.log("paintStyle", paintStyle); node.fills = [paintStyle]; return { id: node.id, name: node.name, fills: [paintStyle], }; }
- src/talk_to_figma_mcp/server.ts:265-301 (registration)MCP server tool registration for 'set_fill_color', including input schema validation with Zod and a handler that proxies the command to the Figma plugin via WebSocket, returning a formatted response.server.tool( "set_fill_color", "Set the fill color of a node in Figma can be TextNode or FrameNode", { 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)") }, async ({ nodeId, r, g, b, a }) => { try { const result = await sendCommandToFigma('set_fill_color', { nodeId, color: { r, g, b, a: a || 1 } }); const typedResult = result as { name: string }; return { content: [ { type: "text", text: `Set fill color of node "${typedResult.name}" to RGBA(${r}, ${g}, ${b}, ${a || 1})` } ] }; } catch (error) { return { content: [ { type: "text", text: `Error setting fill color: ${error instanceof Error ? error.message : String(error)}` } ] }; } } );
- src/cursor_mcp_plugin/code.js:79-80 (handler)Dispatch case in the Figma plugin's handleCommand function that routes 'set_fill_color' commands to the setFillColor handler.case "set_fill_color": return await setFillColor(params);
- Zod schema definition for the input parameters of the set_fill_color MCP 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)") },