figma_write
Execute JavaScript code to create or modify Figma designs, providing direct programmatic control over nodes, layouts, styles, and component properties.
Instructions
Execute JavaScript code to CREATE or MODIFY designs in Figma. ⚠️ MANDATORY: Call figma_docs BEFORE writing any design code. Skipping figma_docs causes hardcoded colors, wrong sizing, broken layouts, and low-quality UI. When a design-system bundle is configured, call design_system_plan with the user's full request before writing; the server enforces this gate. Use figma.loadBundleAsset(reference, opts) for resolved internal SVG or raster assets, then call figma_validate after writing. Use the figma proxy object — all methods return Promises, use async/await. Operations: create, modify, delete, clone, group, ungroup, flatten, resize, set_selection, set_viewport, batch (multiple ops in one call). Design Tokens: createVariableCollection, createVariable, setVariableValue, addVariableMode, renameVariableMode, removeVariableMode, applyVariable, setFrameVariableMode, clearFrameVariableMode, createPaintStyle, createTextStyle, createComponent. Prototyping: setReactions, getReactions, removeReactions (click/hover/press → navigate/overlay/swap with Smart Animate transitions). Scroll: setScrollBehavior (overflowDirection: NONE/HORIZONTAL/VERTICAL/BOTH). Variants: setComponentProperties, swapComponent, getComponentProperties. Component property definitions (master-side, required for instance text overrides to recalc auto-layout): addComponentProperty (TEXT/BOOLEAN/INSTANCE_SWAP), bindComponentPropertyToText, removeComponentProperty. The code runs in a sandboxed VM: no access to require, process, fs, fetch, or network.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | JavaScript using figma.create(), figma.modify(), figma.setPage(), etc. | |
| sessionId | No | Target a specific Figma file/tab when multiple are connected. Omit to auto-select. |