figmcp

Map a design component to a code component, so get_design_context names the code component for every instance of it. Pass an instance, component or component set id; a component in a set maps the whole set.

Download assets for a single node: an exported render (`export`), the original images used as fills (`rawImages`, up to 20) and SVGs of the vector layers (`svgAssets`, up to 20). defaultFormat and defaultScale set the export format (png, jpg, svg, pdf) and scale (default png at 1).

Get the mapping from the component instances in a node to code components: { nodeId: { codeConnectName, codeConnectSrc, label } }, plus the components that are not mapped yet. Mappings live in the project (.figma-local/code-connect.json under the working directory).

Get design context for a Figma node — the primary tool for design-to-code workflows. Returns reference code (Flutter widgets for Flutter projects, React + Tailwind otherwise), the assets it uses, a screenshot and the variables in the node. The code must be adapted to the target project. Use the nodeId parameter to specify a node id; from a URL like https://figma.com/design/:fileKey/:fileName?node-id=1-2 the node id is 1:2. With no nodeId the current selection in Figma is used. Large nodes return metadata instead of code unless forceCode is set.

IMPORTANT: Always prefer to use get_design_context. Get metadata for a node or page in XML format: node IDs, layer types, names, positions and sizes, useful for an overview of the structure. nodeId can be a page id (e.g. 0:1). When nodeId is omitted, returns the pages of the document (and saved snapshots) instead. When something is selected in Figma, the response starts with a "Currently selected nodes:" block.

Generate a screenshot for a given node or the currently selected node in Figma. maxDimension (default 1024) caps the longer edge of the PNG (up to 2x the node size). The response gives a local URL and file path plus width/height and original_width/original_height. Set enableBase64Response to also get the image inline.

Get variable definitions for a given node id. E.g. {'icon/default/secondary': #949494}. Variables and styles are reusable values applied to colours, fonts, sizes and spacings. Values resolve for the node's own mode.

Save a design export JSON (frames with node trees, as the plugin produces) as a snapshot, so its nodes can be read without the plugin.

Remove the code component mapping of a component (by instance, component or set id).

Write a full design export of a node (default: the selection) to a JSON file: the node tree with every layout, paint, text, variable, style, component and interaction detail, icon SVGs, renders of masked or rotated groups, image fills and a 2x preview. Mapped components carry their code component. Use it to hand a frame to a build script.

Create or edit designs in the file open in Figma Desktop by running JavaScript against the Figma plugin API. `code` is the body of an async function with `figma` in scope: use await, and `return` a value (nodes come back as {id, name, type, x, y, width, height}); console.log output is returned too. The whole run is one undo step. If the script throws, the changes it made before the error stay. Rules of the plugin API here: - The file uses dynamic page loading: use figma.getNodeByIdAsync, figma.setCurrentPageAsync, await page.loadAsync() before reading another page, getMainComponentAsync, and the *Async style/variable getters. - Load every font before setting text or text properties: await figma.loadFontAsync({ family: "Inter", style: "Regular" }). Check figma.listAvailableFontsAsync() when unsure a font exists. - Colours are 0-1 RGB: fills = [{ type: "SOLID", color: { r: 1, g: 0.4, b: 0 } }]. Paint arrays are immutable: assign a new array. - Prefer auto layout: layoutMode, itemSpacing, padding*, primaryAxisAlignItems, counterAxisAlignItems; set layoutSizingHorizontal/Vertical ("FILL", "HUG", "FIXED") only after the node is appended to an auto-layout parent. - New nodes land on the current page: place top-level frames clear of existing ones, and append children with parent.appendChild(node). - Reuse what the file has: local components (figma.root.findAll is slow; search the current page or use figma.getLocalPaintStylesAsync, figma.variables.getLocalVariablesAsync), and set bound variables with figma.variables.setBoundVariableForPaint. - Images from the web: const img = await figma.createImageAsync(url), then fills = [{ type: "IMAGE", imageHash: img.hash, scaleMode: "FILL" }]. fetch(url) works too (e.g. an SVG for figma.createNodeFromSvg). - figma.currentPage.selection = [node] and figma.viewport.scrollAndZoomIntoView([node]) show the result. Build a screen in a few calls (structure, then sections), return the ids, and check each step with get_screenshot.

Status of the local Figma connection: whether the plugin is connected, the pairing code it needs, the open file, page and selection, the project and its Code Connect file, and the saved snapshots. Use it when a read fails.