Tools

The main tool for design to code. Returns reference code (Flutter or React + Tailwind), the assets it uses, a screenshot and the variables in the node. Large nodes return metadata instead of code unless forceCode is set.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

framework

flutter or react. Default: from the client, then FIGMA_LOCAL_MCP_FRAMEWORK, then pubspec.yaml.

clientLanguages

Comma separated languages of the client, e.g. "dart".

clientFrameworks

Comma separated frameworks of the client, e.g. "flutter".

screen

Flutter: draw the node as a phone screen that fills the screen and scrolls when tall.

screenUtil

Flutter: write lengths with flutter_screenutil (.w, .h, .r, .sp). Default: when pubspec.yaml depends on flutter_screenutil.

assetsDir

Flutter: folder of the asset paths in the code.

excludeScreenshot

Leave the screenshot out of the response.

forceCode

Always return code, even for very large nodes.

disableCodeConnect

Draw mapped components from their layers instead of naming the code component.

Layer tree in XML: node ids, types, names, positions and sizes. Good for an overview of a page or a large frame. Prefer get_design_context for code.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

A PNG of a node or the selection. The response gives a local URL and file path.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

maxDimension

Longest edge in pixels (default 1024, up to 2x the node size).

contentsOnly

Render the node in isolation, without overlapping content.

enableBase64Response

Also include the PNG inline as base64.

Variables and styles used by a node, e.g. { 'icon/default/secondary': #949494 }, resolved for the node's own mode.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

Assets for one node: an exported render, the original image fills (up to 20) and SVGs of the vector layers (up to 20).

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

defaultFormat

png, jpg, svg or pdf (default png).

defaultScale

Export scale, 0.01 to 4 (default 1).

Check Flutter code against the design: analyzes it, renders it with flutter test at 2x and compares the render with Figma's own. Returns analyzer and runtime errors, the share of differing pixels and a diff image. With file, it checks your widget inside your project, with its packages, assets and flutter_screenutil scaling; without it, the generated reference code, layer by layer.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

file

The .dart file with the widget, under the project's lib/.

widget

The widget class in file (default: its first widget class).

viewport

Lay the code out on a screen of this size, e.g. "360x780", and report overflows with the render.

fonts

Folders with font files (default: the project's assets/fonts and the system fonts).

flutter

Path of the flutter tool, when it is not on PATH.

Create or edit designs in the open file by running JavaScript against the Figma plugin API. The whole run is one undo step.

code

Body of an async function run with figma in scope.

timeoutMs

How long to wait for the script (default 60000, max 600000).

Local components and component sets with their properties and variant options, library components the file already uses, and local paint, text and effect styles and variables with their values. Call it before designing, so the agent reuses what the file has.

query

Words that must all appear in the name or description, e.g. "button primary". Empty lists everything.

kinds

components, styles and/or variables (default: all).

allPages

Search components on every page, not just the current one.

limit

Most results per kind (default 50).

Put an image file from your computer into the open file: a PNG, JPG or GIF becomes a layer with the image fill (or the fill of an existing layer), and an SVG becomes editable vectors.

path

The image file, absolute or relative to the project.

nodeId

Set the image as the fill of this layer instead of making a new one.

parentId

Frame or group to put the new layer in (default: the current page).

width, height

Size of the new layer; one keeps the aspect ratio.

x, y

Position of the new layer.

scaleMode

FILL, FIT, CROP or TILE (default FILL).

Mapping from the component instances in a node to code components, plus the components not mapped yet.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

Map a design component to a code component. A component in a set maps the whole set.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

componentName

Code component name, e.g. AppPrimaryButton.

source

Path of the code component in the project.

label

Framework, e.g. Flutter or React.

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

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

Connection status: whether the plugin is connected, the pairing code, the open file, page and selection, the project, Code Connect and saved snapshots. Use it when a read fails.

Write a full design export of a node (default: the selection) to a JSON file.

nodeId

Node id like 1:2, or 1-2 from a URL. Defaults to the current selection.

path

Absolute .json path to write (default: the data folder).

Save a design export JSON as a snapshot, so its nodes can be read without the plugin.

path

Absolute path of the export JSON file.