figma-content-operator

Figma Content Operator

Canvas operations are driven through the official MCP Inspector CLI @figwright/mcp; web page conversion is written to the Figma clipboard, does not go through MCP, and does not paste into the canvas on the user's behalf.

Runtime Requirements

• Node.js 22.19+
• npx
• Web page copying requires a local Chromium browser; when using the Axhub extension, you can operate directly on the target web page
• Tasks that depend on Figma canvas read/write require the current version of the Drafito or upstream Figwright plugin to be running in the target file

Resolve SKILL_DIR as a directory containing this SKILL.md , then execute the corresponding script according to the task.

Choose the delivery path first

Here, "web page" includes static HTML, React, Vue, other frontend frameworks, and deployed URLs; the basis for judgment is the page actually rendered in the browser, not the source file extension.

• When the user explicitly requests modifying the current canvas, selection, or existing nodes, go directly through Figwright MCP. Do not ask again whether to generate a web page first.
• When the user explicitly requests making a web page, responsive page, multi-page, or browser state first, complete a runnable web page first, then go through the web page clipboard process.
• When the user proposes a new design but does not specify the delivery path, first ask: "This time, should we generate a web page (HTML/React/Vue) first, or directly modify the Figma canvas?" Also provide a recommendation: for complete pages, responsive and multi-state designs, prioritize generating a web page; for local adjustments on an existing design and component/variable reuse, prioritize directly modifying the canvas.
• When a web page draft is needed first and then semantic fine-tuning continues, first have the user paste the clipboard content into Figma; only after the user confirms continuing to modify the canvas, start the MCP reading and editing process.

Copy Web Page to Figma

Web page delivery uniformly reads references/webpage-to-figma.md. This path does not start Relay or call MCP; ultimately the user pastes the clipboard content into the target Figma file.

Progressive Tool Discovery

This section applies only to MCP canvas tasks. Explore in three levels to avoid loading all schemas:

1. Read references/tools/index.mdto learn the 104 tool names across seven domains.
2. Read only the reference documentation for the current domain.
3. Run schema <exact-tool-name>only for the tool about to be called; when the name is uncertain, run tools <keyword>。

Do not output the complete tools/list or put all schemas into the context.catalog-check only compares the streamlined index with the pinned-version server.

MCP Canvas Workflow

1. Confirm the target Figma Web design file, page, and scope of operations; read the target before writing.
2. Run doctor, then start relayin a separate process that can be kept running, and retain the exact process handle.
3. After Relay is ready, run launch-url. Wait for the user to confirm that Drafito is running in Figma, then run ping and profilein sequence; the server starting does not mean the plugin is already connected.
4. When establishing the connection, read references/setup-and-connect.md. Drafito and upstream Figwright provide the same complete contract.
5. Read workflow references as needed:
   • Selection, node tree, metadata, screenshots:references/read-and-inspect.md
   • Canvas writes and verification:references/edit-canvas.md
   • Styles, variables, components, pages, assets, prototype interactions:references/design-systems-and-advanced.md
   • Design-to-code or code-to-design mapping:references/grounding-workflows.md
6. Perform the smallest-scope write, then verify with focused queries via get_node、get_selection or the corresponding design system query.
7. Report the current page and file context, calls, node IDs or file paths, and verification results; clearly state when there is a partial failure.
8. After the task completes, is canceled, or fails, stop the exact Relay process started for this run; do not attempt to start, shut down, or otherwise manage the Drafito plugin itself on the user's behalf.

The server-local analyze_project and scan_components do not require Figma. Other mapping tools combine local projects with live Figma data and require an end-to-end plugin connection.

Comment Figma

When comments or commentable links are involved, refer to axhub-commentary。

Only append the absolute projectPathto the original Figma URL; do not pre-append try-plugin-*. The Axhub extension first binds the working directory, then starts Drafito on its own.

Security and efficiency

• Treat create, update, move, delete, import, batch, and export calls as modifying operations and strictly limit them to the scope specified by the user.
• Prefer focused reads and avoid directly calling get_document。
• Do not guess node IDs or parameter structures; read IDs first, then fetch the live schema.
• batch is only for relevant and reversible edits; scope destructive operations separately and verify them.
• In case of failure, version skew, file ambiguity, or security issues, read references/troubleshooting-and-security.md。