set_fill_color
Modify the fill color of a Figma node (TextNode or FrameNode) by specifying its ID and RGB values. Use this action to update design elements programmatically.
Instructions
Set the fill color of a node in Figma can be TextNode or FrameNode
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| a | No | Alpha component (0-1) | |
| b | Yes | Blue component (0-1) | |
| g | Yes | Green component (0-1) | |
| nodeId | Yes | The ID of the node to modify | |
| r | Yes | Red component (0-1) |
Implementation Reference
- src/cursor_mcp_plugin/code.js:386-434 (handler)Core implementation of set_fill_color: retrieves Figma node by ID, validates support for fills, creates SOLID paint style from RGBA params, applies it to node.fills, returns updated node info.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 registration of 'set_fill_color' tool: defines input schema (nodeId, r,g,b,a), thin handler that forwards command to Figma plugin via WebSocket and formats 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 (registration)Dispatch case in Figma plugin's handleCommand switch that routes 'set_fill_color' to the setFillColor handler.case "set_fill_color": return await setFillColor(params);
- Zod input schema for set_fill_color tool parameters.{ 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)") },