Skip to main content
Glama
paragdesai1

Cursor Talk to Figma MCP

by paragdesai1

set_fill_color

Change the fill color of Figma design elements by specifying RGB(A) values for text or frame nodes to update visual appearance.

Instructions

Set the fill color of a node in Figma can be TextNode or FrameNode

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)

Implementation Reference

  • The handler function that implements the core logic of the 'set_fill_color' tool. It sends a 'set_fill_color' command to the Figma plugin with the provided node ID and RGBA color values, handles the response, and returns a formatted success or error message.
    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)
                }`,
            },
          ],
        };
      }
    }
  • The Zod input schema for the 'set_fill_color' tool, validating the nodeId and RGBA color components (r, g, b required between 0-1, a optional).
      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)"),
    },
  • The registration of the 'set_fill_color' tool on the MCP server using server.tool(), including name, description, input schema, and handler function.
    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)
                  }`,
              },
            ],
          };
        }
      }
    );

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/paragdesai1/parag-Figma-MCP'

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