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, HTML + Tailwind for static sites, 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. Read-only; with no nodeId it uses the selection. Use it for design tokens, and get_design_context for the layout. Without the plugin, a saved snapshot gives the raw values only, without names.

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. Use it for an export made earlier with save_design_export or the plugin. Copies the file into the local snapshot store, replacing an earlier snapshot of the same frames; the source file and the Figma file are not changed. Fails if the JSON is not a design export.

Put an image file from this computer into the file open in Figma Desktop: a PNG, JPG or GIF becomes a rectangle with the image fill (or the fill of the layer `nodeId`), and an SVG becomes editable vector layers. Use it for the project's own assets (logos, icons, photos) while designing; use_figma with figma.createImageAsync(url) takes images from the web. The new layer goes into `parentId` (default: the current page, right of its content), sized by `width`/`height` (one keeps the aspect ratio; default: the image's own size). Images larger than 4096 px on a side are scaled down by Figma.

Remove the code component mapping saved by add_code_connect_map, so get_design_context stops naming that code component. Pass an instance, component or component set id. Only the local mapping file changes, never the design; returns how many mappings were removed (0 when none existed). Add it again with add_code_connect_map to undo.

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.

Search the design system of the file open in Figma Desktop: local components and component sets (with their properties and variant options), library components the file already uses (with an instance to copy), and local paint, text and effect styles and variables (with their default-mode values). Every word of `query` must appear in the name or description; leave it empty to list everything. Call it before designing with use_figma, and reuse what it finds: figma.getNodeByIdAsync(id) then component.createInstance(), instance.clone() for a library component, figma.getStyleByIdAsync and figma.variables.getVariableByIdAsync. Libraries the file does not use yet are not visible to the plugin; instancesNotScanned means the page was too large to look through all its instances. Needs the plugin and Design mode.

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: find its components, styles and variables with search_design_system first, 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). Local files go in with place_image. - 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.

Check Flutter or React + Tailwind code against the design: renders it at 2x (Flutter with `flutter test`, React in headless Chrome with Tailwind) and compares the render with Figma's own 2x render of the node. Returns analyzer or runtime errors (overflows, missing assets, broken images), the share of differing pixels and a diff image (the design in grey, differing pixels in red). React and HTML: without `file` it checks the code get_design_context generates and compares every layer's box too. With `file` (a .jsx or .tsx under a folder with package.json, or an .html page) it renders that file's default export or page: it must be self-contained apart from React and image imports; images load from the project's public folder. Pass `css` for the stylesheet with its tokens. React and Tailwind load from a CDN and the fonts from the system or Google Fonts. Needs Chrome and the puppeteer-core package. Flutter: With `file`, it checks that widget inside its own Flutter project: the project's packages and assets, inside a MaterialApp, scaled by flutter_screenutil to the frame size when the project uses it. The widget needs a constructor without arguments. Without `file`, it checks the reference code get_design_context generates and also compares every layer's box. Use it after implementing a frame, and fix what it reports. Text in fonts it cannot find is drawn in a fallback font, and emoji have no colour font in the test, so text after them shifts. A run takes from 20 seconds to a few minutes.

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.