add_variable_mode
Destructive
Add modes to Figma variable collections programmatically for Light/Dark themes, responsive breakpoints, or multi-brand variants.
Instructions
Add a new mode to an existing variable collection (e.g. Light/Dark, Desktop/Mobile).
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| collectionId | Yes | Variable collection ID | |
| modeName | Yes | Name for the new mode |
Implementation Reference
- plugin/src/write-variables.ts:37-50 (handler)Handler implementation for 'add_variable_mode' tool. Validates collectionId and modeName params, retrieves the variable collection, adds a new mode using collection.addMode(), commits the undo, and returns the result with collectionId, modeId, and modeName.
case "add_variable_mode": { const p = request.params || {}; if (!p.collectionId) throw new Error("collectionId is required"); if (!p.modeName) throw new Error("modeName is required"); const collection = await figma.variables.getVariableCollectionByIdAsync(p.collectionId); if (!collection) throw new Error(`Collection not found: ${p.collectionId}`); const modeId = collection.addMode(p.modeName); figma.commitUndo(); return { type: request.type, requestId: request.requestId, data: { collectionId: p.collectionId, modeId, modeName: p.modeName }, }; } - plugin/src/write-handlers.ts:4-14 (registration)Tool routing registration. The handleWriteVariableRequest (which contains add_variable_mode) is imported and integrated into the write request handler chain at line 12. This is where the tool handler is registered in the request dispatch pipeline.
import { handleWriteVariableRequest } from "./write-variables"; import { handleWriteComponentRequest } from "./write-components"; import { handleWritePrototypeRequest } from "./write-prototype"; export const handleWriteRequest = async (request: any) => (await handleWriteCreateRequest(request)) ?? (await handleWriteModifyRequest(request)) ?? (await handleWriteStyleRequest(request)) ?? (await handleWriteVariableRequest(request)) ?? (await handleWriteComponentRequest(request)) ?? (await handleWritePrototypeRequest(request)); - plugin/src/write-helpers.ts:1-11 (helper)Helper utility used by the add_variable_mode handler (and other variable operations). The hexToRgb function converts hex color strings to RGB objects with normalized values (0-1 range), used when parsing COLOR type variable values.
// Write helpers — utilities used exclusively by write handlers. export const hexToRgb = (hex: string) => { const clean = hex.replace("#", ""); return { r: parseInt(clean.slice(0, 2), 16) / 255, g: parseInt(clean.slice(2, 4), 16) / 255, b: parseInt(clean.slice(4, 6), 16) / 255, a: clean.length >= 8 ? parseInt(clean.slice(6, 8), 16) / 255 : 1, }; };