Figma Agent

Turn a Figma link into working code, design tokens, exported assets, or review feedback. This skill wraps the figma-mcp-server tools with the correct call order and the details that are easy to get wrong.

Prerequisite

This skill needs the figma-mcp-server MCP by planetabhi, the npm package installed and run with bunx figma-mcp-server. This is the local REST API server, not the official Figma Dev Mode MCP server that shares a similar name but has different tools. You can tell this server apart by its tools, such as get_file_nodes, render_images, and post_comment. If those tools are not available, tell the user to install and configure this server, point them to the project README, and stop. Do not try to work around missing tools.

The user also needs a FIGMA_API_KEY created with the scopes for the task. If a call fails with a permission error, check the scope table below and tell the user which scope to add when they regenerate the token.

Read the Figma link first

Every task starts from a link like https://figma.com/design/<file_key>/<name>?node-id=1245-67.

• Take file_key from the path segment after design, file, or proto.
• The node id in the URL uses a dash, like 1245-67. The API wants a colon, like 1245:67. Replace the dash with a colon before you call any tool. If you skip this you get an empty or not found result, not an error.
• The ids parameter is one string with values separated by commas, like 1:2,3:4. It is not an array.
• If the link has no node id, the user means the whole page or file. Fetch it shallowly with a small depth instead of pulling the entire tree.
• Team and project tools need a team_id from a team URL, not a file_key.