set_grid
Apply layout grids to Figma frames by specifying grid pattern, count, size, gutter, offset, alignment, visibility, and color for columns, rows, or custom grids.
Instructions
Apply layout grids to a frame node in Figma. Supports columns, rows, and grid patterns.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | The ID of the frame node to apply grids to | |
| grids | Yes | Array of layout grids to apply |
Implementation Reference
- src/talk_to_figma_mcp/tools/modification-tools.ts:699-746 (registration)Registration of the 'set_grid' MCP tool using server.tool() with the name 'set_grid'. Defines schema for nodeId and grids parameters.
// Set Layout Grid Tool server.tool( "set_grid", "Apply layout grids to a frame node in Figma. Supports columns, rows, and grid patterns.", { nodeId: z.string().describe("The ID of the frame node to apply grids to"), grids: coerceJson(z.array( z.object({ pattern: z.enum(["COLUMNS", "ROWS", "GRID"]).describe("Grid pattern type"), count: z.coerce.number().optional().describe("Number of columns/rows (ignored for GRID)"), sectionSize: z.coerce.number().optional().describe("Size of each section in pixels"), gutterSize: z.coerce.number().optional().describe("Gutter size between sections in pixels"), offset: z.coerce.number().optional().describe("Offset from the edge in pixels"), alignment: z.enum(["MIN", "CENTER", "MAX", "STRETCH"]).optional().describe("Grid alignment"), visible: z.boolean().optional().describe("Whether the grid is visible (default: true)"), color: z.object({ r: z.coerce.number().min(0).max(1).describe("Red (0-1)"), g: z.coerce.number().min(0).max(1).describe("Green (0-1)"), b: z.coerce.number().min(0).max(1).describe("Blue (0-1)"), a: z.coerce.number().min(0).max(1).describe("Alpha (0-1)") }).optional().describe("Grid color") }) )).describe("Array of layout grids to apply") }, async ({ nodeId, grids }) => { try { const result = await sendCommandToFigma("set_grid", { nodeId, grids }); const typedResult = result as { name: string; gridCount: number }; return { content: [ { type: "text", text: `Applied ${typedResult.gridCount} layout grid(s) to frame "${typedResult.name}"`, }, ], }; } catch (error) { return { content: [ { type: "text", text: `Error setting layout grids: ${error instanceof Error ? error.message : String(error)}`, }, ], }; } } ); - Handler function for 'set_grid'. Sends a 'set_grid' command to Figma via WebSocket with nodeId and grids, then returns the result indicating how many grids were applied.
async ({ nodeId, grids }) => { try { const result = await sendCommandToFigma("set_grid", { nodeId, grids }); const typedResult = result as { name: string; gridCount: number }; return { content: [ { type: "text", text: `Applied ${typedResult.gridCount} layout grid(s) to frame "${typedResult.name}"`, }, ], }; } catch (error) { return { content: [ { type: "text", text: `Error setting layout grids: ${error instanceof Error ? error.message : String(error)}`, }, ], }; } } - Input schema for 'set_grid' tool: requires nodeId (string) and grids (array of objects with pattern, count, sectionSize, gutterSize, offset, alignment, visible, color fields).
{ nodeId: z.string().describe("The ID of the frame node to apply grids to"), grids: coerceJson(z.array( z.object({ pattern: z.enum(["COLUMNS", "ROWS", "GRID"]).describe("Grid pattern type"), count: z.coerce.number().optional().describe("Number of columns/rows (ignored for GRID)"), sectionSize: z.coerce.number().optional().describe("Size of each section in pixels"), gutterSize: z.coerce.number().optional().describe("Gutter size between sections in pixels"), offset: z.coerce.number().optional().describe("Offset from the edge in pixels"), alignment: z.enum(["MIN", "CENTER", "MAX", "STRETCH"]).optional().describe("Grid alignment"), visible: z.boolean().optional().describe("Whether the grid is visible (default: true)"), color: z.object({ r: z.coerce.number().min(0).max(1).describe("Red (0-1)"), g: z.coerce.number().min(0).max(1).describe("Green (0-1)"), b: z.coerce.number().min(0).max(1).describe("Blue (0-1)"), a: z.coerce.number().min(0).max(1).describe("Alpha (0-1)") }).optional().describe("Grid color") }) )).describe("Array of layout grids to apply") - Type definition for FigmaCommand union type, includes 'set_grid' as a valid command string.
| "set_grid" - sendCommandToFigma function that sends the 'set_grid' command (or any FigmaCommand) over WebSocket to the Figma plugin. Constructs the message with command name and params, tracks pending requests with timeout.
export function sendCommandToFigma( command: FigmaCommand, params: unknown = {}, timeoutMs: number = 300000 ): Promise<unknown> { return new Promise((resolve, reject) => { // If not connected, try to connect first if (!ws || ws.readyState !== WebSocket.OPEN) { connectToFigma(); reject(new Error("Not connected to Figma. Attempting to connect...")); return; } // Check if we need a channel for this command const requiresChannel = command !== "join"; if (requiresChannel && !currentChannel) { reject(new Error("Must join a channel before sending commands")); return; } const id = uuidv4(); const request = { id, type: command === "join" ? "join" : "message", ...(command === "join" ? { channel: (params as any).channel, sessionId: SESSION_ID } : { channel: currentChannel }), message: { id, command, params: { ...(params as any), commandId: id, // Include the command ID in params }, }, }; // Set timeout for request const timeout = setTimeout(() => { if (pendingRequests.has(id)) { pendingRequests.delete(id); logger.error(`Request ${id} to Figma timed out after ${timeoutMs / 1000} seconds`); reject(new Error('Request to Figma timed out')); } }, timeoutMs); // Store the promise callbacks to resolve/reject later pendingRequests.set(id, { resolve, reject, timeout, lastActivity: Date.now() }); // Send the request logger.info(`Sending command to Figma: ${command}`); logger.debug(`Request details: ${JSON.stringify(request)}`); ws.send(JSON.stringify(request)); }); }