awdr74100/figwright

MCP server: npx -y @figwright/mcp@latest (in .mcp.json)
Figma plugin: download zip from latest GitHub Release, import manifest.json via Figma desktop Menu > Plugins > Development > Import plugin from manifest
Optional skills: npx skills add awdr74100/figwright/skills
Requires Node.js 20.19+ or 22.12+

Usage

• •Add the server to your MCP client config, install the plugin in the Figma desktop app, then open the Figwright plugin — it auto-connects and shows 'Connected'
• •Prompt the agent: 'Code this Figma selection as a React component' (read) or 'Build a pricing section in Figma from this spec' (write)
• •Verify the link with a `ping`; multiple agents can share one plugin via leader/follower election

Key features

• ✓112 tools spanning read AND write of the Figma canvas (frames, text, auto-layout, styles, variables, components, screens, animations)
• ✓Provider-first codegen: get_design_context, component_map / token_map / icon_map join Figma data to your codebase so codegen reuses existing components, tokens, icons
• ✓design_diff compares a design against a saved baseline so you update only affected code
• ✓Two installable agent skills: figma-codegen and figma-build
• ✓Runs 100% locally (stdio + WebSocket on 127.0.0.1:3055) with Host/Origin header gates against DNS rebinding

Best for

Design-to-code workflows where an agent should both implement Figma designs as code and build designs back onto the canvas

Caveats

• ⚠Figma desktop app required to import the plugin (not on the Figma Community marketplace yet)
• ⚠Node.js 20.19+ or 22.12+ required; Node 18/21 and 22.0–22.11 not supported
• ⚠Dev Mode is read-only — every write tool fails there (screenshots/PDF export and inspection still work); FigJam lacks components/variables/styles/Motion
• ⚠Write tools change your Figma file and export tools write files — review your agent's actions; not a substitute for tool-approval controls